BLOG

Publicado el: 30 - dic - 2018 Categorías: Javascript

Qué es StackBlitz y cómo trabajar con ES6, AngularJS o ReactJS

En el mundo del desarrollo web compartimos a diario código con editores online como CodePen o JSFiddle. Hace algo más de año y medio que StackBlitz publicó su primer commit en GitHub, y no quería que pasara 2018 sin hablar de esta herramienta.

StackBlitz es un editor de código online muy parecido en su estética a Visual Studio Code de Microsoft, es más os costará encontrar diferencias (por algo será) ;) Su sencillez y su foco en trabajar con tecnologías basadas en lenguaje JavaScript me ha enamorado.

Hace ya tiempo que lo llevo siguiendo de muy de cerca y, aunque realmente todavía no he podido ponerlo en práctica en un proyecto real de cliente si que, he tenido la oportunidad de hacer varios test personales trabajando tanto en JavaScript ( ECMAScript 6 ) sin framework como con AngularJS o ReactJS y os puedo decir que es uno de los más cómodos que he encontrado.

Cómo trabajar en un proyecto con StackBlitz

Desde su página principal nos proporciona una serie de opciones para poder crear un proyecto desde cero, ya sea de JavaScript sin framework o por ejemplo con AngularJS, ReactJS e incluso Ionic entre otros. :)

StackBlitz-1

Al pulsar por ejemplo en la opción de ReactJS podemos comprobar que de forma automática nos abre un editor de código con visualización en tiempo real que nos permite trabajar en un proyecto de la forma más fácil que he visto hasta la fecha sin tener que instalar nada en local ni tener dependencias propias de NPM.

StackBlitz-2

A mi parecer y hasta la fecha de hoy, si queréis trabajar en un proyecto pequeño, realizar prototipos, hacer test de código, compartir código con otros developers es una solución muy eficiente y estable, pero no para proyectos complejos.

Deficiente integración con GitHub y proyectos con y sin Framework

Nos comentan desde su página de documentación que podemos enlazar la url de nuestros repositorios de GitHub con el editor, y que está preparado para proyectos AngularJS y ReactJS, pero mis test no han sido tan satisfactorios como esperaba.

En un primer test he creado un proyecto JS básico en el que tan sólo tenía un index.html y un index.js con el que agrego un “hello” en la vista. Como era de esperar StackBlitz no lo interpretó correctamente y lo primero que me pidió fue un archivo package.json para poder interpretar el proyecto, aún así no funcionó y me alerta de que tan sólo funciona con proyectos AngularJS :| . (os dejo captura de pantalla y enlace a la rama de GitHub donde lo tengo)

StackBlitz-3

StackBlitz-4

https://github.com/JoseJPR/tutorial-stackblitz-javascript-angularjs-reactjs/tree/es6

El segundo test lo realicé con un proyecto AngularJS, el cual cree en local mediante el CLI y lo subí al una rama del repositorio GitHub concreta. En este caso tampoco funcionó correctamente mostrando errores en la propia consola de StackBlitz. (os dejo captura de pantalla y enlace a la rama de GitHub donde lo tengo)

StackBlitz-5

https://github.com/JoseJPR/tutorial-stackblitz-javascript-angularjs-reactjs/tree/angularjs

Y un tercer y último test fue con ReactJS, con el que hice lo mismo, cree mi proyecto en local y lo subí en una rama concreta del repositorio, al enlazarlo con el editor aprecio que la integración con el visualizador online que tiene no termina de funcionar aunque no aparecen errores en consola. (os dejo captura de pantalla y enlace a la rama de GitHub donde lo tengo)

StackBlitz-6

https://github.com/JoseJPR/tutorial-stackblitz-javascript-angularjs-reactjs/tree/reactjs

Todo no es tan bonito

Actualmente el editor tiene una falta muy grande, a mi parecer, y es que aún no tiene una correcta integración con repositorios como GitHub, Bitbucket o Gitlab. Esto hace que cuando nuestro proyecto esté creado y tanto nosotros como nuestro equipo esté trabajando no podremos crear repositorios, ramas y demás pudiendo tener versionado nuestro proyecto, pero todo se andará.

El futuro de StackBlitz

La idea que tienen es conseguir una integración correcta con GitHub y poder añadir otros frameworks JS del mercado como puede ser el caso de VUE.js

Espero que os haya gustado este artículo y nos vemos en el 2019! :)

Deja tu comentario

Debes estarlogueado para comentar.

RT @ionicspain: Do you love #JavaScript and its ecosystem (#NodeJS, #Preact, #React, #Vue, #Angular & more) Want to visit #Barcelona? Atten…12:47 PM Jan 15th