En desarrollo web estamos acostumbrados a utilizar editores online para compartir pequeños fragmentos de código a modo de ejemplos, ya sea con compañeros o en StackOverflow, como por ejemplo CodePen y JSFiddle. En Agosto de 2017 apareció un nuevo editor web basado en Visual Studio Code que va más allá y nos permite crear aplicaciones web utilizando los dos frameworks más utilizados para el desarrollo de Single Page Applications ( SPA ), React y Angular.
StackBlitz inmediatamente se convirtió en una herramienta muy popular entre la numerosa comunidad que trabaja con ambos frameworks no sólo por la facilidad para crear una nueva aplicación sino por la sorprendente fluidez y la posibilidad de compartir nuestros proyectos alojados en sus servidores con URLs personalizables. De hecho, la documentación oficial de Angular ahora utiliza StackBlitz para mostrar sus ejemplos, en su tutorial de introducción Tour of Heroes encontraremos un enlace al live example utilizando la versión más reciente del framework donde directamente podemos editar el código y hacer pruebas.
En poco más de un año de vida, StackBlitz alcanzó la cifra de un millón de proyectos gracias a características como las siguientes:
- Es un editor web basado en Visual Studio Code, de hecho, con el navegador en modo pantalla completa pulsando F11, son difíciles de distinguir y hereda algunas de sus características como IntelliSense, barra lateral con vista de explorador y búsqueda, code folding, ir a definición, etc. Lo que, unido a la fluidez con la que funciona y la facilidad para utilizar nuestro código existente, ya sea cargando nuestros ficheros por drag-and-drop o desde GitHub, le convierten en un editor magnífico siempre disponible en cualquier plataforma donde tengamos acceso a un navegador web.
- Se pueden añadir librerías externas de manera casi inmediata, para ello han desarrollado un nuevo cliente NPM llamado Turbo que se ejecuta en el navegador y que a diferencia de NPM o Yarn sólo descarga los ficheros que necesita la aplicación en lugar de descargar la librería completa con todas sus dependencias en node_modules.La diferencia de velocidad es exponencial, lo que nos da una pista de cómo serán los clientes NPM en el futuro utilizando técnicas de tree-shaking y lazy-loading. En cambio, no es tan robusto como los clientes ya mencionados y en alguna ocasión nos podemos encontrar con problemas al añadir dependencias, pero la enorme diferencia de velocidad compensa de sobra en una herramienta de creación/edición rápida de aplicaciones web.
- Se pueden cargar directamente aplicaciones creadas con Angular CLI o create-react-app desde un repositorio de GitHub, simplemente indicando una URL con el siguiente formato: stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME} y cualquier cambio que se realice en el repositorio se refleja en el proyecto de StackBlitz, de tal manera que podemos utilizar GitHub como hasta ahora para alojar nuestros repositorios y ejecutar la aplicación desde cualquier dispositivo sin necesidad de descargar el proyecto, obtener las dependencias con NPM/Yarn, etc.Por ejemplo, así se carga desde GitHub una demo de @angular/material, y si queremos cargar la web sin el editor sólo tenemos que utilizar la URL del navegador embebido que además se puede personalizar.
- Ahora StackBlitz, además de alojar nuestras aplicaciones sin límite de ancho de banda, también ofrece una manera muy sencilla de desplegarlas en Firebase Hosting como un subdominio de firebaseapp.com.Estos son algunos de los posibles escenarios en que StackBlitz nos puede ayudar:
- Creación rápida de ejemplos/prototipos para enseñar alguna funcionalidad o mostrar algún error y compartirlo con los compañeros o en StackOverflow, en cuyo caso otro desarrollador puede editarlo al instante para corregir el error y volver a compartir la URL con la solución.
- Como herramienta para practicar con las últimas versiones de Angular o React, incluso tiene una opción en las dependencias para obtener la última versión de todas las librerías del proyecto. También tiene plantillas para Ionic, TypeScript o JavaScript ( ECMAScript 6 ) y la intención es añadir en el futuro la opción de Vue.js, pero a día de hoy no es posible.
- También se puede utilizar para practicar con librerías externas, gracias a la rapidez de su cliente NPM podemos cargar la última versión de nuestra librería favorita en pocos segundos.
- Como herramienta para poner a prueba los conocimientos de alguien en una entrevista de trabajo o similar, o para que nos comparta un proyecto propio, poder analizar su código y ejecutar el proyecto casi al instante, incluso viendo los cambios en tiempo real.
- Incluso utilizarlo como nuestro entorno para desarrollar y mantener aplicaciones web de tamaño moderado desde la creación hasta el despliegue de la versión de producción en FireBase Hosting, ¿qué herramienta online de creación de páginas web puede competir con tener la última versión de Angular o React al alcance de la mano en pocos segundos y cargar nuestras librerías favoritas también en segundos?
