Wann Dir un engem komplexe Projet schafft, egal ob Dir en erfuerene Programméierer sidd oder en Freshman sidd, wäert Dir quasi wahrscheinlech iwwer Probleemer lafen. Wann Dir Äre Projet a ville Moduler opgedeelt hutt, entstinn Probleemer, wat et méi schwéier mécht Feeler ze verfolgen a Léisungen ze fannen. An aneren Ëmstänn kann d'Debugging vun eenzelne Fäll schwéier sinn, well Dir net déi richteg Léisung fir de Problem entdeckt hutt, un deem Dir geschafft hutt.
Et geschitt och heiansdo als e Stéck Code, wat zu där Zäit komplex ausgesäit. JavaScript ass eng vun de Web-baséiert Sproochen déi extrem einfach ze léieren ass. Start einfach Ären Desktop Browser a navigéiert op Entwéckler Tools (normalerweis F12), an Dir sidd fäerdeg! Dir kënnt dann experimentéieren mat JS ouni komplizéiert Software ze installéieren oder auszeféieren.
Fir unzefänken, alles wat Dir braucht ass e Browser. Et ass wonnerbar all dës Einfachheet direkt aus der Këscht ze hunn, awer et ginn Occasiounen wann Dir méi braucht. Zum Beispill, ugeholl datt Dir mat enger neier Web API experimentéiere wëllt, déi Dir viru kuerzem entdeckt hutt, awer net wëllt en neie Projet starten.
An dësem Post wäerte mir déi dräi populärste JS Spillplazen, CodePen, CodeSandbox, a StackBlitz vergläichen a kontrastéieren. Loosst eis ufänken!
CodePen
Frontend Webentwécklungsinstrumenter evoluéieren ëmmer, an Texteditoren sinn e grousse Bestanddeel vun de leschten Technologien déi d'Liewen vun engem Entwéckler méi einfach maachen. Ausser Stand-alone Text Editoren wéi Atom oder Notepad ++, gouf et an de leschte Joeren eng Explosioun vu Browser-baséiert Redaktoren déi keng Programminstallatioun erfuerderen a méi Zesummenaarbecht förderen.
CodePen ass eng "Online Gemeinschaft fir ze testen an ze presentéieren duerch Benotzer erstallt HTML, CSS, a JavaScript Code Snippets" déi fantastesch Méiglechkeeten ubitt fir ze léieren wéi Dir Frontend Websäite besser schreift.
CodePen gëtt Iech zwee "Modi". Déi éischt an am meeschte benotzt ass de Pen. Et ass sou einfach wéi e Knäppche klicken an direkt an den Editor transportéiert ginn. Vun do aus kënnt Dir Zougang zu engem Virschau Panel souwéi Basis HTML, CSS, a JS Editing Fënsteren.
Et gëtt kee "Dateisystem", "IntelliSense" oder soss eppes - just einfach Syntax Highlight a séier Kommandoen wéi prettify. An der Optiounstab kënnt Dir aus enger limitéierter Palette vu Virveraarbechter fir all dräi Sproochen (wéi TypeScript fir JS) wielen oder Verbindunge mat externe Quellen addéieren.
Wann Dir nëmmen eppes gratis gemaach braucht, da geet entweder vun den Redaktoren duer. Ech géif CodePen proposéieren fir alles wat net vill Setup oder Bibliothéiken erfuerdert - einfach HTML, CSS a JS mat optionalen Pre-Prozessoren uewen. Wann Dir d'Spillplaz benotze wëllt fir Är Social Media Präsenz ze verbesseren oder e perséinleche Portfolio z'entwéckelen, CodePen ass eng besser Optioun.
Premium Versioun
Dir hutt e puer méi Alternativen fir op CodePen ze wielen. Wann Dir all Joer bezuelt, kënnt Dir ee vun dräi Premium Pläng fir $12, $19 oder $39 all Mount kréien. Dir kënnt eng onendlech Unzuel vu private Stëfter, Posts a Sammlungen op eng vun den dräi Stäck erstellen.
Dir kritt och de Pro Badge (e soziale Boost), Live Collab Modus Zougang, keng Reklammen, a méi. Et ginn och gewësse Teamspezifesch Strategien an aner Cross-Tier Ënnerscheeder. Kuckt hiren offiziellen Rechnungsbrett fir weider Informatioun.
Schlëssel ass näischt geschitt
Nieft der Erstellung vun HTML, CSS, a JavaScript am CodePen, ginn et e puer méi Saachen déi et auserneen setzen.
- Echtzäit Vue vun Ärem Code ass méiglech. Et erfuerdert keng Kompiléierung.
- Experimentéieren erlaabt Iech nei Saachen ze léieren.
- Erstellt kleng Testfäll fir no Probleemer ze sichen an unzegoen.
- Weist Är wonnerbar Wierker.
- Erstellt a späichert Stëfter fir spéider Notzung.
- Probéiert de Code vun aneren Entwéckler a kuckt et an Aktioun.
Virdeeler
- Fir unzefänken, gëtt et keng Käschten.
- Built-in Léierressourcen.
- Kollaboréiert mat aneren a vergläicht Projeten fir ze kucken wou se an Zukunft kënne goen.
- D'UI ass einfach ze benotzen an einfach.
Nodeeler
- D'Codebibliothéik ass kleng, d'Auto-Code Fäerdegstellung ass net genuch. Et ass just gutt fir eng Säit Projeten a kann näischt gréissers handhaben.
- Op CodePen kënnt Dir privat Stëfter erstellen, awer Dir musst op eng Pro Memberschaft upgraden ($ 9 / Mount).
Code Sandkëscht
CodeSandbox ass e Web-baséiert Code Editor. Et automatiséiert Transpiratioun, Verpackung an Ofhängegkeetsmanagement fir Iech, wat Iech erlaabt en neie Projet mat engem eenzegen Klick ze bauen. Nodeems Dir eppes faszinantes erstallt hutt, kënnt Dir et mat aneren deelen andeems Dir einfach d'Websäit deelt.
Den Editor ass kompatibel mat all JavaScript-Projeten, obwuel et verschidde React-spezifesch Feature enthält, sou wéi d'Optioun fir de Projet an enger Create-React-App Template ze späicheren.
All Projet deen Dir am CodeSandbox baut fänkt mat enger Schabloun un. Et kann entweder op eng spezifesch Bibliothéik, Kader oder Runtime (Node.js abegraff) bezéien oder einfach Standard Webtechnologien benotzen. Nodeems Dir eng Schabloun auswielt, gitt Dir an den Editor geschéckt, wou Dir all déi néideg Dateien fannt an d'Virschaufenster schonn op.
Dir hutt Zougang zu engem "Dateisystem" an all Sandboxen, dat heescht datt Dir nei Dateien erstellt, Moduler benotze kënnt (inklusive NPM Packagen), an interagéiere mat statesche Verméigen. Et gëtt och d'Méiglechkeet d'Schablounspezifesch Konfiguratiounsdateien z'änneren.
Dir kënnt souguer Är eege Template fir Ären eenzegaartege Benotzungsfall konstruéieren, komplett mat Dateistruktur an Ofhängegkeeten, sou wéi an enger IDE. Well de Tool mat Github verlinkt ass, kënnt Dir séier Verpflichtungen generéieren an PRs opmaachen. Dir kënnt Är Applikatioun direkt op ZEIT oder Netlify ofsetzen.
CodeSandbox Team Pro
CodeSandbox, en hollännescht Geschäft dat d'Entwéckler erlaabt eng Browser-baséiert Web App Entwécklung Sandbox ze bauen, huet offiziell eng Zesummenaarbecht Plattform verëffentlecht déi Teams erlaabt un Code an der Wollek ze schaffen. Den neie Produkt, Team Pro, ass eng No-Code Léisung gebaut fir komplett Produktteams, rangéiert vun Designer a Manager iwwer Qualitéitssécherung (QA) Teams an doriwwer eraus.
D'Projete ginn an engem userfrëndlechen Interface zur Verfügung gestallt fir jiddereen deen Ännerunge vun enger Webapplikatioun wëllt maachen oder akzeptéieren, alternativ Methoden vermeiden wéi Notizen a Empfehlungen un d'Entwéckler schécken fir d'Ännerungen auszeféieren, se zréck ze diskutéieren an de Prozess ze widderhuelen.
Schlëssel ass näischt geschitt
- E Web-baséiert Code Editor a Prototyp Tool.
- Fir lokal Benotzung kann eng Sandkëscht einfach an enger Zip-Datei erofgeluede ginn.
- Programméiersprooch gëtt a Sandkëschte gemaach, déi einfach mat Mataarbechter gedeelt kënne ginn.
Virdeeler
- Eng verbessert Benotzererfarung a méi Kontroll iwwer den Editor.
- D'Live Preview Feature kann geännert a gekuckt ginn an enger separater Fënster.
- De Code gëtt automatesch formatéiert an enthält e CLI (codesandbox-cli)
- Ënnerstëtzung fir fortgeschratt npm Moduler.
- Schéin Fehlermeldungen mat Empfehlungen.
- Et verbessert d'Debugging-Erfarung andeems Dir e besseren Terminal, Testbetrachter an Ausgabbetrachter ubitt.
Nodeeler
- Den Endverbraucher ass u vill Personaliséierungen ausgesat.
- Drag and drop vun Dateien vun engem lokalen Computer funktionnéiert net richteg.
- Eng gewëssen Ordnerstruktur muss an CodeSandbox gefollegt ginn.
- D'Funktionalitéit vun enger privater Sandkëscht ass nëmme fir Patréin verfügbar.
StackBlitz
StackBlitz ass e Visual Studio Code-powered online IDE fir Webapplikatiounen. D'Plattform ass sou reaktiounsfäeger an adaptéierbar wéi d'Desktop Versioun. StackBlitz ass eng Online IDE déi virgelueden ass Angular a reagéiert Entwécklung Tools.
Thinkster.io huet dee fantastesche Projet gebaut fir et sou einfach wéi méiglech ze maachen fir mat Ärem Angular oder React Projet unzefänken ouni Iech Suergen iwwer Ofhängegkeetsinstallatioun oder Astellungen ze bauen. StackBlitz bitt vill erstaunlech an eenzegaarteg Features déi keen aneren Online Code Editor elo huet. Als Resultat ass et derwäert StackBlitz weider z'ënnersichen an ze entdecken wat dës Online IDE ze bidden huet.
Stackblitz ass extrem vergläichbar mat der kompletter IDE, besonnesch wann Dir net dem VS Code Äddi kënnt, well d'Tool dorop baséiert. De Package huet eng Vielfalt vu Featuren, déi Iech erlaben unzefänken a weider eng Full-Stack Applikatioun ze kreéieren.
De Programm gëtt ugedriwwen vum Visual Studio, deen ënnert Entwéckler bekannt ass. Offline Redaktioun ass d'Standout Feature vum Projet. Fir dëst méiglech ze maachen, huet d'Stackblitz Team en In-Browser Webserver erstallt. Wéi Dir tippt, installéiert et automatesch Ofhängegkeeten, kompiléiert, bündelen, a mécht waarm Reloading.
Premium Versioun
Kadett, Astronaut a Kommandant sinn gratis verfügbar, respektiv $ 8 / Mount a $ 29 / Mount. Astronaut a Kommandant enthält eng Rei Features wéi onlimitéiert privat Projeten, onlimitéiert Dateiuploads, invitéieren op de Kär Team Slack Channel, asw. Fir weider Informatioun, kuckt den offiziellen Billing Board.
Schlëssel ass näischt geschitt
- Füügt NPM Packagen op Äre Projet.
- Dank engem neien In-Browser Dev Server, kënnt Dir offline änneren.
- Eng gehost App URL déi eis erlaabt Zougang zu (an deelen) eis Live App zu all Moment.
- Aner Notabele Visual Studio Code Feature enthalen Intellisense, Project Search (Cmd / Ctrl + P), Go to Definition, an anerer.
Virdeeler
- Firebase seng Fäegkeeten fir Deployment.
- Den Editor ass wierklech einfach ze benotzen an extrem séier.
- D'Benotzer hunn Zougang zu package.json, index.html, an index.js.
- Deelbar Quellcode deen och agebaut ka ginn.
- Live Virschau op enger grousser Sektioun vun der Säit, mat der Optioun fir op enger anerer Säit opzemaachen wann néideg.
- Wärend Offline, Änneren
- Smart Ofschloss a verbessert Intellisense.
- De Kär vum Stackblitz ass Open Source.
Nodeeler
- Dir hutt keen Afloss iwwer d'Gebai oder den Entwécklerserver, well déi gi vum create-react-app Kommando geréiert.
- Am React sollt eng fundamental Ordnerstruktur beobachtet ginn.
- Et ass net méiglech Code automatesch ze formatéieren, obwuel et méiglech ass et manuell ze maachen.
Konklusioun
Hautdesdaags kann eng codéierend Spillplaz wéi déi, déi mir uewe gesinn hunn, benotzt ginn fir all Webprojet komplett ze konstruéieren. Et ass kee Besoin fir ëmständlech IDEs op Ärem PC z'installéieren wann Dir direkt vun Ärem Webbrowser kënnt bauen, debuggen, testen an ofsetzen.
Menger Meenung no wier StackBlitz am Beschten ënnert hinnen well et eng webbaséiert IDE ass déi JavaScript, Angular an aner Entwécklungsprojeten direkt aus der Këscht erlaabt, ouni datt Dir lokal Entwécklungsëmfeld wéi Node.js, npm, installéiere musst, oder Angular. Et bitt déiselwecht Erfahrung wéi de Visual Studio Code lokal benotzt. A Wierklechkeet, well StackBlitz duerch Visual Studio Code gedriwwe gëtt, fillt et sech sou séier a versatile wéi d'Desktop Versioun.
Wéi ee vu CodePen, CodeSandbox, a StackBlitz ass Äre Go-to-Tool? Loosst eis an de Kommentaren wëssen.
Abbatyya
Merci fir dëse super Artikel, eemol ech stackblitz.com gesinn hunn, weess ech dat ass wat ech wëll.