Traballando nun proxecto complexo, xa sexas un programador experimentado ou un novato, é probable que te atopes con problemas. Cando divides o teu proxecto en moitos módulos, xorden problemas, polo que é máis difícil rastrexar erros e atopar solucións. Noutras circunstancias, a depuración de instancias individuais pode ser difícil porque non descubriu a solución adecuada para o problema no que estivo traballando.
Tamén ocorre como un anaco de código en ocasións, o que pode parecer complexo nese momento. JavaScript é un dos idiomas baseados na web que é moi sinxelo de aprender. Simplemente inicie o seu navegador de escritorio e navegue ata Ferramentas para programadores (normalmente F12) e xa está! Podes experimentar con JS sen necesidade de instalar nin executar ningún software complicado.
Para comezar, todo o que necesitas é un navegador. É marabilloso ter toda esta sinxeleza desde a caixa, pero hai ocasións nas que necesitas máis. Por exemplo, supoña que quere experimentar cunha nova API web que descubriu recentemente pero non quere iniciar un novo proxecto.
Nesta publicación, compararemos e contrastaremos os tres parques máis populares de JS, CodePen, CodeSandbox e StackBlitz. Imos comezar!
CodePen
As ferramentas de desenvolvemento web frontend están en constante evolución e os editores de texto son un gran compoñente das tecnoloxías máis recentes que facilitan a vida dun programador. Ademais dos editores de texto autónomos como Atom ou Notepad ++, houbo unha explosión de editores baseados en navegador nos últimos anos que non requiren instalación de programas e promoven unha maior colaboración.
CodePen é unha "comunidade en liña para probar e presentar fragmentos de código HTML, CSS e JavaScript creados polo usuario" que ofrece fantásticas oportunidades para aprender a escribir mellor páxinas web frontend.
CodePen ofrécelle dous "modos". O primeiro e máis usado é o Pen. É tan sinxelo como facer clic nun botón e ser transportado directamente ao editor. Desde alí, podes acceder a un panel de vista previa, así como ás ventás básicas de edición HTML, CSS e JS.
Non hai "sistema de ficheiros", "IntelliSense" ou calquera outra cousa: só un simple resaltado de sintaxe e comandos rápidos como prettify. Na pestana de opcións, pode seleccionar entre un rango restrinxido de preprocesadores para os tres idiomas (como TypeScript para JS) ou engadir conexións a fontes externas.
Se só precisa facer algo de balde, calquera dos editores será suficiente. Suxeriría CodePen para calquera cousa que non requira moita configuración ou bibliotecas: simplemente HTML, CSS e JS con preprocesadores opcionais na parte superior. Se queres utilizar o parque infantil para mellorar a túa presenza nas redes sociais ou desenvolver unha carteira persoal, CodePen é unha mellor opción.
Versión Premium
Tes algunhas alternativas máis para escoller en CodePen. Se pagas anualmente, podes obter un dos tres plans premium por $12, $19 ou $39 cada mes. Podes crear un número infinito de bolígrafos, publicacións e coleccións privadas en calquera dos tres niveis.
Tamén recibirás a insignia Pro (un impulso social), acceso ao modo de colaboración en directo, sen publicidade e moito máis. Tamén hai certas estratexias específicas para o equipo e outras distincións entre niveis. Consulte o seu cadro de facturación oficial para obter máis información.
Características
Ademais de crear HTML, CSS e JavaScript en CodePen, hai algunhas cousas máis que o diferencian.
- É posible ver o teu código en tempo real. Non require compilación.
- Experimentar permíteche aprender cousas novas.
- Crea pequenos casos de proba para buscar e resolver problemas.
- Mostra as túas marabillosas obras.
- Crea e almacena bolígrafos para o seu uso posterior.
- Proba o código doutros desenvolvedores e velo en acción.
vantaxes
- Para comezar, non hai ningún custo.
- Recursos de aprendizaxe incorporados.
- Colabora con outros e compara proxectos para ver onde poden ir no futuro.
- A IU é sinxela de usar e sinxela.
Desvantaxes
- A biblioteca de códigos é pequena, a completación automática do código é inadecuada. É só bo para proxectos dunha páxina e non pode xestionar nada máis grande.
- En CodePen, podes crear bolígrafos privados, pero terás que actualizar a unha subscrición Pro ($9/mes).
Código Sandbox
CodeSandbox é un editor de código baseado na web. Automatiza a xestión de transpiración, empaquetado e dependencia para ti, o que che permite construír un novo proxecto cun só clic. Despois de crear algo fascinante, podes compartilo con outras persoas simplemente compartindo o sitio web.
O editor é compatible con calquera proxecto JavaScript, aínda que inclúe certas funcións específicas de React, como a opción de gardar o proxecto nun modelo de aplicación create-react.
Calquera proxecto que crees en CodeSandbox comeza cun modelo. Pode relacionarse cunha biblioteca, marco ou tempo de execución específicos (incluíndo Node.js) ou utilizar simplemente tecnoloxías web estándar. Despois de seleccionar un modelo, será enviado ao editor, onde atoparás todos os ficheiros necesarios e a xanela de vista previa xa está aberta.
Tes acceso a un "sistema de ficheiros" en todos os Sandbox, o que significa que podes crear novos ficheiros, utilizar módulos (incluíndo paquetes NPM) e interactuar con recursos estáticos. Tamén hai a oportunidade de modificar os ficheiros de configuración específicos do modelo.
Incluso podes construír os teus propios modelos para o teu caso de uso único, completos coa estrutura de ficheiros e dependencias, como nun IDE. Debido a que a ferramenta está ligada a Github, pode xerar rapidamente commits e abrir PR. Podes implementar a túa aplicación en ZEIT ou Netlify de inmediato.
CodeSandbox Team Pro
CodeSandbox, unha empresa holandesa que permite aos desenvolvedores construír un sandbox de desenvolvemento de aplicacións web baseado en navegador, lanzou oficialmente unha plataforma de colaboración que permite aos equipos traballar en código na nube. O novo produto, Team Pro, é unha solución sen código creada para equipos completos de produtos, que van desde deseñadores e xestores ata equipos de garantía de calidade (QA) e máis aló.
Os proxectos ofrécense nunha interface amigable para quen queira facer ou aceptar cambios nunha aplicación web, evitando métodos alternativos como enviar notas e recomendacións aos desenvolvedores para que executen os cambios, devolvéndoos a discusión e repetindo o proceso.
Características
- Un editor de código baseado na web e unha ferramenta de prototipo.
- Para uso local, pódese descargar facilmente un sandbox nun ficheiro zip.
- Programación realízase en caixas de area, que se poden compartir facilmente cos compañeiros de traballo.
vantaxes
- Unha experiencia de usuario mellorada e un maior control sobre o editor.
- A función de vista previa en directo pódese modificar e ver nunha xanela separada.
- O código está formateado automaticamente e inclúe unha CLI (codesandbox-cli)
- Soporte para módulos npm avanzados.
- Boas mensaxes de erro con recomendacións.
- Mellora a experiencia de depuración proporcionando un mellor terminal, visor de probas e visor de problemas.
Desvantaxes
- O consumidor final está exposto a moitas personalizacións.
- Arrastrar e soltar ficheiros desde un ordenador local non funciona correctamente.
- Débese seguir unha determinada estrutura de cartafoles en CodeSandbox.
- A funcionalidade dun sandbox privado só está dispoñible para os usuarios.
StackBlitz
StackBlitz é un IDE en liña impulsado por Visual Studio Code para aplicacións web. A plataforma é tan sensible e adaptable como a versión de escritorio. StackBlitz é un IDE en liña que vén precargado Angular e Reaccionar ferramentas de desenvolvemento.
Thinkster.io creou ese fantástico proxecto para que sexa o máis sinxelo posible comezar co seu proxecto Angular ou React sen ter que preocuparse pola instalación de dependencias ou a configuración de compilación. StackBlitz ofrece moitas características sorprendentes e únicas que ningún outro editor de código en liña ten agora mesmo. Como resultado, paga a pena investigar máis StackBlitz e descubrir o que ofrece este IDE en liña.
Stackblitz é moi comparable ao IDE completo, especialmente se non podes despedirte do código VS porque a ferramenta está baseada nel. O paquete ten unha variedade de funcións que che permiten comezar e continuar creando unha aplicación de pila completa.
O programa está impulsado por Visual Studio, que é moi coñecido entre os desenvolvedores. A edición fóra de liña é a característica destacada do proxecto. Para facelo posible, o equipo de Stackblitz creou un servidor web no navegador. Mentres escribes, instala automaticamente dependencias, compila, agrupa e fai a recarga en quente.
Versión Premium
Cadete, Astronauta e Commander están dispoñibles de balde, 8 $ ao mes e 29 $ ao mes, respectivamente. Astronaut and Commander inclúe unha serie de funcións como proxectos privados ilimitados, cargas de ficheiros ilimitadas, invitación á canle de slack do equipo principal, etc. Para obter máis información, consulte o taboleiro de facturación oficial.
Características
- Engadindo paquetes NPM ao teu proxecto.
- Grazas a un novo servidor de desenvolvemento no navegador, podes editar sen conexión.
- Unha URL de aplicación aloxada que nos permite acceder (e compartir) a nosa aplicación en directo en calquera momento.
- Outras características notables de Visual Studio Code inclúen Intellisense, Busca de proxectos (Cmd/Ctrl+P), Ir a definición e outras.
vantaxes
- Capacidades de implementación de Firebase.
- O editor é moi sinxelo de usar e moi rápido.
- Os usuarios teñen acceso a package.json, index.html e index.js.
- Código fonte compartible que tamén se pode inserir.
- Vista previa en directo nunha sección grande da páxina, coa opción de abrir noutra páxina se é necesario.
- Estando fóra de liña, editando
- Completacións intelixentes e Intellisense mellorado.
- O núcleo de Stackblitz é de código aberto.
Desvantaxes
- Non tes influencia sobre o edificio ou o servidor do programador porque estes son xestionados polo comando create-react-app.
- En React, debe observarse unha estrutura de cartafoles fundamental.
- Non é posible formatear o código automaticamente, aínda que é posible facelo manualmente.
Conclusión
Hoxe en día, un parque infantil de codificación como os que vimos arriba pódese utilizar para construír completamente calquera proxecto web. Non é necesario instalar IDE engorrosos no teu PC cando podes construír, depurar, probar e implementar directamente desde o teu navegador web.
Na miña opinión, StackBlitz sería o mellor entre eles porque é un IDE baseado na web que permite JavaScript, Angular e outros proxectos de desenvolvemento desde a caixa, sen necesidade de instalar ningún contorno de desenvolvemento local como Node.js, npm, etc. ou Angular. Ofrece a mesma experiencia que usar Visual Studio Code localmente. En realidade, porque StackBlitz está dirixido por Visual Studio Code, parece tan rápido e versátil como a versión de escritorio.
Cal de CodePen, CodeSandbox e StackBlitz é a túa ferramenta preferida? Avísanos nos comentarios.
Abbatyya
Grazas por este gran artigo, unha vez que vin stackblitz.com, sei que isto é o que quero.