Wurkje oan in kompleks projekt, of jo no in betûfte programmeur binne as in freshman, sille jo praktysk wierskynlik problemen tsjinkomme. As jo jo projekt splitst yn in protte modules, ûntsteane problemen, wêrtroch it dreger is om flaters op te spoaren en oplossingen te finen. Yn oare omstannichheden kin it debuggen fan yndividuele gefallen lestich wêze om't jo de juste oplossing net hawwe ûntdutsen foar it probleem wêr't jo oan wurke hawwe.
It komt by gelegenheid ek foar as in stik koade, dy't op 'e tiid kompleks útsjen kin. JavaScript is ien fan 'e web-basearre talen dy't ekstreem ienfâldich is om te learen. Starte gewoan jo buroblêdblêder en navigearje nei Untwikkelingsark (meastentiids F12), en jo binne klear! Jo kinne dan eksperimintearje mei JS sûnder yngewikkelde software te ynstallearjen of út te fieren.
Om te begjinnen, is alles wat jo nedich binne in browser. It is prachtich om al dizze ienfâld direkt út 'e doaze te hawwen, mar d'r binne gelegenheden as jo mear nedich binne. Stel bygelyks dat jo wolle eksperimintearje mei in nije Web API dy't jo koartlyn ûntdutsen hawwe, mar net in nij projekt wolle begjinne.
Yn dizze post sille wy de trije populêrste JS-boartersplakken, CodePen, CodeSandbox, en StackBlitz fergelykje en kontrastearje. Litte wy begjinne!
CodePen
Frontend-ark foar webûntwikkeling binne altyd yn ûntwikkeling, en tekstbewurkers binne in grut ûnderdiel fan 'e lêste technologyen dy't it libben fan in ûntwikkelder ienfâldiger meitsje. Utsein selsstannige tekstbewurkers lykas Atom of Notepad ++, is d'r de lêste jierren in eksploazje west fan browser-basearre bewurkers dy't gjin programma-ynstallaasje nedich binne en gruttere gearwurking befoarderje.
CodePen is in "online mienskip foar it testen en presintearjen fan troch brûkers makke HTML-, CSS- en JavaScript-koadefragmenten" dy't fantastyske kânsen biedt om te learen hoe't jo frontend-websiden better kinne skriuwe.
CodePen jout jo twa "modi." De earste en meast brûkte is de Pen. It is sa ienfâldich as op in knop klikke en direkt nei de bewurker wurde ferfierd. Fan dêrút kinne jo tagong krije ta in foarbyldpaniel en ek basis HTML-, CSS- en JS-bewurkingsfinsters.
D'r is gjin "bestânsysteem", "IntelliSense," of wat oars - gewoan ienfâldige syntaksismarkearring en rappe kommando's lykas prettify. Yn it ljepblêd opsjes kinne jo selektearje út in beheind oanbod fan preprocessors foar alle trije talen (lykas TypeScript foar JS) of ferbinings tafoegje oan eksterne boarnen.
As jo allinich wat fergees nedich binne, sil ien fan 'e redakteuren genôch wêze. Ik soe CodePen foarstelle foar alles dat net in protte opset of biblioteken fereasket - gewoan HTML, CSS, en JS mei opsjonele pre-processors boppe. As jo de boarterstún brûke wolle om jo oanwêzigens op sosjale media te ferbetterjen of in persoanlike portfolio te ûntwikkeljen, is CodePen in bettere opsje.
Premium Version
Jo hawwe in pear mear alternativen om út te selektearjen op CodePen. As jo jierliks betelje, kinne jo ien fan trije premiumplannen krije foar $ 12, $ 19, of $ 39 elke moanne. Jo kinne in ûneinich oantal privee pennen, berjochten en kolleksjes oanmeitsje op ien fan 'e trije lagen.
Jo krije ek de Pro-badge (in sosjale ympuls), tagong ta live gearwurkingsmodus, gjin reklame, en mear. D'r binne ek bepaalde teamspesifike strategyen en oare ûnderskiedingen fan cross-tier. Besjoch har offisjele billing board foar mear ynformaasje.
Key Features
Neist it meitsjen fan HTML, CSS en JavaScript yn CodePen, binne d'r in pear mear dingen dy't it apart meitsje.
- Real-time besjen fan jo koade is mooglik. It hat gjin kompilaasje nedich.
- Eksperimintearjen lit jo nije dingen leare.
- Meitsje lytse testgefallen om problemen te sykjen en oan te pakken.
- Lit jo prachtige wurken sjen.
- Meitsje en bewarje pennen foar letter gebrûk.
- Besykje de koade fan oare ûntwikkelders en sjoch it yn aksje.
foardielen
- Om te begjinnen binne d'r gjin kosten.
- Ynboude learmiddels.
- Gearwurkje mei oaren en fergelykje projekten om te sjen wêr't se yn 'e takomst hinne kinne.
- De UI is ienfâldich te brûken en rjochtlinich.
neidielen
- De koadebibleteek is lyts, auto-koade foltôging is net genôch. It is gewoan goed foar projekten fan ien side en kin neat grutters oan.
- Op CodePen kinne jo privee pennen oanmeitsje, mar jo moatte opwurdearje nei in Pro-lidmaatskip ($ 9 / moanne).
koade sânbak
CodeSandbox is in web-basearre koade bewurker. It automatisearret transpiraasje, ferpakking en ôfhinklikensbehear foar jo, wêrtroch jo in nij projekt kinne bouwe mei ien klik. Neidat jo wat fassinearjend hawwe makke, kinne jo it diele mei oaren troch gewoan de webside te dielen.
De bewurker is kompatibel mei alle JavaScript-projekten, hoewol it bepaalde React-spesifike funksjes omfettet, lykas de opsje om it projekt op te slaan yn in create-react-app-sjabloan.
Elk projekt dat jo bouwe yn CodeSandbox begjint mei in sjabloan. It kin of relatearje oan in spesifike bibleteek, ramt of runtime (ynklusyf Node.js) of gewoan standert webtechnologyen brûke. Nei it selektearjen fan in sjabloan, wurde jo nei de bewurker stjoerd, wêr't jo alle nedige bestannen sille fine en it foarbyldfinster al iepen is.
Jo hawwe tagong ta in "bestânsysteem" yn alle Sandboxes, wat betsjut dat jo nije bestannen kinne oanmeitsje, modules brûke (ynklusyf NPM-pakketten), en ynteraksje mei statyske aktiva. D'r is ek de mooglikheid om de sjabloan-spesifike konfiguraasjebestannen te feroarjen.
Jo kinne sels jo eigen sjabloanen konstruearje foar jo unike gebrûk-gefal, kompleet mei bestânstruktuer en ôfhinklikens, lykas yn in IDE. Om't it ark keppele is oan Github, kinne jo fluch commits generearje en PR's iepenje. Jo kinne jo applikaasje direkt ynsette nei ZEIT of Netlify.
CodeSandbox Team Pro
CodeSandbox, in Nederlânsk bedriuw dat ûntwikkelders mooglik makket om in browser-basearre webappûntwikkelingssandbox te bouwen, hat offisjeel in gearwurkingsplatfoarm frijlitten wêrmei teams kinne wurkje oan koade yn 'e wolk. It nije produkt, Team Pro, is in oplossing sûnder koade boud foar folsleine produktteams, fariearjend fan ûntwerpers en managers oant teams foar kwaliteitsfersekering (QA) en fierder.
Projekten wurde levere yn in brûkerfreonlike ynterface foar elkenien dy't wizigingen oan in webapplikaasje wolle meitsje of akseptearje, it foarkommen fan alternative metoaden lykas it ferstjoeren fan notysjes en oanbefellings oan ûntwikkelders om de wizigingen út te fieren, se werom te jaan foar diskusje, en it proses werhelje.
Key Features
- In web-basearre koade bewurker en prototype ark.
- Foar lokaal gebrûk kin in sânbak maklik yn in zip-bestân downloade wurde.
- Programming wurdt dien yn sânbakken, dy't maklik mei kollega's kinne wurde dield.
foardielen
- In ferbettere brûkersûnderfining en gruttere kontrôle oer de bewurker.
- De live foarbyldfunksje kin wizige en besjoen wurde yn in apart finster.
- De koade wurdt automatysk opmakke en omfettet in CLI (codesandbox-cli)
- Stipe foar avansearre npm-modules.
- Moaie flaterberjochten mei oanbefellings.
- It ferbettert de debuggen-ûnderfining troch in bettere terminal, testwerjefte en útjeftewerjefte te leverjen.
neidielen
- De ein konsumint wurdt bleatsteld oan in protte personalizations.
- Sleep en drop fan bestannen fan in lokale kompjûter wurket net goed.
- In bepaalde mapstruktuer moat wurde folge yn CodeSandbox.
- De funksjonaliteit fan in privee sânbak is allinich beskikber foar begeunstigers.
StackBlitz
StackBlitz is in Visual Studio Code-oandreaune online IDE foar webapplikaasjes. It platfoarm is sa responsyf en oanpasber as de buroblêdferzje. StackBlitz is in online IDE dy't foarôf laden komt mei Angular en React ûntwikkeling ark.
Thinkster.io boude dat fantastyske projekt om it sa ienfâldich mooglik te meitsjen om te begjinnen mei jo Angular- as React-projekt sûnder soargen te hoegjen oer ôfhinklikensynstallaasje of bouynstellingen. StackBlitz leveret in protte geweldige en unike funksjes dy't gjin oare online koade-bewurker no hat. As resultaat is it de muoite wurdich om StackBlitz fierder te ûndersykjen en te ûntdekken wat dizze online IDE te bieden hat.
Stackblitz is ekstreem te fergelykjen mei de folsleine IDE, foaral as jo net kinne ôfskied nimme fan VS-koade, om't it ark dêrop basearre is. It pakket hat in ferskaat oan funksjes wêrmei jo kinne begjinne en trochgean mei it meitsjen fan in folsleine-stap-applikaasje.
It programma wurdt oandreaun troch Visual Studio, dat is bekend ûnder ûntwikkelders. Offline bewurkjen is de opfallende funksje fan it projekt. Om dit mooglik te meitsjen makke it Stackblitz-team in webserver yn 'e browser. Wylst jo typen, ynstalleart it automatysk ôfhinklikens, kompilearret, bondelt, en docht heul opnij laden.
Premium Version
Cadet, Astronaut en Commander binne respektivelik fergees te krijen, $ 8 / moanne en $ 29 / moanne. Astronaut en Kommandant omfettet in oantal funksjes lykas ûnbeheinde partikuliere projekten, ûnbeheinde upload fan bestannen, útnoegje nei slachkanaal fan kearnteam, ensfh. Foar mear ynformaasje, sjoch it offisjele billing board.
Key Features
- NPM-pakketten tafoegje oan jo projekt.
- Mei tank oan in nije yn-browser dev-tsjinner, kinne jo bewurkje wylst offline.
- In hosted app-URL wêrmei ús op elk momint tagong kinne (en diele) fan ús live app.
- Oare opmerklike funksjes fan Visual Studio Code omfetsje Intellisense, Project Search (Cmd/Ctrl+P), Gean nei definysje, en oaren.
foardielen
- Firebase's mooglikheden foar ynset.
- De bewurker is echt maklik te brûken en ekstreem fluch.
- Brûkers hawwe tagong ta package.json, index.html, en index.js.
- Dielbere boarnekoade dy't ek kin wurde ynbêde.
- Live foarbyld op in grut diel fan 'e side, mei de opsje om as nedich op in oare side te iepenjen.
- Wylst offline, bewurkje
- Tûke oanfollingen en ferbettere Intellisense.
- De kearn fan Stackblitz is iepen Boarne.
neidielen
- Jo hawwe gjin ynfloed op it gebou of de ûntwikkelderstsjinner, om't dy wurde beheard troch it kommando create-react-app.
- Yn React moat in fûnemintele mapstruktuer wurde waarnommen.
- It is net mooglik om koade automatysk te formatteren, hoewol it mooglik is om it mei de hân te dwaan.
Konklúzje
Tsjintwurdich kin in kodearjende boarterstún lykas de hjirboppe sjoen wurde brûkt om elk webprojekt folslein te bouwen. D'r is gjin ferlet om omslachtige IDE's op jo PC te ynstallearjen as jo direkt fan jo webblêder kinne bouwe, debuggen, testen en ynsette.
Yn myn miening soe StackBlitz it bêste ûnder har wêze, om't it in web-basearre IDE is dy't JavaScript, Angular, en oare ûntwikkelingsprojekten direkt út 'e doaze mooglik makket, sûnder de needsaak om lokale ûntwikkelingsomjouwingen te ynstallearjen lykas Node.js, npm, of Angular. It leveret deselde ûnderfining as it lokaal gebrûk fan Visual Studio Code. Yn 'e realiteit, om't StackBlitz wurdt dreaun troch Visual Studio Code, fielt it sa rap en alsidich as de buroblêdferzje.
Hokker fan CodePen, CodeSandbox en StackBlitz is jo go-to-ark? Lit it ús witte yn 'e kommentaren.
Abbatyya
Tankewol foar dit geweldige artikel, as ik ienris stackblitz.com seach, wit ik dat dit is wat ik wol.