Migrando nuestra web a Ember.js

En Enjambre Bit estamos apostando por Ember.js, uno de los mejores frameworks para desarrollar aplicaciones web, y por eso decidimos migrar nuestra web por completo a esta tecnología.

En este artículo nos gustaría resumir el proceso de migración, cómo re-implementamos la web por completo, qué nos llevó a realizar la migración y la puesta en marcha en gitpages, que incluyen integración continua y deploys automáticos en travis.

web

¿Por qué?

En Enjambre Bit nos encanta la tecnología, aprender y mejorar constantemente, pero más nos gusta profundizar procedimientos para entregar software de buena calidad en menor tiempo, iterar y tener un proceso estable, con tests y confiable.

Así que nos pareció buena idea adaptar nuestra propia web para integrarla de la misma forma en la que desarrollamos aplicaciones: almacenarla en un repositorio, mejorarla constantemente, escribir test y automatizar deploys.

Modularización de contenidos

Anteriormente nuestro sitio estaba creado utilizando exclusivamente HTML y
JavaScript, pero sin usar frameworks o sistemas de templates. Esto es ideal para sitios pequeños, y era super válido para nuestra web inicial, pero esa estructura se vuelve algo compleja de administrar cuando un sitio comienza a crecer.

Así que pasar a Ember.js ya nos dio buenas recompensas desde el principio, pudimos descomponer gran parte del sitio en partes más pequeñas, como plantillas, componentes y rutas.

Por ejemplo, el slider inicial pasó a ser un simple componente que llamamos "enjambre-slider":

html-slider

Lo mismo con las cabeceras de secciones, donde antes teníamos un bloque html que se repetía en cada sección, pasamos a tener una llamada a un componente "enjambre-section":

antes-despues

Imagina que cada componente nos permite concentrarnos en los detalles en un solo lugar, y hace el contenido completo del sitio sea mucho más liviano y fácil de explorar.

El código en un solo lugar

La primer tarea de la migración consistió en llevar todo el código de la web a un repositorio en github:

url

De esta forma todo el equipo puede aportar código o realizar consultas en la sección issues, es muy sencillo replicar el entorno de desarrollo y ponerse a realizar modificaciones.

Algo interesante de github es que además incorpora una plataforma de publicación llamada gitpages, que permite publicar sitios estáticos de manera práctica y sencilla.

Deploys automáticos

Algo que buscamos en la migración es simplificar el sistema de deploy, para eso configuramos el repositorio de github con travis.ci, el servicio de integración continua de github:

travis-welcome

hooks

Mediante travis, tenemos garantizada la ejecución de todos los test del proyecto (por cada commit), y el deploy automático a gitpages cada vez que publicamos un tag nuevo.

Configurando travis.ci

La integración con travis es muy sencilla, inicialmente no se necesitan muchas cosas, ya que ember-cli genera el archivo travis.ci por nosotros y el resto de la integración se hace directamente desde la web.

Lo único que requiere algo de trabajo adicional es automatizar deploys, porque necesitamos entregarle a travis permisos para escribir en nuestro repositorio en el branch gh-pages, donde gitpages va a servir archivos.

Para esto necesitamos conseguir un token desde github, ingresando a la sección tokens en las preferencias de usuario:

tokens

Nos tenemos que asegurar de crear el token y luego integrarlo en nuestro archivo .travis.yml con este comando:

travis encrypt -r EnjambreBit/website GITHUB_TOKEN=e7c68f294b[etc...]  --add  

Ten en cuenta que al usar el comando encrypt, se va a modificar el archivo .travis.yml automáticamente, almacenando nuestro token de acceso de forma segura, bajo cifrado.

Listo, ahora con el comando ember release podemos iniciar el deploy a gitpages:

release_desde_ember

Conclusiones

Creemos que pasar nuestra web a Ember.js es un gran paso, no solo porque nos permite simplificar y mejorar la estructura de la web por completo, sino porque también nos permite trabajar en grupo, hacer mejoras rápidamente e ir ejercitándonos sobre Ember.js y las herramientas que lo rodean.