Innholdsfortegnelse[Gjemme seg][Forestilling]
Når du jobber med et komplekst prosjekt, enten du er en erfaren programmerer eller nybegynner, vil du nesten sannsynligvis støte på problemer. Når du deler opp prosjektet i mange moduler, oppstår det problemer som gjør det vanskeligere å spore opp feil og finne løsninger. Under andre omstendigheter kan det være vanskelig å feilsøke individuelle forekomster fordi du ikke har funnet den riktige løsningen på problemet du har jobbet med.
Det forekommer også som et stykke kode av og til, som kan se komplekst ut på den tiden. JavaScript er et av de nettbaserte språkene som er ekstremt enkle å lære. Bare start nettleseren på skrivebordet og naviger til utviklerverktøy (vanligvis F12), og du er ferdig! Du kan deretter eksperimentere med JS uten å måtte installere eller kjøre komplisert programvare.
For å komme i gang trenger du bare en nettleser. Det er fantastisk å ha all denne enkelheten rett ut av esken, men det er anledninger når du trenger mer. Anta for eksempel at du vil eksperimentere med en ny web-API som du nylig har oppdaget, men ikke vil starte et nytt prosjekt.
I dette innlegget vil vi sammenligne og kontrastere de tre mest populære JS-lekeplassene, CodePen, CodeSandbox og StackBlitz. La oss komme i gang!
CodePen
Frontend-nettutviklingsverktøy er alltid i utvikling, og tekstredigerere er en stor del av de nyeste teknologiene som gjør livet til en utviklere enklere. Bortsett fra frittstående tekstredigerere som Atom eller Notepad ++, har det vært en eksplosjon av nettleserbaserte redaktører de siste årene som ikke krever programinstallasjon og fremmer større samarbeid.
CodePen er et "nettsamfunn for testing og presentasjon av brukerlagde HTML-, CSS- og JavaScript-kodebiter" som gir fantastiske muligheter til å lære å skrive frontend-websider bedre.
CodePen gir deg to "moduser." Den første og mest brukte er pennen. Det er så enkelt som å klikke på en knapp og bli transportert rett til redaktøren. Derfra kan du få tilgang til et forhåndsvisningspanel samt grunnleggende HTML-, CSS- og JS-redigeringsvinduer.
Det er ikke noe "filsystem", "IntelliSense" eller noe annet - bare enkel syntaksutheving og raske kommandoer som prettify. I alternativfanen kan du velge fra et begrenset utvalg av forprosessorer for alle tre språkene (som TypeScript for JS) eller legge til tilkoblinger til eksterne kilder.
Hvis du bare trenger å gjøre noe gratis, vil en av redaktørene være tilstrekkelig. Jeg vil foreslå CodePen for alt som ikke krever mye oppsett eller biblioteker – ganske enkelt HTML, CSS og JS med valgfrie pre-prosessorer på toppen. Hvis du vil bruke lekeplassen til å forbedre tilstedeværelsen på sosiale medier eller utvikle en personlig portefølje, er CodePen et bedre alternativ.
Premium versjon
Du har noen flere alternativer å velge mellom på CodePen. Hvis du betaler årlig, kan du få en av tre premiumplaner for $12, $19 eller $39 hver måned. Du kan lage et uendelig antall private penner, innlegg og samlinger på hvilket som helst av de tre nivåene.
Du vil også motta Pro-merket (et sosialt løft), tilgang til live samarbeidsmodus, ingen reklame og mer. Det er også visse lagspesifikke strategier og andre distinksjoner på tvers av lag. Sjekk ut deres offisielle faktureringstavle for mer informasjon.
Viktige funksjoner
Bortsett fra å lage HTML, CSS og JavaScript i CodePen, er det noen flere ting som skiller det fra hverandre.
- Sanntidsvisning av koden din er mulig. Det krever ikke kompilering.
- Eksperimentering lar deg lære nye ting.
- Lag ørsmå testsaker for å se etter og løse problemer.
- Vis dine fantastiske verk.
- Lag og oppbevar penner for senere bruk.
- Prøv andre utvikleres kode og se den i aksjon.
Fordeler
- Til å begynne med er det ingen kostnad.
- Innebygde læringsressurser.
- Samarbeid med andre og sammenlign prosjekter for å se hvor de kan gå i fremtiden.
- Brukergrensesnittet er enkelt å bruke og greit.
Ulemper
- Kodebiblioteket er lite, automatisk kodefullføring er utilstrekkelig. Det er bare bra for énsides prosjekter og kan ikke håndtere noe større.
- På CodePen kan du lage private penner, men du må oppgradere til et Pro-medlemskap ($9/måned).
kode sandkasse
CodeSandbox er en nettbasert koderedigerer. Den automatiserer transpirasjon, pakking og avhengighetsadministrasjon for deg, slik at du kan bygge et nytt prosjekt med et enkelt klikk. Etter at du har laget noe fascinerende, kan du dele det med andre ved å dele nettstedet.
Redaktøren er kompatibel med alle JavaScript-prosjekter, selv om den inkluderer visse React-spesifikke funksjoner, for eksempel muligheten til å lagre prosjektet i en create-react-app-mal.
Ethvert prosjekt du bygger i CodeSandbox begynner med en mal. Det kan enten forholde seg til et spesifikt bibliotek, rammeverk eller kjøretid (inkludert Node.js) eller bare bruke standard nettteknologi. Etter å ha valgt en mal, sendes du til redaktøren, hvor du finner alle nødvendige filer og forhåndsvisningsvinduet som allerede er åpent.
Du har tilgang til et "filsystem" i alle Sandboxes, noe som betyr at du kan lage nye filer, bruke moduler (inkludert NPM-pakker) og samhandle med statiske eiendeler. Det er også mulighet for å endre de malspesifikke konfigurasjonsfilene.
Du kan til og med lage dine egne maler for din unike brukssak, komplett med filstruktur og avhengigheter, omtrent som i en IDE. Fordi verktøyet er koblet til Github, kan du raskt generere forpliktelser og åpne PR-er. Du kan distribuere applikasjonen din til ZEIT eller Netlify med en gang.
CodeSandbox Team Pro
CodeSandbox, en nederlandsk virksomhet som lar utviklere bygge en nettleserbasert utviklingssandkasse for webapper, har offisielt gitt ut en samarbeidsplattform som lar team jobbe med kode i skyen. Det nye produktet, Team Pro, er en kodefri løsning bygget for komplette produktteam, alt fra designere og ledere til kvalitetssikringsteam (QA) og utover.
Prosjekter leveres i et brukervennlig grensesnitt for alle som ønsker å gjøre eller godta endringer i en nettapplikasjon, og unngår alternative metoder som å sende notater og anbefalinger til utviklere for å utføre endringene, sende dem tilbake til diskusjon og gjenta prosessen.
Viktige funksjoner
- Et nettbasert koderedigerings- og prototypeverktøy.
- For lokal bruk kan en sandkasse enkelt lastes ned i en zip-fil.
- Programmering gjøres i sandkasser, som lett kan deles med kolleger.
Fordeler
- En forbedret brukeropplevelse og større kontroll over editoren.
- Den direkte forhåndsvisningsfunksjonen kan endres og vises i et eget vindu.
- Koden formateres automatisk og inkluderer en CLI (codesandbox-cli)
- Støtte for avanserte npm-moduler.
- Fine feilmeldinger med anbefalinger.
- Det forbedrer feilsøkingsopplevelsen ved å gi en bedre terminal, testvisning og problemviser.
Ulemper
- Sluttforbrukeren blir utsatt for mange personaliseringer.
- Dra og slipp av filer fra en lokal datamaskin fungerer ikke som den skal.
- En bestemt mappestruktur må følges i CodeSandbox.
- Funksjonaliteten til en privat sandkasse er kun tilgjengelig for kunder.
stackblitz
StackBlitz er en Visual Studio Code-drevet online IDE for webapplikasjoner. Plattformen er like responsiv og tilpasningsdyktig som desktopversjonen. StackBlitz er en online IDE som leveres forhåndslastet med Angular og React utviklingsverktøy.
Thinkster.io bygde det fantastiske prosjektet for å gjøre det så enkelt som mulig å komme i gang med Angular- eller React-prosjektet ditt uten å måtte bekymre deg for avhengighetsinstallasjon eller byggeinnstillinger. StackBlitz gir mange fantastiske og unike funksjoner som ingen annen online koderedigerer har akkurat nå. Som et resultat er det verdt å undersøke StackBlitz videre og finne ut hva denne online IDE har å tilby.
Stackblitz er ekstremt sammenlignbar med hele IDE, spesielt hvis du ikke kan si farvel til VS-kode fordi verktøyet er basert på det. Pakken har en rekke funksjoner som lar deg begynne og fortsette å lage en fullstack-applikasjon.
Programmet drives av Visual Studio, som er velkjent blant utviklere. Frakoblet redigering er prosjektets fremstående funksjon. For å gjøre dette mulig opprettet Stackblitz-teamet en webserver i nettleseren. Mens du skriver, installerer den automatisk avhengigheter, kompilerer, pakker og laster på nytt.
Premium versjon
Cadet, Astronaut og Commander er tilgjengelige gratis, henholdsvis $8/måned og $29/måned. Astronaut and Commander inkluderer en rekke funksjoner som ubegrensede private prosjekter, ubegrensede filopplastinger, inviter til slakk kanal i kjerneteamet, og så videre. For mer informasjon, se den offisielle faktureringstavlen.
Viktige funksjoner
- Legge til NPM-pakker til prosjektet ditt.
- Takket være en ny utviklerserver i nettleseren kan du redigere mens du er offline.
- En vertsbasert app-URL som lar oss få tilgang til (og dele) live-appen vår når som helst.
- Andre bemerkelsesverdige Visual Studio Code-funksjoner inkluderer Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition og andre.
Fordeler
- Firebases evner for distribusjon.
- Editoren er veldig enkel å bruke og ekstremt rask.
- Brukere har tilgang til package.json, index.html og index.js.
- Delbar kildekode som også kan bygges inn.
- Live forhåndsvisning på en stor del av siden, med mulighet for å åpne på en annen side om nødvendig.
- Frakoblet, redigering
- Smarte fullføringer og forbedret Intellisense.
- Kjernen i Stackblitz er åpen kildekode.
Ulemper
- Du har ikke innflytelse over bygningen eller utviklerserveren fordi disse administreres av kommandoen create-react-app.
- I React bør en grunnleggende mappestruktur følges.
- Det er ikke mulig å formatere kode automatisk, selv om det er mulig å gjøre det manuelt.
konklusjonen
I dag kan en kodende lekeplass som de vi har sett ovenfor, brukes til å bygge ethvert nettprosjekt fullstendig. Det er ikke nødvendig å installere tungvinte IDE-er på PC-en din når du kan bygge, feilsøke, teste og distribuere direkte fra nettleseren.
Etter min mening vil StackBlitz være best blant dem fordi det er en nettbasert IDE som tillater JavaScript, Angular og andre utviklingsprosjekter rett ut av esken, uten behov for å installere lokale utviklingsmiljøer som Node.js, npm, eller Angular. Det gir samme opplevelse som å bruke Visual Studio Code lokalt. I virkeligheten, fordi StackBlitz er drevet av Visual Studio Code, føles den like rask og allsidig som skrivebordsversjonen.
Hvilket av CodePen, CodeSandbox og StackBlitz er det beste verktøyet ditt? Gi oss beskjed i kommentarene.
Abbatyya
Takk for denne flotte artikkelen, når jeg så stackblitz.com, vet jeg at dette er det jeg vil ha.