När du arbetar med ett komplext projekt, oavsett om du är en erfaren programmerare eller nybörjare, kommer du nästan sannolikt att stöta på problem. När du delar upp ditt projekt i många moduler uppstår problem som gör det svårare att spåra fel och hitta lösningar. Under andra omständigheter kan det vara svårt att felsöka enskilda instanser eftersom du inte har upptäckt den rätta lösningen på problemet du har arbetat med.
Det förekommer också som en kodbit ibland, vilket kan se komplicerat ut då. JavaScript är ett av de webbaserade språken som är extremt lätt att lära sig. Starta helt enkelt din skrivbordswebbläsare och navigera till utvecklarverktyg (vanligtvis F12), och du är klar! Du kan sedan experimentera med JS utan att behöva installera eller köra någon komplicerad programvara.
För att komma igång behöver du bara en webbläsare. Det är underbart att ha all denna enkelhet direkt ur lådan, men det finns tillfällen när du behöver mer. Anta till exempel att du vill experimentera med ett nytt webb-API som du nyligen har upptäckt men inte vill starta ett nytt projekt.
I det här inlägget kommer vi att jämföra och kontrastera de tre mest populära JS-lekplatserna, CodePen, CodeSandbox och StackBlitz. Låt oss börja!
CodePen
Frontend-webbutvecklingsverktyg utvecklas hela tiden, och textredigerare är en stor komponent i den senaste tekniken som gör en utvecklares liv enklare. Bortsett från fristående textredigerare som Atom eller Notepad ++, har det skett en explosion av webbläsarbaserade redigerare de senaste åren som inte kräver programinstallation och främjar större samarbete.
CodePen är en "onlinegemenskap för att testa och presentera användarskapade HTML-, CSS- och JavaScript-kodsnuttar" som erbjuder fantastiska möjligheter att lära sig hur man skriver frontend-webbsidor bättre.
CodePen ger dig två "lägen". Den första och mest använda är pennan. Det är så enkelt som att klicka på en knapp och transporteras direkt till redigeraren. Därifrån kan du komma åt en förhandsgranskningspanel samt grundläggande HTML-, CSS- och JS-redigeringsfönster.
Det finns inget "filsystem", "IntelliSense" eller något annat - bara enkel syntaxmarkering och snabba kommandon som prettify. På fliken Alternativ kan du välja från ett begränsat utbud av förprocessorer för alla tre språken (som TypeScript för JS) eller lägga till anslutningar till externa källor.
Om du bara behöver göra något gratis räcker det med någon av redaktörerna. Jag skulle föreslå CodePen för allt som inte kräver mycket installation eller bibliotek – helt enkelt HTML, CSS och JS med valfria förprocessorer ovanpå. Om du vill använda lekplatsen för att förbättra din närvaro på sociala medier eller utveckla en personlig portfölj är CodePen ett bättre alternativ.
Premium Version
Du har några fler alternativ att välja mellan på CodePen. Om du betalar årligen kan du få en av tre premiumplaner för $12, $19 eller $39 varje månad. Du kan skapa ett oändligt antal privata pennor, inlägg och samlingar på någon av de tre nivåerna.
Du kommer också att få Pro-märket (en social boost), tillgång till livesamarbetsläge, ingen reklam och mer. Det finns också vissa lagspecifika strategier och andra gränsöverskridande skillnader. Kolla in deras officiella faktureringstavla för mer information.
Funktioner
Förutom att skapa HTML, CSS och JavaScript i CodePen, finns det några fler saker som skiljer det åt.
- Det är möjligt att se din kod i realtid. Det kräver ingen sammanställning.
- Genom att experimentera kan du lära dig nya saker.
- Skapa små testfall för att leta efter och åtgärda problem.
- Visa dina underbara verk.
- Skapa och lagra pennor för senare användning.
- Testa andra utvecklares kod och se hur den fungerar.
Fördelar
- Till att börja med är det ingen kostnad.
- Inbyggda lärresurser.
- Samarbeta med andra och jämför projekt för att se vart de kan ta vägen i framtiden.
- Användargränssnittet är enkelt att använda och enkelt.
Nackdelar
- Kodbiblioteket är litet, automatisk kodkomplettering är otillräcklig. Det är bara bra för ensidiga projekt och kan inte hantera något större.
- På CodePen kan du skapa privata pennor, men du måste uppgradera till ett Pro-medlemskap ($9/månad).
kod sandlåda
CodeSandbox är en webbaserad kodredigerare. Det automatiserar transpiration, paketering och beroendehantering åt dig, så att du kan bygga ett nytt projekt med ett enda klick. När du har skapat något fascinerande kan du dela det med andra genom att helt enkelt dela webbplatsen.
Redaktören är kompatibel med alla JavaScript-projekt, även om den innehåller vissa React-specifika funktioner, till exempel möjligheten att spara projektet i en skapa-reagera-app-mall.
Alla projekt du bygger i CodeSandbox börjar med en mall. Det kan antingen relatera till ett specifikt bibliotek, ramverk eller körtid (inklusive Node.js) eller helt enkelt använda standardwebbteknik. När du har valt en mall skickas du till redigeraren, där du hittar alla nödvändiga filer och förhandsgranskningsfönstret som redan är öppet.
Du har tillgång till ett "filsystem" i alla sandlådor, vilket innebär att du kan skapa nya filer, använda moduler (inklusive NPM-paket) och interagera med statiska tillgångar. Det finns också möjlighet att ändra de mallspecifika konfigurationsfilerna.
Du kan till och med konstruera dina egna mallar för ditt unika användningsfall, komplett med filstruktur och beroenden, ungefär som i en IDE. Eftersom verktyget är länkat till Github kan du snabbt generera commits och öppna PR. Du kan distribuera din applikation till ZEIT eller Netlify direkt.
CodeSandbox Team Pro
CodeSandbox, ett holländskt företag som låter utvecklare konstruera en webbläsarbaserad webbapputvecklingssandlåda, har officiellt släppt en samarbetsplattform som låter team arbeta med kod i molnet. Den nya produkten, Team Pro, är en kodlös lösning byggd för kompletta produktteam, allt från designers och chefer till kvalitetssäkringsteam (QA) och vidare.
Projekt tillhandahålls i ett användarvänligt gränssnitt för alla som vill göra eller acceptera ändringar i en webbapplikation, undvika alternativa metoder som att skicka anteckningar och rekommendationer till utvecklare för att utföra ändringarna, skicka tillbaka dem för diskussion och upprepa processen.
Funktioner
- En webbaserad kodredigerare och prototypverktyg.
- För lokalt bruk kan en sandlåda enkelt laddas ner i en zip-fil.
- Programmering görs i sandlådor, som lätt kan delas med kollegor.
Fördelar
- En förbättrad användarupplevelse och större kontroll över redigeraren.
- Liveförhandsvisningsfunktionen kan ändras och visas i ett separat fönster.
- Koden formateras automatiskt och inkluderar en CLI (codesandbox-cli)
- Stöd för avancerade npm-moduler.
- Bra felmeddelanden med rekommendationer.
- Det förbättrar felsökningsupplevelsen genom att tillhandahålla en bättre terminal, testvisare och problemvisare.
Nackdelar
- Slutkonsumenten utsätts för många anpassningar.
- Dra och släpp filer från en lokal dator fungerar inte korrekt.
- En viss mappstruktur måste följas i CodeSandbox.
- Funktionaliteten hos en privat sandlåda är endast tillgänglig för kunder.
StackBlitz
StackBlitz är en Visual Studio Code-driven online-IDE för webbapplikationer. Plattformen är lika lyhörd och anpassningsbar som desktopversionen. StackBlitz är en online-IDE som levereras förinstallerad med Angular och React utvecklings verktyg.
Thinkster.io byggde det fantastiska projektet för att göra det så enkelt som möjligt att komma igång med ditt Angular- eller React-projekt utan att behöva oroa dig för beroendeinstallation eller bygginställningar. StackBlitz erbjuder många fantastiska och unika funktioner som ingen annan kodredigerare online har just nu. Som ett resultat är det värt att undersöka StackBlitz ytterligare och upptäcka vad denna online-IDE har att erbjuda.
Stackblitz är extremt jämförbar med hela IDE, speciellt om du inte kan säga adjö till VS-kod eftersom verktyget är baserat på det. Paketet har en mängd funktioner som gör att du kan börja och fortsätta skapa en fullstack-applikation.
Programmet drivs av Visual Studio, som är välkänt bland utvecklare. Offlineredigering är projektets framstående funktion. För att göra detta möjligt skapade Stackblitz-teamet en webbserver i webbläsaren. När du skriver installerar den automatiskt beroenden, kompilerar, buntar och gör omladdning.
Premium Version
Cadet, Astronaut och Commander är tillgängliga gratis, $8/månad respektive $29/månad. Astronaut and Commander innehåller ett antal funktioner som obegränsade privata projekt, obegränsade filuppladdningar, inbjudan till en slackkanal för kärnteamet och så vidare. För ytterligare information, se den officiella faktureringsnämnden.
Funktioner
- Lägga till NPM-paket till ditt projekt.
- Tack vare en ny utvecklarserver i webbläsaren kan du redigera offline.
- En värdapp-URL som låter oss komma åt (och dela) vår live-app när som helst.
- Andra anmärkningsvärda Visual Studio Code-funktioner inkluderar Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition och andra.
Fördelar
- Firebases funktioner för implementering.
- Editorn är väldigt enkel att använda och extremt snabb.
- Användare har tillgång till package.json, index.html och index.js.
- Delbar källkod som också kan bäddas in.
- Live förhandsvisning på en stor del av sidan, med möjlighet att öppna på en annan sida vid behov.
- När du är offline, redigering
- Smarta kompletteringar och förbättrad Intellisense.
- Kärnan i Stackblitz är öppen källkod.
Nackdelar
- Du har inte inflytande över byggnaden eller utvecklarservern eftersom de hanteras av kommandot create-react-app.
- I React bör en grundläggande mappstruktur observeras.
- Det går inte att formatera kod automatiskt, även om det går att göra det manuellt.
Slutsats
Nuförtiden kan en kodande lekplats som de vi har sett ovan användas för att helt konstruera vilket webbprojekt som helst. Det finns inget behov av att installera besvärliga IDE på din PC när du kan bygga, felsöka, testa och distribuera direkt från din webbläsare.
Enligt min åsikt skulle StackBlitz vara bäst bland dem eftersom det är en webbaserad IDE som tillåter JavaScript, Angular och andra utvecklingsprojekt direkt, utan att behöva installera några lokala utvecklingsmiljöer som Node.js, npm, eller Angular. Det ger samma upplevelse som att använda Visual Studio Code lokalt. I verkligheten, eftersom StackBlitz drivs av Visual Studio Code, känns den lika snabb och mångsidig som skrivbordsversionen.
Vilket av CodePen, CodeSandbox och StackBlitz är ditt bästa verktyg? Låt oss veta i kommentarerna.
Abbatyya
Tack för denna fantastiska artikel, när jag såg stackblitz.com vet jag att det här är vad jag vill ha.