Treballant en un projecte complex, tant si sou un programador experimentat com si sou un estudiant de primer any, pràcticament probablement trobareu problemes. Quan dividiu el vostre projecte en molts mòduls, sorgeixen problemes, cosa que dificulta el seguiment dels errors i la recerca de solucions. En altres circumstàncies, depurar instàncies individuals pot ser difícil perquè no heu descobert la solució adequada al problema en què heu estat treballant.
També es produeix com un fragment de codi de vegades, que pot semblar complex en aquell moment. JavaScript és un dels llenguatges basats en web que és extremadament senzill d'aprendre. Simplement inicieu el vostre navegador d'escriptori i navegueu a Eines per a desenvolupadors (normalment F12) i ja heu acabat! A continuació, podeu experimentar amb JS sense necessitat d'instal·lar ni executar cap programari complicat.
Per començar, tot el que necessiteu és un navegador. És meravellós tenir tota aquesta senzillesa des de la caixa, però hi ha ocasions en què en necessiteu més. Per exemple, suposem que voleu experimentar amb una API web nova que hàgiu descobert recentment però que no voleu iniciar un projecte nou.
En aquesta publicació, compararem i contrastarem els tres parcs de jocs JS més populars, CodePen, CodeSandbox i StackBlitz. Comencem!
CodePen
Les eines de desenvolupament web front-end estan en constant evolució i els editors de text són un component important de les últimes tecnologies que faciliten la vida d'un desenvolupador. A part dels editors de text autònoms com Atom o Notepad ++, hi ha hagut una explosió d'editors basats en navegadors en els últims anys que no requereixen instal·lació de programes i promouen una major col·laboració.
CodePen és una "comunitat en línia per provar i presentar fragments de codi HTML, CSS i JavaScript creats per l'usuari" que ofereix oportunitats fantàstiques per aprendre a escriure millor pàgines web d'interfície.
CodePen us ofereix dos "modes". El primer i el més utilitzat és el Bolígraf. És tan senzill com fer clic a un botó i ser transportat directament a l'editor. Des d'allà, podeu accedir a un tauler de vista prèvia així com a les finestres d'edició bàsiques d'HTML, CSS i JS.
No hi ha "sistema de fitxers", "IntelliSense" ni cap altra cosa: només un ressaltat de sintaxi senzill i ordres ràpides com Prettify. A la pestanya d'opcions, podeu seleccionar entre un rang restringit de preprocessadors per als tres idiomes (com ara TypeScript per a JS) o afegir connexions a fonts externes.
Si només necessiteu fer alguna cosa de manera gratuïta, n'hi haurà prou amb qualsevol dels editors. Suggeriria CodePen per a qualsevol cosa que no requereixi molta configuració o biblioteques: simplement HTML, CSS i JS amb preprocessadors opcionals a la part superior. Si voleu utilitzar el pati per millorar la vostra presència a les xarxes socials o desenvolupar una cartera personal, CodePen és una millor opció.
Versió Premium
Teniu algunes alternatives més per seleccionar a CodePen. Si pagueu anualment, podeu obtenir un dels tres plans premium per 12, 19 o 39 dòlars cada mes. Podeu crear un nombre infinit de bolígrafs, publicacions i col·leccions privades en qualsevol dels tres nivells.
També rebràs la insígnia Pro (un impuls social), accés al mode de col·laboració en directe, sense publicitat i molt més. També hi ha certes estratègies específiques per a l'equip i altres distincions entre nivells. Consulteu el seu tauler de facturació oficial per obtenir més informació.
Característiques clau
A part de crear HTML, CSS i JavaScript a CodePen, hi ha algunes coses més que el diferencien.
- És possible visualitzar el vostre codi en temps real. No requereix compilació.
- Experimentar et permet aprendre coses noves.
- Creeu petits casos de prova per buscar i resoldre problemes.
- Mostra les teves meravelloses obres.
- Creeu i emmagatzemeu bolígrafs per a un ús posterior.
- Proveu el codi d'altres desenvolupadors i mireu-lo en acció.
avantatges
- Per començar, no té cap cost.
- Recursos d'aprenentatge integrats.
- Col·labora amb altres i compara projectes per veure on poden anar en el futur.
- La interfície d'usuari és senzilla d'utilitzar i senzilla.
Desavantatges
- La biblioteca de codis és petita, la finalització automàtica del codi és insuficient. És bo per a projectes d'una pàgina i no pot gestionar res més gran.
- A CodePen, podeu crear bolígrafs privats, però haureu d'actualitzar a una subscripció Pro (9 dòlars al mes).
codi sandbox
CodeSandbox és un editor de codi basat en web. Automatitza la transpiració, l'embalatge i la gestió de dependències per a tu, permetent-te construir un nou projecte amb un sol clic. Després d'haver creat alguna cosa fascinant, podeu compartir-la amb altres persones simplement compartint el lloc web.
L'editor és compatible amb qualsevol projecte de JavaScript, tot i que inclou certes funcions específiques de React, com ara l'opció de desar el projecte en una plantilla create-react-app.
Qualsevol projecte que creeu a CodeSandbox comença amb una plantilla. Pot relacionar-se amb una biblioteca, marc o temps d'execució específics (inclòs Node.js) o utilitzar simplement tecnologies web estàndard. Després de seleccionar una plantilla, se us envia a l'editor, on trobareu tots els fitxers necessaris i la finestra de vista prèvia ja està oberta.
Teniu accés a un "sistema de fitxers" a tots els Sandbox, el que significa que podeu crear fitxers nous, utilitzar mòduls (inclosos paquets NPM) i interactuar amb actius estàtics. També hi ha l'oportunitat de modificar els fitxers de configuració específics de la plantilla.
Fins i tot podeu construir les vostres pròpies plantilles per al vostre cas d'ús únic, amb estructura de fitxers i dependències, com en un IDE. Com que l'eina està enllaçada a Github, podeu generar commits i obrir PR ràpidament. Podeu implementar la vostra aplicació a ZEIT o Netlify immediatament.
CodeSandbox Team Pro
CodeSandbox, una empresa holandesa que permet als desenvolupadors construir un sandbox de desenvolupament d'aplicacions web basat en navegador, ha llançat oficialment una plataforma de col·laboració que permet als equips treballar en codi al núvol. El nou producte, Team Pro, és una solució sense codi creada per a equips de producte complets, que van des de dissenyadors i gestors fins a equips de garantia de qualitat (QA) i més enllà.
Els projectes es proporcionen en una interfície fàcil d'utilitzar per a qualsevol persona que vulgui fer o acceptar canvis en una aplicació web, evitant mètodes alternatius com ara enviar notes i recomanacions als desenvolupadors per executar els canvis, tornar-los a discutir i repetir el procés.
Característiques clau
- Un editor de codi basat en web i una eina de prototip.
- Per a ús local, es pot descarregar fàcilment una caixa de proves en un fitxer zip.
- Programació es fa en caixes de sorra, que es poden compartir fàcilment amb els companys de feina.
avantatges
- Una experiència d'usuari millorada i un major control sobre l'editor.
- La funció de vista prèvia en directe es pot modificar i veure en una finestra independent.
- El codi es formata automàticament i inclou una CLI (codesandbox-cli)
- Suport per a mòduls npm avançats.
- Bons missatges d'error amb recomanacions.
- Millora l'experiència de depuració proporcionant un millor terminal, visualitzador de proves i visualitzador de problemes.
Desavantatges
- El consumidor final està exposat a moltes personalitzacions.
- Arrossegar i deixar anar fitxers des d'un ordinador local no funciona correctament.
- S'ha de seguir una determinada estructura de carpetes a CodeSandbox.
- La funcionalitat d'un sandbox privat només està disponible per als usuaris.
StackBlitz
StackBlitz és un IDE en línia basat en Visual Studio Code per a aplicacions web. La plataforma és tan sensible i adaptable com la versió d'escriptori. StackBlitz és un IDE en línia que ve carregat prèviament Angular i reaccionar eines de desenvolupament.
Thinkster.io va crear aquest fantàstic projecte perquè sigui tan senzill com sigui possible començar amb el vostre projecte Angular o React sense haver de preocupar-vos per la instal·lació de dependències o la configuració de compilació. StackBlitz ofereix moltes funcions sorprenents i úniques que cap altre editor de codi en línia té ara mateix. Com a resultat, val la pena investigar més StackBlitz i descobrir què ofereix aquest IDE en línia.
Stackblitz és extremadament comparable a l'IDE complet, sobretot si no podeu dir adéu al codi VS perquè l'eina es basa en ell. El paquet té una varietat de funcions que us permeten començar i continuar creant una aplicació de pila completa.
El programa està impulsat per Visual Studio, que és conegut entre els desenvolupadors. L'edició fora de línia és la característica destacada del projecte. Per fer-ho possible, l'equip de Stackblitz va crear un servidor web dins del navegador. A mesura que escriviu, instal·la automàticament dependències, compila, agrupa i fa una recàrrega en calent.
Versió Premium
Cadet, astronauta i comandant estan disponibles de forma gratuïta, 8 $/mes i 29 $/mes, respectivament. Astronaut and Commander inclou una sèrie de funcions, com ara projectes privats il·limitats, càrregues de fitxers il·limitades, invitació al canal slack de l'equip principal, etc. Per a més informació, consulteu el tauler de facturació oficial.
Característiques clau
- Afegint paquets NPM al vostre projecte.
- Gràcies a un nou servidor de desenvolupament dins del navegador, podeu editar sense connexió.
- Una URL d'aplicació allotjada que ens permet accedir (i compartir) la nostra aplicació en directe en qualsevol moment.
- Altres funcions destacades de Visual Studio Code inclouen Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition i altres.
avantatges
- Capacitats de desplegament de Firebase.
- L'editor és molt fàcil d'utilitzar i extremadament ràpid.
- Els usuaris tenen accés a package.json, index.html i index.js.
- Codi font compartible que també es pot incrustar.
- Vista prèvia en directe en una gran secció de la pàgina, amb l'opció d'obrir-se en una pàgina diferent si cal.
- Mentre està fora de línia, edició
- Finalitzacions intel·ligents i Intellisense millorat.
- El nucli de Stackblitz és de codi obert.
Desavantatges
- No teniu influència sobre l'edifici o el servidor del desenvolupador perquè aquests es gestionen mitjançant l'ordre create-react-app.
- A React, s'ha d'observar una estructura de carpetes fonamental.
- No és possible formatejar el codi automàticament, encara que sí que es pot fer manualment.
Conclusió
Avui en dia, un pati de codificació com els que hem vist anteriorment es pot utilitzar per construir completament qualsevol projecte web. No cal instal·lar IDE complicats al vostre ordinador quan podeu crear, depurar, provar i desplegar directament des del vostre navegador web.
Al meu entendre, StackBlitz seria el millor entre ells perquè és un IDE basat en web que permet JavaScript, Angular i altres projectes de desenvolupament des de la caixa, sense necessitat d'instal·lar cap entorn de desenvolupament local com Node.js, npm, o angular. Proporciona la mateixa experiència que utilitzar Visual Studio Code localment. En realitat, com que StackBlitz està impulsat per Visual Studio Code, se sent tan ràpid i versàtil com la versió d'escriptori.
Quina de CodePen, CodeSandbox i StackBlitz és la vostra eina de referència? Feu-nos-ho saber als comentaris.
Abbatyya
Gràcies per aquest gran article, un cop vaig veure stackblitz.com, sé que això és el que vull.