Trabajando en un proyecto complejo, ya sea que sea un programador experimentado o un estudiante de primer año, es muy probable que se encuentre con problemas. Cuando divide su proyecto en muchos módulos, surgen problemas, lo que hace que sea más difícil rastrear errores y encontrar soluciones. En otras circunstancias, la depuración de instancias individuales puede ser difícil porque no ha descubierto la solución adecuada para el problema en el que ha estado trabajando.
Ocasionalmente, también aparece como una pieza de código, lo que puede parecer complejo en ese momento. JavaScript es uno de los lenguajes basados en la Web que es extremadamente fácil de aprender. Simplemente inicie su navegador de escritorio y navegue hasta Herramientas de desarrollador (generalmente F12), ¡y listo! Luego puede experimentar con JS sin necesidad de instalar o ejecutar ningún software complicado.
Para comenzar, todo lo que necesita es un navegador. Es maravilloso tener toda esta simplicidad desde el primer momento, pero hay ocasiones en las que necesita más. Por ejemplo, suponga que desea experimentar con una nueva API web que descubrió recientemente pero que no desea iniciar un nuevo proyecto.
En esta publicación, compararemos y contrastaremos los tres juegos JS más populares, CodePen, CodeSandbox y StackBlitz. ¡Empecemos!
CodePen
Las herramientas de desarrollo web front-end siempre están evolucionando, y los editores de texto son un componente importante de las últimas tecnologías que simplifican la vida de un desarrollador. Además de los editores de texto independientes como Atom o Notepad ++, en los últimos años ha habido una explosión de editores basados en navegador que no requieren la instalación de programas y promueven una mayor colaboración.
CodePen es una "comunidad en línea para probar y presentar fragmentos de código HTML, CSS y JavaScript creados por el usuario" que ofrece fantásticas oportunidades para aprender a escribir mejor páginas web frontend.
CodePen le ofrece dos "modos". El primero y más utilizado es el Pen. Es tan simple como hacer clic en un botón y ser transportado directamente al editor. Desde allí, puede acceder a un panel de vista previa, así como a ventanas de edición básicas de HTML, CSS y JS.
No hay "sistema de archivos", "IntelliSense" ni nada más, solo resaltado de sintaxis simple y comandos rápidos como embellecer. En la pestaña de opciones, puede seleccionar entre una gama restringida de preprocesadores para los tres idiomas (como TypeScript para JS) o agregar conexiones a fuentes externas.
Si solo necesita hacer algo de forma gratuita, cualquiera de los editores será suficiente. Sugeriría CodePen para cualquier cosa que no requiera mucha configuración o bibliotecas, simplemente HTML, CSS y JS con preprocesadores opcionales en la parte superior. Si desea utilizar el patio de recreo para mejorar su presencia en las redes sociales o desarrollar una cartera personal, CodePen es una mejor opción.
Versión premium
Tiene algunas alternativas más para seleccionar en CodePen. Si paga anualmente, puede obtener uno de los tres planes premium por $ 12, $ 19 o $ 39 cada mes. Puede crear una cantidad infinita de bolígrafos, publicaciones y colecciones privadas en cualquiera de los tres niveles.
También recibirá la insignia Pro (un impulso social), acceso al modo de colaboración en vivo, sin publicidad y más. También hay ciertas estrategias específicas del equipo y otras distinciones entre niveles. Consulte su tablón de facturación oficial para obtener más información.
Principales Caracteristicas
Además de crear HTML, CSS y JavaScript en CodePen, hay algunas cosas más que lo distinguen.
- La visualización en tiempo real de su código es posible. No requiere compilación.
- Experimentar te permite aprender cosas nuevas.
- Cree pequeños casos de prueba para buscar y abordar problemas.
- Muestra tus maravillosas obras.
- Cree y almacene Bolígrafos para su uso posterior.
- Pruebe el código de otros desarrolladores y véalo en acción.
Ventajas
- Para empezar, no tiene costo.
- Recursos de aprendizaje integrados.
- Colabore con otros y compare proyectos para ver a dónde pueden ir en el futuro.
- La interfaz de usuario es fácil de usar y directa.
Desventajas
- La biblioteca de código es pequeña, la finalización automática del código es inadecuada. Es bueno para proyectos de una página y no puede manejar nada más grande.
- En CodePen, puede crear bolígrafos privados, pero deberá actualizar a una membresía Pro ($ 9 / mes).
Código Caja de arena
CodeSandbox es un editor de código basado en la web. Automatiza la gestión de la transpiración, el empaquetado y la dependencia para usted, lo que le permite crear un nuevo proyecto con un solo clic. Después de haber creado algo fascinante, puede compartirlo con otros simplemente compartiendo el sitio web.
El editor es compatible con cualquier proyecto de JavaScript, aunque incluye ciertas características específicas de React, como la opción de guardar el proyecto en una plantilla de crear-reaccionar-aplicación.
Cualquier proyecto que cree en CodeSandbox comienza con una plantilla. Puede relacionarse con una biblioteca, un marco o un tiempo de ejecución específicos (incluido Node.js) o utilizar simplemente tecnologías web estándar. Después de seleccionar una plantilla, se le envía al editor, donde encontrará todos los archivos necesarios y la ventana de vista previa ya abierta.
Tiene acceso a un "sistema de archivos" en todos los Sandboxes, lo que significa que puede crear nuevos archivos, utilizar módulos (incluidos los paquetes NPM) e interactuar con activos estáticos. También existe la oportunidad de modificar los archivos de configuración específicos de la plantilla.
Incluso puede construir sus propias plantillas para su caso de uso único, con estructura de archivos y dependencias, como en un IDE. Debido a que la herramienta está vinculada a Github, puede generar confirmaciones y abrir relaciones públicas rápidamente. Puede implementar su aplicación en ZEIT o Netlify de inmediato.
CódigoSandbox Team Pro
CodeSandbox, una empresa holandesa que permite a los desarrolladores construir un entorno limitado de desarrollo de aplicaciones web basado en navegador, ha lanzado oficialmente una plataforma de colaboración que permite a los equipos trabajar en código en la nube. El nuevo producto, Team Pro, es una solución sin código creada para equipos completos de productos, desde diseñadores y gerentes hasta equipos de control de calidad (QA) y más.
Los proyectos se proporcionan en una interfaz fácil de usar para cualquier persona que desee realizar o aceptar cambios en una aplicación web, evitando métodos alternativos como enviar notas y recomendaciones a los desarrolladores para que ejecuten los cambios, devolverlos para su discusión y repetir el proceso.
Principales Caracteristicas
- Un editor de código basado en web y una herramienta de prototipo.
- Para uso local, se puede descargar fácilmente un sandbox en un archivo zip.
- Programación se realiza en cajas de arena, que se pueden compartir fácilmente con los compañeros de trabajo.
Ventajas
- Una experiencia de usuario mejorada y un mayor control sobre el editor.
- La función de vista previa en vivo se puede modificar y ver en una ventana separada.
- El código se formatea automáticamente e incluye una CLI (codesandbox-cli)
- Compatibilidad con módulos npm avanzados.
- Bonitos mensajes de error con recomendaciones.
- Mejora la experiencia de depuración al proporcionar una mejor terminal, un visor de prueba y un visor de problemas.
Desventajas
- El consumidor final está expuesto a muchas personalizaciones.
- Arrastrar y soltar archivos desde una computadora local no funciona correctamente.
- Se debe seguir una determinada estructura de carpetas en CodeSandbox.
- La funcionalidad de un sandbox privado solo está disponible para los usuarios.
ApilarBlitz
StackBlitz es un IDE en línea basado en Visual Studio Code para aplicaciones web. La plataforma es tan receptiva y adaptable como la versión de escritorio. StackBlitz es un IDE en línea que viene precargado con angular y reaccionar herramientas de desarrollo.
Thinkster.io creó ese fantástico proyecto para que sea lo más simple posible comenzar con su proyecto Angular o React sin tener que preocuparse por la instalación de dependencias o la configuración de compilación. StackBlitz ofrece muchas características sorprendentes y únicas que ningún otro editor de código en línea tiene en este momento. Como resultado, vale la pena investigar más a fondo StackBlitz y descubrir lo que este IDE en línea tiene para ofrecer.
Stackblitz es extremadamente comparable al IDE completo, especialmente si no puedes despedirte del código VS porque la herramienta se basa en él. El paquete tiene una variedad de funciones que le permiten comenzar y continuar creando una aplicación de pila completa.
El programa funciona con Visual Studio, que es muy conocido entre los desarrolladores. La edición sin conexión es la característica más destacada del proyecto. Para que esto sea posible, el equipo de Stackblitz creó un servidor web en el navegador. A medida que escribe, automáticamente instala dependencias, compila, agrupa y realiza recargas en caliente.
Versión premium
Cadet, Astronaut y Commander están disponibles de forma gratuita, $ 8 / mes y $ 29 / mes, respectivamente. Astronaut and Commander incluye una serie de características como proyectos privados ilimitados, cargas de archivos ilimitadas, invitación al canal de Slack del equipo central, etc. Para más información, consulte el tablón de facturación oficial.
Principales Caracteristicas
- Agregar paquetes NPM a su proyecto.
- Gracias a un novedoso servidor de desarrollo en el navegador, puede editar sin conexión.
- Una URL de aplicación alojada que nos permite acceder (y compartir) nuestra aplicación en vivo en cualquier momento.
- Otras características notables de Visual Studio Code incluyen Intellisense, Project Search (Cmd/Ctrl+P), Ir a definición y otras.
Ventajas
- Las capacidades de Firebase para la implementación.
- El editor es realmente fácil de usar y extremadamente rápido.
- Los usuarios tienen acceso a package.json, index.html e index.js.
- Código fuente compartible que también se puede incrustar.
- Vista previa en vivo en una gran sección de la página, con la opción de abrir en una página diferente si es necesario.
- Sin conexión, edición
- Terminaciones inteligentes e Intellisense mejorado.
- El núcleo de Stackblitz es de código abierto.
Desventajas
- No tiene influencia sobre el edificio o el servidor del desarrollador porque estos son administrados por el comando create-react-app.
- En React, se debe observar una estructura de carpetas fundamental.
- No es posible formatear el código automáticamente, aunque es posible hacerlo manualmente.
Conclusión
Hoy en día, un patio de juegos de codificación como los que hemos visto anteriormente se puede utilizar para construir completamente cualquier proyecto web. No hay necesidad de instalar IDE engorrosos en su PC cuando puede compilar, depurar, probar e implementar directamente desde su navegador web.
En mi opinión, StackBlitz sería el mejor entre ellos porque es un IDE basado en la web que permite JavaScript, Angular y otros proyectos de desarrollo listos para usar, sin necesidad de instalar ningún entorno de desarrollo local como Node.js, npm, o Angular. Proporciona la misma experiencia que usar Visual Studio Code localmente. En realidad, debido a que StackBlitz está impulsado por Visual Studio Code, se siente tan rápido y versátil como la versión de escritorio.
¿Cuál de CodePen, CodeSandbox y StackBlitz es su herramienta preferida? Háganos saber en los comentarios.
Abbatyya
Gracias por este gran artículo, una vez que vi stackblitz.com, sé que esto es lo que quiero.