Når du arbejder på et komplekst projekt, uanset om du er en erfaren programmør eller nybegynder, vil du næsten sandsynligvis støde på problemer. Når du deler dit projekt op i mange moduler, opstår der problemer, som gør det sværere at spore fejl og finde løsninger. Under andre omstændigheder kan det være svært at fejlfinde individuelle tilfælde, fordi du ikke har fundet den rigtige løsning på det problem, du har arbejdet på.
Det forekommer også som et stykke kode af og til, som kan se komplekst ud på det tidspunkt. JavaScript er et af de webbaserede sprog, der er ekstremt nemt at lære. Du skal blot starte din desktopbrowser og navigere til udviklerværktøjer (normalt F12), og du er færdig! Du kan derefter eksperimentere med JS uden at skulle installere eller køre kompliceret software.
For at komme i gang behøver du blot en browser. Det er vidunderligt at have al denne enkelhed lige ud af æsken, men der er lejligheder, hvor du har brug for mere. Antag for eksempel, at du vil eksperimentere med en ny web-API, som du for nylig har opdaget, men ikke ønsker at starte et nyt projekt.
I dette indlæg vil vi sammenligne og kontrastere de tre mest populære JS-legepladser, CodePen, CodeSandbox og StackBlitz. Lad os komme igang!
CodePen
Frontend-webudviklingsværktøjer udvikler sig altid, og teksteditorer er en stor komponent i de nyeste teknologier, der gør en udviklers liv enklere. Bortset fra enkeltstående teksteditorer som Atom eller Notepad ++, har der i de senere år været en eksplosion af browserbaserede editorer, som ikke kræver programinstallation og fremmer et større samarbejde.
CodePen er et "online fællesskab til at teste og præsentere brugerskabte HTML-, CSS- og JavaScript-kodestykker", der giver fantastiske muligheder for at lære at skrive frontend-websider bedre.
CodePen giver dig to "tilstande". Den første og mest brugte er pennen. Det er så enkelt som at klikke på en knap og blive transporteret direkte til editoren. Derfra kan du få adgang til et forhåndsvisningspanel samt grundlæggende HTML-, CSS- og JS-redigeringsvinduer.
Der er intet "filsystem", "IntelliSense" eller noget andet - bare simpel syntaksfremhævning og hurtige kommandoer som forskønne. På fanen Indstillinger kan du vælge fra et begrænset udvalg af præprocessorer til alle tre sprog (såsom TypeScript til JS) eller tilføje forbindelser til eksterne kilder.
Hvis du kun skal have noget gjort gratis, er en af redaktørerne tilstrækkelig. Jeg vil foreslå CodePen til alt, der ikke kræver en masse opsætning eller biblioteker – simpelthen HTML, CSS og JS med valgfri præ-processorer ovenpå. Hvis du vil bruge legepladsen til at forbedre din tilstedeværelse på sociale medier eller udvikle en personlig portefølje, er CodePen en bedre mulighed.
Premium Version
Du har et par flere alternativer at vælge imellem på CodePen. Hvis du betaler årligt, kan du få en af tre premium-planer for $12, $19 eller $39 hver måned. Du kan oprette et uendeligt antal private kuglepenne, indlæg og samlinger på et hvilket som helst af de tre niveauer.
Du vil også modtage Pro-badget (et socialt boost), adgang til live-samarbejdstilstand, ingen annoncering og mere. Der er også visse teamspecifikke strategier og andre grænseoverskridende forskelle. Tjek deres officielle faktureringstavle for yderligere information.
Nøglefunktioner
Bortset fra at skabe HTML, CSS og JavaScript i CodePen, er der et par flere ting, der adskiller det.
- Det er muligt at se din kode i realtid. Det kræver ikke kompilering.
- Eksperimentering giver dig mulighed for at lære nye ting.
- Opret bittesmå testcases for at lede efter og løse problemer.
- Vis dine vidunderlige værker.
- Opret og gem penne til senere brug.
- Prøv andre udvikleres kode og se den i aktion.
Fordele
- Til at begynde med er der ingen omkostninger.
- Indbyggede læringsressourcer.
- Samarbejd med andre og sammenlign projekter for at se, hvor de kan gå hen i fremtiden.
- Brugergrænsefladen er enkel at bruge og ligetil.
Ulemper
- Kodebiblioteket er lille, automatisk kodefuldførelse er utilstrækkelig. Den er bare god til én-sides projekter og kan ikke klare noget større.
- På CodePen kan du oprette private penne, men du skal opgradere til et Pro-medlemskab ($9/måned).
KodeSandbox
CodeSandbox er en webbaseret kodeeditor. Det automatiserer transpiration, pakning og afhængighedsstyring for dig, så du kan bygge et nyt projekt med et enkelt klik. Når du har skabt noget fascinerende, kan du dele det med andre ved blot at dele webstedet.
Editoren er kompatibel med alle JavaScript-projekter, selvom den indeholder visse React-specifikke funktioner, såsom muligheden for at gemme projektet i en skabe-reager-app-skabelon.
Ethvert projekt, du bygger i CodeSandbox, begynder med en skabelon. Det kan enten relatere til et specifikt bibliotek, framework eller runtime (inklusive Node.js) eller bruge blot standard webteknologier. Når du har valgt en skabelon, sendes du til editoren, hvor du finder alle de nødvendige filer, og forhåndsvisningsvinduet er allerede åbent.
Du har adgang til et "filsystem" i alle Sandboxes, hvilket betyder, at du kan oprette nye filer, bruge moduler (inklusive NPM-pakker) og interagere med statiske aktiver. Der er også mulighed for at ændre de skabelonspecifikke konfigurationsfiler.
Du kan endda konstruere dine egne skabeloner til din unikke use-case, komplet med filstruktur og afhængigheder, ligesom i en IDE. Fordi værktøjet er knyttet til Github, kan du hurtigt generere commits og åbne PR'er. Du kan implementere din applikation til ZEIT eller Netlify med det samme.
CodeSandbox Team Pro
CodeSandbox, en hollandsk virksomhed, der giver udviklere mulighed for at konstruere en browserbaseret webapp-udviklingssandbox, har officielt udgivet en samarbejdsplatform, der giver teams mulighed for at arbejde med kode i skyen. Det nye produkt, Team Pro, er en kodefri løsning bygget til komplette produktteams, lige fra designere og ledere til kvalitetssikringsteams (QA) og videre.
Projekter leveres i en brugervenlig grænseflade til enhver, der ønsker at foretage eller acceptere ændringer i en webapplikation, og undgå alternative metoder såsom at sende noter og anbefalinger til udviklere for at udføre ændringerne, sende dem tilbage til diskussion og gentage processen.
Nøglefunktioner
- En webbaseret kodeeditor og prototypeværktøj.
- Til lokal brug kan en sandkasse nemt downloades i en zip-fil.
- Programmering udføres i sandkasser, som let kan deles med kolleger.
Fordele
- En forbedret brugeroplevelse og større kontrol over editoren.
- Live preview-funktionen kan ændres og ses i et separat vindue.
- Koden formateres automatisk og inkluderer en CLI (codesandbox-cli)
- Understøttelse af avancerede npm-moduler.
- Gode fejlmeddelelser med anbefalinger.
- Det forbedrer fejlfindingsoplevelsen ved at give en bedre terminal, testfremviser og problemfremviser.
Ulemper
- Slutforbrugeren bliver udsat for mange personaliseringer.
- Træk og slip filer fra en lokal computer fungerer ikke korrekt.
- En bestemt mappestruktur skal følges i CodeSandbox.
- Funktionaliteten af en privat sandkasse er kun tilgængelig for lånere.
StackBlitz
StackBlitz er en Visual Studio Code-drevet online IDE til webapplikationer. Platformen er lige så lydhør og tilpasningsdygtig som desktopversionen. StackBlitz er en online IDE, der leveres forudindlæst med Angular og React udviklingsværktøjer.
Thinkster.io byggede det fantastiske projekt for at gøre det så enkelt som muligt at komme i gang med dit Angular- eller React-projekt uden at skulle bekymre dig om afhængighedsinstallation eller byggeindstillinger. StackBlitz giver en masse fantastiske og unikke funktioner, som ingen anden online kodeeditor har lige nu. Som et resultat er det umagen værd at undersøge StackBlitz yderligere og opdage, hvad denne online IDE har at tilbyde.
Stackblitz er ekstremt sammenlignelig med den komplette IDE, især hvis du ikke kan sige farvel til VS-kode, fordi værktøjet er baseret på det. Pakken har en række funktioner, der giver dig mulighed for at begynde og fortsætte med at oprette en fuld stack-applikation.
Programmet er drevet af Visual Studio, som er velkendt blandt udviklere. Offline redigering er projektets fremtrædende funktion. For at gøre dette muligt oprettede Stackblitz-teamet en webserver i browseren. Mens du skriver, installerer den automatisk afhængigheder, kompilerer, bundter og foretager varm genindlæsning.
Premium Version
Cadet, Astronaut og Commander er tilgængelige gratis, henholdsvis $8/måned og $29/måned. Astronaut and Commander inkluderer en række funktioner som ubegrænsede private projekter, ubegrænsede filuploads, invitation til kerneholds slap kanal og så videre. For yderligere information, se den officielle faktureringstavle.
Nøglefunktioner
- Tilføjelse af NPM-pakker til dit projekt.
- Takket være en ny udviklerserver i browseren kan du redigere, mens du er offline.
- En hostet app-URL, der giver os adgang til (og dele) vores live-app til enhver tid.
- Andre bemærkelsesværdige Visual Studio Code-funktioner inkluderer Intellisense, Project Search (Cmd/Ctrl+P), Gå til Definition og andre.
Fordele
- Firebases muligheder for implementering.
- Editoren er virkelig nem at bruge og ekstrem hurtig.
- Brugere har adgang til package.json, index.html og index.js.
- Delbar kildekode, der også kan indlejres.
- Live preview på en stor del af siden med mulighed for at åbne på en anden side, hvis det er nødvendigt.
- Mens offline, redigering
- Smarte afslutninger og forbedret Intellisense.
- Kernen i Stackblitz er open source.
Ulemper
- Du har ikke indflydelse på bygningen eller udviklerserveren, fordi disse styres af kommandoen create-react-app.
- I React skal en grundlæggende mappestruktur overholdes.
- Det er ikke muligt at formatere kode automatisk, selvom det er muligt at gøre det manuelt.
Konklusion
I dag kan en kodende legeplads som dem, vi har set ovenfor, bruges til fuldstændigt at konstruere ethvert webprojekt. Der er ingen grund til at installere besværlige IDE'er på din pc, når du kan bygge, fejlsøge, teste og implementere direkte fra din webbrowser.
Efter min mening ville StackBlitz være bedst blandt dem, fordi det er en webbaseret IDE, der tillader JavaScript, Angular og andre udviklingsprojekter lige ud af boksen uden behov for at installere lokale udviklingsmiljøer som Node.js, npm, eller Kantet. Det giver den samme oplevelse som at bruge Visual Studio Code lokalt. I virkeligheden, fordi StackBlitz er drevet af Visual Studio Code, føles den lige så hurtig og alsidig som desktopversionen.
Hvilket af CodePen, CodeSandbox og StackBlitz er dit go-to-værktøj? Fortæl os det i kommentarerne.
Abbatyya
Tak for denne fantastiske artikel, da jeg så stackblitz.com, ved jeg, at det er det, jeg vil have.