As jy aan 'n komplekse projek werk, of jy nou 'n ervare programmeerder of 'n eerstejaars is, sal jy feitlik waarskynlik probleme ondervind. Wanneer jy jou projek in baie modules verdeel, ontstaan probleme, wat dit moeiliker maak om foute op te spoor en oplossings te vind. In ander omstandighede kan dit moeilik wees om individuele gevalle te ontfout omdat jy nie die regte oplossing vir die probleem waaraan jy gewerk het, ontdek het nie.
Dit kom ook by geleentheid as 'n stukkie kode voor, wat op daardie tydstip kompleks kan lyk. JavaScript is een van die webgebaseerde tale wat uiters maklik is om te leer. Begin eenvoudig jou lessenaarblaaier en navigeer na Ontwikkelaarnutsgoed (gewoonlik F12), en jy is klaar! Jy kan dan eksperimenteer met JS sonder om enige ingewikkelde sagteware te installeer of uit te voer.
Om te begin, is al wat jy nodig het 'n blaaier. Dit is wonderlik om al hierdie eenvoud reg uit die boks te hê, maar daar is geleenthede wanneer jy meer nodig het. Gestel byvoorbeeld jy wil eksperimenteer met 'n nuwe Web API wat jy onlangs ontdek het, maar nie 'n nuwe projek wil begin nie.
In hierdie pos sal ons die drie gewildste JS-speelgronde, CodePen, CodeSandbox en StackBlitz, vergelyk en kontrasteer. Laat ons begin!
CodePen
Frontend-webontwikkelingsnutsmiddels ontwikkel altyd, en teksredigeerders is 'n groot komponent van die nuutste tegnologieë wat 'n ontwikkelaar se lewe makliker maak. Afgesien van selfstandige teksredigeerders soos Atom of Notepad ++, was daar die afgelope paar jaar 'n ontploffing van blaaiergebaseerde redigeerders wat nie programinstallasie vereis nie en groter samewerking bevorder.
CodePen is 'n "aanlyn gemeenskap vir die toets en aanbieding van gebruikergeskepte HTML-, CSS- en JavaScript-kodebrokkies" wat fantastiese geleenthede bied om te leer hoe om frontend-webbladsye beter te skryf.
CodePen gee jou twee "modusse." Die eerste en mees algemene gebruik is die Pen. Dit is so eenvoudig soos om op 'n knoppie te klik en direk na die redigeerder vervoer te word. Van daar af het u toegang tot 'n voorskoupaneel sowel as basiese HTML-, CSS- en JS-redigeringsvensters.
Daar is geen “lêerstelsel”, “IntelliSense” of enigiets anders nie – net eenvoudige sintaksis-uitlig en vinnige opdragte soos mooimaak. In die opsie-oortjie kan jy kies uit 'n beperkte reeks voorverwerkers vir al drie tale (soos TypeScript vir JS) of verbindings by eksterne bronne voeg.
As jy net iets gratis wil doen, sal enige van die redakteurs voldoende wees. Ek sal CodePen voorstel vir enigiets wat nie baie opstelling of biblioteke vereis nie – eenvoudig HTML, CSS en JS met opsionele voorverwerkers bo-op. As jy die speelgrond wil gebruik om jou sosiale media-teenwoordigheid te verbeter of 'n persoonlike portefeulje te ontwikkel, is CodePen 'n beter opsie.
Premium weergawe
Jy het nog 'n paar alternatiewe om van te kies op CodePen. As jy jaarliks betaal, kan jy een van drie premieplanne kry vir $12, $19 of $39 elke maand. Jy kan 'n oneindige aantal private penne, plasings en versamelings op enige van die drie vlakke skep.
Jy sal ook die Pro-kenteken ('n sosiale hupstoot), toegang tot regstreekse samewerkingsmodus, geen advertensies, en meer ontvang nie. Daar is ook sekere spanspesifieke strategieë en ander onderskeidings tussen groepe. Kyk na hul amptelike rekeningbord vir verdere inligting.
Belangrikste kenmerke
Afgesien van die skep van HTML, CSS en JavaScript in CodePen, is daar nog 'n paar dinge wat dit onderskei.
- Intydse besigtiging van jou kode is moontlik. Dit vereis nie samestelling nie.
- Eksperimentering laat jou toe om nuwe dinge te leer.
- Skep klein toetsgevalle om na probleme te soek en aan te spreek.
- Vertoon jou wonderlike werke.
- Skep en stoor penne vir latere gebruik.
- Probeer ander ontwikkelaars se kode en sien dit in aksie.
voordele
- Om mee te begin, is daar geen koste nie.
- Ingeboude leerhulpbronne.
- Werk saam met ander en vergelyk projekte om te sien waarheen hulle in die toekoms kan gaan.
- Die UI is eenvoudig om te gebruik en eenvoudig.
Disadvantages
- Die kode biblioteek is klein, outo-kode voltooiing is onvoldoende. Dit is net goed vir projekte van een bladsy en kan niks groter hanteer nie.
- Op CodePen kan jy private penne skep, maar jy sal moet opgradeer na 'n Pro-lidmaatskap ($ 9/maand).
KodeSandbox
CodeSandbox is 'n webgebaseerde koderedigeerder. Dit outomatiseer transpirasie-, verpakkings- en afhanklikheidsbestuur vir jou, sodat jy 'n nuwe projek met 'n enkele klik kan bou. Nadat jy iets fassinerend geskep het, kan jy dit met ander deel deur bloot die webwerf te deel.
Die redigeerder is versoenbaar met enige JavaScript-projekte, hoewel dit sekere React-spesifieke kenmerke insluit, soos die opsie om die projek in 'n skep-reageer-app-sjabloon te stoor.
Enige projek wat jy in CodeSandbox bou, begin met 'n sjabloon. Dit kan óf verband hou met 'n spesifieke biblioteek, raamwerk of looptyd (insluitend Node.js) óf bloot standaard webtegnologie gebruik. Nadat u 'n sjabloon gekies het, word u na die redigeerder gestuur, waar u al die nodige lêers sal vind en die voorskouvenster wat reeds oop is.
Jy het toegang tot 'n "lêerstelsel" in alle Sandboxes, wat beteken dat jy nuwe lêers kan skep, modules (insluitend NPM-pakkette) kan gebruik en met statiese bates kan kommunikeer. Daar is ook die geleentheid om die sjabloonspesifieke konfigurasielêers te wysig.
Jy kan selfs jou eie sjablone vir jou unieke gebruik-geval bou, kompleet met lêerstruktuur en afhanklikhede, baie soos in 'n IDE. Omdat die instrument aan Github gekoppel is, kan u vinnig commits genereer en PR's oopmaak. U kan u toepassing dadelik na ZEIT of Netlify ontplooi.
CodeSandbox Team Pro
CodeSandbox, 'n Nederlandse onderneming wat ontwikkelaars toelaat om 'n blaaier-gebaseerde webtoepassing-ontwikkelingsandbox te bou, het amptelik 'n samewerkingsplatform vrygestel wat spanne in staat stel om aan kode in die wolk te werk. Die nuwe produk, Team Pro, is 'n geen-kode-oplossing wat gebou is vir volledige produkspanne, wat wissel van ontwerpers en bestuurders tot kwaliteitsversekering (QA)-spanne en verder.
Projekte word verskaf in 'n gebruikersvriendelike koppelvlak vir enigiemand wat veranderinge aan 'n webtoepassing wil maak of aanvaar, en vermy alternatiewe metodes soos om notas en aanbevelings aan ontwikkelaars te stuur om die veranderinge uit te voer, dit terug te gee vir bespreking en die proses te herhaal.
Belangrikste kenmerke
- 'n Webgebaseerde koderedigeerder en prototipe-instrument.
- Vir plaaslike gebruik kan 'n sandbox maklik in 'n zip-lêer afgelaai word.
- Programmering word in sandkaste gedoen, wat maklik met kollegas gedeel kan word.
voordele
- 'n Verbeterde gebruikerservaring en groter beheer oor die redigeerder.
- Die regstreekse voorskou-funksie kan gewysig en in 'n aparte venster bekyk word.
- Die kode word outomaties geformateer en sluit 'n CLI (codesandbox-cli) in
- Ondersteuning vir gevorderde npm-modules.
- Lekker foutboodskappe met aanbevelings.
- Dit verbeter die ontfoutingservaring deur 'n beter terminaal, toetskyker en kwessiekyker te verskaf.
Disadvantages
- Die eindverbruiker word aan baie verpersoonlikings blootgestel.
- Sleep en los lêers vanaf 'n plaaslike rekenaar werk nie behoorlik nie.
- 'n Sekere vouerstruktuur moet in CodeSandbox gevolg word.
- Die funksionaliteit van 'n privaat sandbox is slegs beskikbaar vir kliënte.
StackBlitz
StackBlitz is 'n Visual Studio Kode-aangedrewe aanlyn IDE vir webtoepassings. Die platform is so responsief en aanpasbaar soos die rekenaarweergawe. StackBlitz is 'n aanlyn IDE wat vooraf gelaai is Hoek en reageer ontwikkelingsinstrumente.
Thinkster.io het daardie fantastiese projek gebou om dit so eenvoudig moontlik te maak om met jou Angular- of React-projek te begin sonder om bekommerd te wees oor afhanklikheidsinstallasie of bouinstellings. StackBlitz bied baie ongelooflike en unieke kenmerke wat geen ander aanlyn kode-redigeerder tans het nie. Gevolglik is dit die moeite werd om StackBlitz verder te ondersoek en te ontdek wat hierdie aanlyn IDE te bied het.
Stackblitz is uiters vergelykbaar met die volledige IDE, veral as jy nie totsiens kan sê vir VS-kode nie omdat die instrument daarop gebaseer is. Die pakket het 'n verskeidenheid kenmerke wat jou toelaat om te begin en voort te gaan met die skep van 'n volstapeling-toepassing.
Die program word aangedryf deur Visual Studio, wat welbekend is onder ontwikkelaars. Vanlyn redigering is die projek se uitstaande kenmerk. Om dit moontlik te maak, het die Stackblitz-span 'n in-blaaier-webbediener geskep. Soos jy tik, installeer dit outomaties afhanklikhede, stel dit saam, bundel en doen warm herlaai.
Premium weergawe
Kadet, Ruimtevaarder en Bevelvoerder is onderskeidelik gratis beskikbaar, $8/maand en $29/maand. Ruimtevaarder en bevelvoerder bevat 'n aantal kenmerke soos onbeperkte private projekte, onbeperkte lêeroplaaie, nooi na kernspan se slap kanaal, ensovoorts. Vir verdere inligting, sien die amptelike rekeningbord.
Belangrikste kenmerke
- Voeg NPM-pakkette by jou projek.
- Danksy 'n nuwe in-blaaier-ontwikkelaarbediener, kan jy wysig terwyl jy vanlyn is.
- 'n App-URL wat aangebied word wat ons toelaat om enige tyd toegang tot ons regstreekse toepassing te verkry (en te deel).
- Ander noemenswaardige Visual Studio Code-kenmerke sluit in Intellisense, Project Search (Cmd/Ctrl+P), Gaan na Definisie, en ander.
voordele
- Firebase se vermoëns vir ontplooiing.
- Die redigeerder is baie maklik om te gebruik en uiters vinnig.
- Gebruikers het toegang tot package.json, index.html en index.js.
- Deelbare bronkode wat ook ingebed kan word.
- Regstreekse voorskou op 'n groot gedeelte van die bladsy, met die opsie om op 'n ander bladsy oop te maak indien nodig.
- Terwyl vanlyn, redigering
- Slim voltooiings en verbeterde Intellisense.
- Die kern van Stackblitz is open source.
Disadvantages
- Jy het nie invloed oor die gebou of die ontwikkelaarbediener nie, want dit word bestuur deur die create-react-app-opdrag.
- In React moet 'n fundamentele gidsstruktuur waargeneem word.
- Dit is nie moontlik om kode outomaties te formateer nie, alhoewel dit moontlik is om dit met die hand te doen.
Gevolgtrekking
Deesdae kan 'n koderingsspeelgrond soos dié wat ons hierbo gesien het, gebruik word om enige webprojek volledig te bou. Dit is nie nodig om omslagtige IDE's op jou rekenaar te installeer wanneer jy direk vanaf jou webblaaier kan bou, ontfout, toets en ontplooi nie.
Na my mening sal StackBlitz die beste onder hulle wees, want dit is 'n webgebaseerde IDE wat JavaScript, Angular en ander ontwikkelingsprojekte reg uit die boks toelaat, sonder om enige plaaslike ontwikkelingsomgewings soos Node.js, npm, te installeer, of Hoekig. Dit bied dieselfde ervaring as om Visual Studio Code plaaslik te gebruik. In werklikheid, omdat StackBlitz deur Visual Studio Code aangedryf word, voel dit so vinnig en veelsydig soos die rekenaarweergawe.
Watter van CodePen, CodeSandbox en StackBlitz is jou aanbevole hulpmiddel? Laat weet ons in die kommentaar.
Abbatyya
Dankie vir hierdie wonderlike artikel, sodra ek stackblitz.com gesien het, weet ek dit is wat ek wil hê.