StackBlitz: IDE en línea para Angular & React con tecnología de Visual Studio Code

¡Después de seis meses de arduo trabajo, estoy emocionado de anunciar finalmente StackBlitz! Puede verlo ahora en https://stackblitz.com

StackBlitz es un IDE en línea donde puede crear proyectos de Angular & React que están inmediatamente en línea y se pueden compartir a través de un enlace ... con solo un clic. Automatically Se encarga automáticamente de instalar dependencias, compilar, agrupar y recargar en caliente a medida que escribe:

Actualmente admitimos la creación y exportación de aplicaciones angulares (basadas en @ angular / cli) y las aplicaciones React (basadas en la aplicación create-react-app) con soporte para aterrizaje de plantillas personalizadas y Vue en breve.

¿Por qué?

No hay mayor emoción que tener que configurar herramientas de implementación y construcción antes de que pueda comenzar a desarrollar un prototipo o demostración genial.

Vjeux identificó originalmente este problema en su desafío por la mejor configuración de creación de prototipos de aplicaciones Javascript y diseñamos intencionalmente StackBlitz para completar (y en muchos aspectos exceder) los requisitos de su desafío.

StackBlitz se siente y funciona exactamente como su entorno de desarrollo local.

La experiencia de edición de vanguardia de VS Code, ahora en su navegador. 🛠

Las terminaciones inteligentes de Intellisense (con definiciones de tipo de npm), Búsqueda de proyectos (Cmd + P), Ir a definición y otras características clave del Código VS "simplemente funcionan" de fábrica:

Instalar y usar paquetes de NPM

Importar bibliotecas es una parte crítica y común del desarrollo de aplicaciones. Es por eso que StackBlitz incluye un cliente npm en el navegador que admite la instalación de múltiples paquetes a la vez y versiones específicas (por ejemplo: react react-dom redux@3.7.2)

También puedes copiar y pegar fragmentos de código de documentos / blogs / etc. en el editor y detectará automáticamente los paquetes que te faltan

¿Cómo se instala tan rápido? En lugar de descargar y extraer tarballs completos como normalmente hacen npm & yarn, su navegador descarga de manera inteligente solo los archivos que su aplicación necesita de Unpkg a pedido.

Vista previa y depuración en una ventana separada, tal como lo hace localmente 🖥

Diga adiós a los parques infantiles en línea de iframes janky que lo obligan a usar Cada proyecto StackBlitz obtiene su propia URL única donde puede obtener una vista previa y depurar en vivo (¡con recarga en caliente!)

No incluimos intencionalmente ningún código ruidoso (como llamadas de análisis) en la URL de su aplicación en vivo, por lo que las pestañas de su consola y red siempre reflejan solo lo que su aplicación está haciendo

Sigue editando, incluso si te desconectas

StackBlitz utiliza Progressive Web App API para ejecutar un servidor de desarrollo en vivo en el navegador, para que pueda seguir codificando si está en un avión, en un tren o en el asiento trasero Uber-ing bajo la lluvia (!):

Importe archivos y carpetas existentes simplemente arrastrándolos y soltándolos en el editor

No más comandos de copiar + pegar, cargar o git. Su navegador analiza inmediatamente los archivos y carpetas locales y vuelve a agrupar su proyecto en un abrir y cerrar de ojos:

Compartir e incrustar

Cada proyecto se puede compartir con otros para ver / bifurcar y también viene con una vista de inserción revolucionaria que pone todo el poder de VS Code en sus artículos, publicaciones de blog y documentos de Medium.

Descargar y ejecutar localmente

Al hacer clic en el botón "Exportar", se descargará un archivo ZIP de su proyecto configurado para ejecutarse con create-react-app o @ angular / cli (para proyectos React y Angular, respectivamente)

Tus aplicaciones siempre están en línea

Sus aplicaciones nunca se suspenden y no tienen límites de ancho de banda. ¡Comparte la URL con tantos amigos, colegas y comunidades como quieras!

Editar aplicaciones tanto pequeñas como grandes

StackBlitz es el único entorno en el navegador que puede manejar la edición en vivo "la madre de todas las aplicaciones de demostración": RealWorld (ver las implementaciones React y Angular). TodoMVC, una de las aplicaciones de demostración más populares, también funciona sin problemas.

El futuro es brillante ️

Tenemos un montón de características increíbles que vienen en camino (soporte de plantillas personalizadas / Vue, importación / exportación desde GitHub, recarga en vivo de OTA a través de dispositivos, capacidad de descubrimiento / características sociales, etc.) y estamos trabajando en el código abierto de tecnología StackBlitz. ! Puedes seguir nuestro progreso en nuestro repositorio de Github.

No podemos esperar a escuchar sus comentarios sobre StackBlitz; no dude en enviarme un tweet a @ ericsimons40 o @stackblitz con cualquier pregunta, comentario, ideas, etc. :)

Un agradecimiento especial

Nada de esto hubiera sido posible sin el increíble trabajo realizado por Guy Bedford en SystemJS y por Michael Jackson en el servicio Unpkg CDN. Estas son las dos tecnologías clave que realmente nos permitieron empaquetar toda la funcionalidad dentro de su navegador web prácticamente sin participación del lado del servidor.

También nos gustaría agradecer al equipo de VS Code por su increíble editor: ¡❤ Microsoft!

Finalmente, muchas gracias a mis mejores amigos y co-creadores de StackBlitz @iamalbertpai y @clayschneider que trabajaron incansablemente conmigo para construir este increíble proyecto ❤

¡Adelante!