Als u aan een complex project werkt, of u nu een ervaren programmeur bent of een eerstejaarsstudent, zult u vrijwel zeker problemen tegenkomen. Wanneer u uw project opsplitst in veel modules, ontstaan er problemen, waardoor het moeilijker wordt om fouten op te sporen en oplossingen te vinden. In andere omstandigheden kan het debuggen van individuele instanties moeilijk zijn omdat u niet de juiste oplossing hebt gevonden voor het probleem waaraan u hebt gewerkt.
Het komt af en toe ook voor als een stukje code, dat er op dat moment misschien ingewikkeld uitziet. JavaScript is een van de webgebaseerde talen die uiterst eenvoudig te leren is. Start gewoon uw desktopbrowser en navigeer naar Developer Tools (meestal F12), en u bent klaar! U kunt dan experimenteren met JS zonder dat u ingewikkelde software hoeft te installeren of uit te voeren.
Om te beginnen heb je alleen een browser nodig. Het is geweldig om al deze eenvoud direct uit de doos te hebben, maar er zijn gelegenheden dat je meer nodig hebt. Stel dat u wilt experimenteren met een nieuwe web-API die u onlangs hebt ontdekt, maar geen nieuw project wilt starten.
In dit bericht vergelijken en contrasteren we de drie populairste JS-speeltuinen, CodePen, CodeSandbox en StackBlitz. Laten we beginnen!
CodePen
Frontend-webontwikkelingstools zijn altijd in ontwikkeling en teksteditors zijn een belangrijk onderdeel van de nieuwste technologieën die het leven van een ontwikkelaar eenvoudiger maken. Afgezien van zelfstandige teksteditors zoals Atom of Notepad ++, is er de afgelopen jaren een explosie geweest van browsergebaseerde editors die geen programma-installatie vereisen en meer samenwerking bevorderen.
CodePen is een "online community voor het testen en presenteren van door gebruikers gemaakte HTML-, CSS- en JavaScript-codefragmenten" die fantastische mogelijkheden biedt om te leren hoe je frontend-webpagina's beter kunt schrijven.
CodePen biedt u twee 'modi'. De eerste en meest gebruikte is de Pen. Het is net zo eenvoudig als op een knop klikken en rechtstreeks naar de editor worden getransporteerd. Van daaruit hebt u toegang tot een voorbeeldvenster en eenvoudige HTML-, CSS- en JS-bewerkingsvensters.
Er is geen 'bestandssysteem', 'IntelliSense' of iets anders - alleen eenvoudige syntaxisaccentuering en snelle opdrachten zoals prettify. Op het tabblad Opties kunt u kiezen uit een beperkt aantal preprocessors voor alle drie de talen (zoals TypeScript voor JS) of verbindingen met externe bronnen toevoegen.
Als u alleen iets gratis wilt laten doen, is een van de editors voldoende. Ik zou CodePen aanraden voor alles waarvoor niet veel instellingen of bibliotheken nodig zijn - gewoon HTML, CSS en JS met optionele pre-processors er bovenop. Als u de speeltuin wilt gebruiken om uw aanwezigheid op sociale media te verbeteren of een persoonlijk portfolio te ontwikkelen, is CodePen een betere optie.
Premium versie
Je hebt nog een paar alternatieven om uit te kiezen op CodePen. Als u jaarlijks betaalt, kunt u elke maand een van de drie premiumplannen krijgen voor $ 12, $ 19 of $ 39. U kunt een oneindig aantal privépennen, berichten en collecties maken op elk van de drie niveaus.
Je ontvangt ook de Pro-badge (een sociale boost), toegang tot de live collab-modus, geen advertenties en meer. Er zijn ook bepaalde teamspecifieke strategieën en andere cross-tier onderscheidingen. Bekijk hun officiële reclamebord voor meer informatie.
Belangrijkste kenmerken
Afgezien van het maken van HTML, CSS en JavaScript in CodePen, zijn er nog een paar dingen die het onderscheiden.
- Realtime bekijken van uw code is mogelijk. Het vereist geen compilatie.
- Door te experimenteren leer je nieuwe dingen.
- Maak kleine testcases om problemen op te sporen en aan te pakken.
- Laat je prachtige werken zien.
- Maak en bewaar pennen voor later gebruik.
- Probeer de code van andere ontwikkelaars uit en zie deze in actie.
voordelen
- Om te beginnen zijn er geen kosten.
- Ingebouwde leermiddelen.
- Werk samen met anderen en vergelijk projecten om te zien waar ze in de toekomst naartoe kunnen.
- De gebruikersinterface is eenvoudig te gebruiken en duidelijk.
Nadelen
- De codebibliotheek is klein, het automatisch aanvullen van de code is onvoldoende. Het is gewoon goed voor projecten van één pagina en kan niets groters aan.
- Op CodePen kun je privépennen maken, maar je moet upgraden naar een Pro-lidmaatschap ($ 9/maand).
code sandbox
CodeSandbox is een webgebaseerde code-editor. Het automatiseert het transpireren, verpakken en afhankelijkheidsbeheer voor u, zodat u met één klik een nieuw project kunt bouwen. Nadat je iets fascinerends hebt gemaakt, kun je het met anderen delen door simpelweg de website te delen.
De editor is compatibel met alle JavaScript-projecten, hoewel het bepaalde React-specifieke functies bevat, zoals de optie om het project op te slaan in een create-react-app-sjabloon.
Elk project dat u in CodeSandbox bouwt, begint met een sjabloon. Het kan betrekking hebben op een specifieke bibliotheek, framework of runtime (inclusief Node.js) of gewoon standaard webtechnologieën gebruiken. Nadat u een sjabloon hebt geselecteerd, wordt u naar de editor gestuurd, waar u alle benodigde bestanden vindt en het voorbeeldvenster al is geopend.
U hebt toegang tot een "bestandssysteem" in alle Sandboxen, wat betekent dat u nieuwe bestanden kunt maken, modules (inclusief NPM-pakketten) kunt gebruiken en kunt communiceren met statische middelen. Er is ook de mogelijkheid om de sjabloonspecifieke configuratiebestanden te wijzigen.
U kunt zelfs uw eigen sjablonen maken voor uw unieke use-case, compleet met bestandsstructuur en afhankelijkheden, net zoals in een IDE. Doordat de tool gekoppeld is aan Github, kun je snel commits genereren en PR's openen. U kunt uw applicatie meteen implementeren in ZEIT of Netlify.
CodeSandbox Team Pro
CodeSandbox, een Nederlands bedrijf dat ontwikkelaars in staat stelt een browsergebaseerde sandbox voor webapp-ontwikkeling te bouwen, heeft officieel een samenwerkingsplatform uitgebracht waarmee teams in de cloud aan code kunnen werken. Het nieuwe product, Team Pro, is een codeloze oplossing die is gebouwd voor complete productteams, variërend van ontwerpers en managers tot teams voor kwaliteitsborging (QA) en daarbuiten.
Projecten worden aangeboden in een gebruiksvriendelijke interface voor iedereen die wijzigingen in een webtoepassing wil aanbrengen of accepteren, waarbij alternatieve methoden worden vermeden, zoals het verzenden van notities en aanbevelingen aan ontwikkelaars om de wijzigingen uit te voeren, ze terug te sturen voor discussie en het proces te herhalen.
Belangrijkste kenmerken
- Een webgebaseerde code-editor en prototypetool.
- Voor lokaal gebruik kan een sandbox eenvoudig in een zip-bestand worden gedownload.
- Programming wordt gedaan in sandboxes, die gemakkelijk kunnen worden gedeeld met collega's.
voordelen
- Een verbeterde gebruikerservaring en meer controle over de editor.
- De live preview-functie kan worden gewijzigd en in een apart venster worden bekeken.
- De code wordt automatisch opgemaakt en bevat een CLI (codesandbox-cli)
- Ondersteuning voor geavanceerde npm-modules.
- Leuke foutmeldingen met aanbevelingen.
- Het verbetert de foutopsporingservaring door een betere terminal, testviewer en probleemviewer te bieden.
Nadelen
- De eindconsument wordt blootgesteld aan veel personalisaties.
- Slepen en neerzetten van bestanden vanaf een lokale computer werkt niet goed.
- In CodeSandbox moet een bepaalde mappenstructuur worden gevolgd.
- De functionaliteit van een privé-sandbox is alleen beschikbaar voor patrons.
StapelBlitz
StackBlitz is een door Visual Studio Code aangedreven online IDE voor webapplicaties. Het platform is net zo responsief en aanpasbaar als de desktopversie. StackBlitz is een online IDE die vooraf is geladen met Hoekig en reageren Ontwikkelingshulpmiddelen.
Thinkster.io heeft dat fantastische project gebouwd om het zo eenvoudig mogelijk te maken om aan de slag te gaan met je Angular- of React-project zonder je zorgen te hoeven maken over afhankelijkheidsinstallatie of build-instellingen. StackBlitz biedt veel geweldige en unieke functies die momenteel geen enkele andere online code-editor heeft. Daarom is het de moeite waard om StackBlitz verder te onderzoeken en te ontdekken wat deze online IDE te bieden heeft.
Stackblitz is extreem vergelijkbaar met de volledige IDE, vooral als je geen afscheid kunt nemen van VS-code omdat de tool erop is gebaseerd. Het pakket heeft een verscheidenheid aan functies waarmee u kunt beginnen en doorgaan met het maken van een full-stack applicatie.
Het programma wordt mogelijk gemaakt door Visual Studio, dat bekend is bij ontwikkelaars. Offline bewerken is de opvallende eigenschap van het project. Om dit mogelijk te maken, heeft het Stackblitz-team een in-browser webserver gemaakt. Terwijl u typt, installeert het automatisch afhankelijkheden, compileert, bundelt en laadt het snel opnieuw.
Premium versie
Cadet, Astronaut en Commander zijn gratis beschikbaar, respectievelijk $ 8/maand en $ 29/maand. Astronaut en Commander bevatten een aantal functies, zoals onbeperkte privéprojecten, onbeperkte bestandsuploads, uitnodigingen voor het slappe kanaal van het kernteam, enzovoort. Zie het officiële billingboard voor meer informatie.
Belangrijkste kenmerken
- NPM-pakketten toevoegen aan uw project.
- Dankzij een nieuwe in-browser dev-server kun je offline bewerken.
- Een gehoste app-URL waarmee we onze live app op elk moment kunnen openen (en delen).
- Andere opvallende kenmerken van Visual Studio Code zijn Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition en andere.
voordelen
- De mogelijkheden van Firebase voor implementatie.
- De editor is heel gemakkelijk te gebruiken en extreem snel.
- Gebruikers hebben toegang tot package.json, index.html en index.js.
- Deelbare broncode die ook kan worden ingesloten.
- Live preview op een groot deel van de pagina, met de mogelijkheid om indien nodig op een andere pagina te openen.
- Terwijl u offline bent, bewerken
- Slimme aanvullingen en verbeterde Intellisense.
- De kern van Stackblitz is open source.
Nadelen
- U heeft geen invloed op het gebouw of de ontwikkelaarsserver omdat deze worden beheerd door de opdracht create-react-app.
- In React moet een fundamentele mappenstructuur in acht worden genomen.
- Het is niet mogelijk om code automatisch op te maken, hoewel het wel mogelijk is om dit handmatig te doen.
Conclusie
Tegenwoordig kan een programmeerspeeltuin zoals die we hierboven hebben gezien, worden gebruikt om elk webproject volledig te bouwen. U hoeft geen omslachtige IDE's op uw pc te installeren wanneer u rechtstreeks vanuit uw webbrowser kunt bouwen, debuggen, testen en implementeren.
Naar mijn mening zou StackBlitz de beste onder hen zijn, omdat het een webgebaseerde IDE is die JavaScript, Angular en andere ontwikkelingsprojecten direct uit de doos mogelijk maakt, zonder dat er lokale ontwikkelomgevingen zoals Node.js, npm, hoeven te worden geïnstalleerd. of hoekig. Het biedt dezelfde ervaring als het lokaal gebruiken van Visual Studio Code. Omdat StackBlitz wordt aangestuurd door Visual Studio Code, voelt het in werkelijkheid net zo snel en veelzijdig aan als de desktopversie.
Welke van CodePen, CodeSandbox en StackBlitz is uw favoriete tool? Laat het ons weten in de reacties.
Abbatja
Bedankt voor dit geweldige artikel, toen ik eenmaal stackblitz.com zag, weet ik dat dit is wat ik wil.