Miasa amin'ny tetikasa sarotra, na programmer za-draharaha ianao na vao voalohany, dia azo inoana fa hiatrika olana ianao. Rehefa mizara ny tetikasanao ho modely maro ianao dia mipoitra ny olana, ka sarotra kokoa ny manara-maso ny lesoka sy mitady vahaolana. Amin'ny toe-javatra hafa, mety ho henjana ny debugging tranga tsirairay satria tsy nahita ny vahaolana mety amin'ny olana efa niasanao ianao.
Miseho ho toy ny kaody ihany koa izy io indraindray, izay mety ho sarotra amin'ny fotoana. JavaScript dia iray amin'ireo fiteny mifototra amin'ny Internet izay tena mora ianarana. Sokafy fotsiny ny navigateur desktop anao ary mandehana mankany amin'ny Developer Tools (matetika F12), dia vita ianao! Azonao atao avy eo ny manandrana amin'ny JS tsy mila mametraka na mitantana rindrambaiko sarotra.
Mba hanombohana, ny hany ilainao dia ny navigateur. Mahafinaritra ny manana an'io fahatsorana rehetra io avy hatrany, saingy misy fotoana izay ilainao bebe kokoa. Ohatra, eritrereto hoe te hanandrana amin'ny Web API vaovao izay hitanao vao haingana ianao fa tsy te hanomboka tetikasa vaovao.
Amin'ity lahatsoratra ity dia hampitaha sy hampifanohitra ireo kianja filalaovana JS telo malaza indrindra isika, CodePen, CodeSandbox, ary StackBlitz. Andeha isika hanomboka!
CodePen
Ny fitaovana fampivoarana tranonkala Frontend dia mivoatra hatrany, ary ny tonian-dahatsoratra dia singa lehibe amin'ny teknolojia farany izay manamora ny fiainan'ny mpamorona. Ankoatra ny tonian-dahatsoratra mitokana toa ny Atom na Notepad ++, dia nisy fipoahana ireo tonian-dahatsoratra mifototra amin'ny navigateur tato anatin'ny taona vitsivitsy izay tsy mitaky fametrahana programa ary mampiroborobo ny fiaraha-miasa bebe kokoa.
CodePen dia “vondrom-piarahamonina an-tserasera amin'ny fitiliana sy ny fanolorana ny HTML, CSS, ary ny snippets kaody JavaScript noforonin'ny mpampiasa” izay manome fahafahana mahafinaritra hianarana ny fomba fanoratana pejy web frontend tsara kokoa.
CodePen dia manome anao "mode" roa. Ny voalohany sy be mpampiasa indrindra dia ny Pen. Tsotra toy ny manindry bokotra iray ary entina mankany amin'ny mpamoaka lahatsoratra. Avy eo ianao dia afaka miditra amin'ny tontonana preview ary koa ny HTML fototra, CSS, ary JS fanovana windows.
Tsy misy “rafitra fichier”, “IntelliSense,” na zavatra hafa – fanasongadinana syntax tsotra fotsiny sy baiko haingana toy ny prettify. Ao amin'ny tabilao safidy, azonao atao ny misafidy avy amin'ny karazana preprocessors voafetra ho an'ny fiteny telo (toy ny TypeScript ho an'ny JS) na manampy fifandraisana amin'ny loharano ivelany.
Raha toa ka mila zavatra atao maimaim-poana ianao dia ampy ny iray amin'ireo tonian-dahatsoratra. Manoro hevitra ny CodePen aho ho an'izay rehetra tsy mila fanamboarana na tranomboky be dia be - HTML, CSS, ary JS fotsiny miaraka amin'ny pre-processors azo atao eo ambony. Raha te hampiasa ny kianja filalaovana ianao hanatsarana ny fisian'ny media sosialy na hamorona portfolio manokana, CodePen dia safidy tsara kokoa.
Premium Version
Manana safidy vitsivitsy hafa azonao isafidianana ao amin'ny CodePen ianao. Raha mandoa isan-taona ianao dia afaka mahazo iray amin'ireo drafitra premium telo amin'ny $12, $19, na $39 isam-bolana. Azonao atao ny mamorona penina manokana, lahatsoratra ary fanangonana tsy manam-petra amin'ny iray amin'ireo ambaratonga telo.
Hahazo ny marika Pro ihany koa ianao (fampivoarana ara-tsosialy), fidirana amin'ny fomba fiaraha-miasa mivantana, tsy misy dokam-barotra, sy ny maro hafa. Misy ihany koa ny paikady manokana ho an'ny ekipa sy ny fanavahana hafa. Jereo ny birao faktiora ofisialin'izy ireo raha mila fanazavana fanampiny.
Key Features
Ankoatra ny famoronana HTML, CSS, ary JavaScript ao amin'ny CodePen, dia misy zavatra vitsivitsy hafa mampiavaka azy.
- Azo atao ny mijery ny kaody amin'ny fotoana tena izy. Tsy mitaky fanangonana izany.
- Ny fanandramana dia ahafahanao mianatra zava-baovao.
- Mamorona tranga fitsapana kely hitadiavana sy hamahana olana.
- Asehoy ny asanao mahagaga.
- Mamorona sy mitahiry Pens ho ampiasaina any aoriana.
- Andramo ny kaodin'ny mpamorona hafa ary jereo fa miasa.
tombony
- Hanombohana dia tsy misy vidiny.
- Loharano fianarana naorina.
- Miara-miasa amin'ny hafa ary ampitahao ireo tetikasa hahitana izay mety halehany amin'ny ho avy.
- Ny UI dia mora ampiasaina sy mahitsy.
fatiantoka
- Kely ny tranomboky kaody, tsy ampy ny fahavitan'ny kaody mandeha ho azy. Tsara ho an'ny tetikasa iray pejy fotsiny izy io ary tsy mahazaka zavatra lehibe kokoa.
- Ao amin'ny CodePen, afaka mamorona penina manokana ianao, saingy mila manavao ho mpikambana Pro ($9/volana).
kaody sandbox
CodeSandbox dia tonian-dahatsoratra mifototra amin'ny tranonkala. Izy io dia manao automatique ny fitantanana ny transpiring, ny fonosana ary ny fiankinan-doha ho anao, ahafahanao manangana tetikasa vaovao amin'ny tsindry tokana. Rehefa avy namorona zavatra mahavariana ianao dia azonao atao ny mizara izany amin'ny hafa amin'ny fizarana fotsiny ny tranokala.
Mifanaraka amin'ny tetikasa JavaScript rehetra ny tonian-dahatsoratra, na dia misy endri-javatra manokana momba ny React aza, toy ny safidy hamonjena ilay tetikasa amin'ny môdely famoronana-react-app.
Izay tetikasa aorinao ao amin'ny CodeSandbox dia manomboka amin'ny môdely. Mety misy ifandraisany amin'ny tranomboky manokana, rafitra, na fotoana fandehanana (anisan'izany ny Node.js) na mampiasa teknolojian'ny tranonkala mahazatra fotsiny. Rehefa avy nisafidy môdely ianao dia alefa any amin'ny tonian-dahatsoratra, izay ahitanao ny rakitra ilaina rehetra ary efa misokatra ny varavarankely preview.
Afaka miditra amin'ny “rafitra fisie” ianao amin'ny Sandbox rehetra, izay midika fa afaka mamorona rakitra vaovao ianao, mampiasa maody (anisan'izany ny fonosana NPM), ary mifandray amin'ny fananana static. Misy ihany koa ny fahafahana manova ny rakitra fanamafisam-peo manokana.
Azonao atao mihitsy aza ny manamboatra ny môdely anao manokana ho an'ny tranga fampiasanao manokana, feno ny firafitry ny rakitra sy ny fiankinan-doha, toy ny amin'ny IDE. Satria mifandray amin'ny Github ilay fitaovana, afaka mamorona commits haingana ianao ary manokatra PRs. Azonao atao ny mametraka ny fampiharanao amin'ny ZEIT na Netlify avy hatrany.
CodeSandbox Team Pro
CodeSandbox, orinasa holandey izay ahafahan'ny mpamorona manangana sandbox fampivoarana fampiharana tranonkala mifototra amin'ny navigateur, dia namoaka tamin'ny fomba ofisialy ny sehatra fiaraha-miasa ahafahan'ny ekipa miasa amin'ny kaody ao anaty rahona. Ny vokatra vaovao, Team Pro, dia vahaolana tsy misy kaody natsangana ho an'ny ekipan'ny vokatra feno, manomboka amin'ny mpamorona sy ny mpitantana amin'ny alàlan'ny ekipa fiantohana kalitao (QA) sy ny sisa.
Ny tetikasa dia omena amina interface tsara ho an'ny mpampiasa ho an'izay te hanao na hanaiky fanovana amin'ny rindranasa an-tranonkala, misoroka fomba hafa toy ny fandefasana naoty sy tolo-kevitra ho an'ny mpamorona mba hanatanteraka ny fanovana, mamerina azy ireo ho amin'ny fifanakalozan-kevitra, ary mamerina ny dingana.
Key Features
- Mpanonta kaody mifototra amin'ny tranonkala sy fitaovana prototype.
- Ho an'ny fampiasana eo an-toerana dia azo alaina mora amin'ny rakitra zip ny boaty fasika.
- Programming atao anaty boaty fasika, izay azo zaraina mora foana amin'ny mpiara-miasa.
tombony
- Traikefa mpampiasa nohatsaraina sy fifehezana bebe kokoa amin'ny tonian-dahatsoratra.
- Ny endri-pijery mivantana dia azo ovaina sy jerena amin'ny varavarankely mitokana.
- Ny kaody dia namboarina ho azy ary misy CLI (codesandbox-cli)
- Fanohanana ny maody npm mandroso.
- Hafatra diso tsara misy soso-kevitra.
- Manatsara ny traikefa debugging izany amin'ny fanomezana terminal tsara kokoa, mpijery fitsapana ary mpijery olana.
fatiantoka
- Ny mpanjifa farany dia iharan'ny personalizations maro.
- Tsy mandeha araka ny tokony ho izy ny fisintonana sy fandatsahana rakitra avy amin'ny solosaina eo an-toerana.
- Tsy maintsy arahina ao amin'ny CodeSandbox ny firafitry ny lahatahiry iray.
- Ny fiasan'ny boaty fasika manokana dia azon'ny mpanjifa ihany.
StackBlitz
StackBlitz dia Visual Studio Code an-tserasera IDE ho an'ny fampiharana tranonkala. Ny sehatra dia mandray andraikitra sy azo ampifanarahana amin'ny dikan-desktop. StackBlitz dia IDE an-tserasera izay tonga mialoha Angular sy React fitaovana fampandrosoana.
Thinkster.io dia nanangana io tetikasa mahafinaritra io mba hahatonga azy ho tsotra araka izay azo atao hanombohana amin'ny tetikasa Angular na React anao nefa tsy mila manahy momba ny fametrahana fiankinan-doha na fananganana toe-javatra. StackBlitz dia manome endri-javatra mahagaga sy tsy manam-paharoa izay tsy misy mpanonta kaody an-tserasera hafa amin'izao fotoana izao. Vokatr'izany dia ilaina ny manadihady an'i StackBlitz bebe kokoa ary mahita izay atolotr'ity IDE an-tserasera ity.
Stackblitz dia tena azo ampitahaina amin'ny IDE feno, indrindra raha tsy afaka manao veloma amin'ny code VS ianao satria mifototra amin'izany ilay fitaovana. Ny fonosana dia manana endri-javatra isan-karazany izay ahafahanao manomboka sy manohy mamorona fampiharana feno stack.
Ny programa dia ampiasain'ny Visual Studio, izay fantatry ny mpamorona. Ny fanitsiana an-tserasera no singa miavaka amin'ny tetikasa. Mba hanaovana izany, ny ekipan'ny Stackblitz dia namorona mpizara tranonkala ao anaty navigateur. Rehefa manoratra ianao dia mametraka ho azy ny fiankinan-doha, manangona, mametaka ary manao famerenana mafana.
Premium Version
Ny Cadet, Astronaut ary Commander dia azo alaina maimaim-poana, $ 8 / volana ary $ 29 / volana. Ny Astronaut sy Commander dia misy endri-javatra maromaro toy ny tetikasa manokana tsy misy fetra, fampidinana rakitra tsy misy fetra, fanasana amin'ny fantsona slack ekipa fototra, sy ny sisa. Raha mila fanazavana fanampiny dia jereo ny birao faktiora ofisialy.
Key Features
- Manampy fonosana NPM amin'ny tetikasanao.
- Noho ny mpizara dev ao amin'ny navigateur, azonao atao ny manitsy rehefa ivelan'ny aterineto.
- URL fampiantranoana izay ahafahantsika miditra (sy mizara) ny fampiharana mivantana amin'ny fotoana rehetra.
- Ny endri-javatra hafa malaza amin'ny Visual Studio Code dia ahitana Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, sy ny hafa.
tombony
- Ny fahafahan'ny Firebase amin'ny fametrahana.
- Ny editor dia tena mora ampiasaina ary tena haingana.
- Afaka miditra amin'ny package.json, index.html, ary index.js ny mpampiasa.
- Kaody loharano azo zaraina izay azo ampidirina ihany koa.
- Preview mivantana amin'ny ampahany lehibe amin'ny pejy, miaraka amin'ny safidy misokatra amin'ny pejy hafa raha ilaina.
- Raha tsy an-tserasera, Fanovana
- Famitana marani-tsaina sy Intellisense nohatsaraina.
- Ny fototry ny Stackblitz dia loharano misokatra.
fatiantoka
- Tsy manana fiantraikany amin'ny tranobe na ny mpizara mpamorona ianao satria ny baiko create-react-app no mitantana azy ireo.
- Ao amin'ny React, tokony hojerena ny firafitry ny lahatahiry fototra.
- Tsy azo atao ny manamboatra kaody ho azy, na dia azo atao aza ny manao izany amin'ny tanana.
Famaranana
Amin'izao fotoana izao, ny kianja filalaovana kaody tahaka ireo efa hitantsika etsy ambony dia azo ampiasaina hanamboarana tanteraka ny tetikasa tranonkala rehetra. Tsy ilaina ny mametraka IDE manahirana amin'ny PC-nao rehefa afaka manangana, manao debug, manandrana ary mametraka mivantana avy amin'ny navigateur web ianao.
Raha ny hevitro dia ny StackBlitz no tsara indrindra amin'izy ireo satria IDE miorina amin'ny tranonkala mamela JavaScript, Angular, ary tetik'asa fampandrosoana hafa ivelan'ny boaty, tsy mila mametraka tontolo fampandrosoana eo an-toerana toa ny Node.js, npm, na angular. Izy io dia manome traikefa mitovy amin'ny fampiasana Visual Studio Code eo an-toerana. Raha ny tena izy, satria ny StackBlitz dia tarihin'ny Visual Studio Code, dia mahatsapa haingana sy azo ampiharina toy ny dikan-desktop.
Iza amin'ireo CodePen, CodeSandbox, ary StackBlitz no fitaovana alehanao? Ampahafantaro anay amin'ny fanehoan-kevitra.
Abbatyya
Misaotra an'ity lahatsoratra mahafinaritra ity, raha vao nahita ny stackblitz.com aho dia fantatro fa ity no tiako.