Descubriendo Aurelia.

Este año me embarqué en la aventura de conocer Aurelia, un framework Javascript todavía poco conocido en España. Hace unos meses aceptaron mi C4P en el JSDay Canarias 2018 y no podía estar más contenta, es un evento con un alto nivel de ponentes y con una organización impecable. Sin embargo por temas de salud, me es imposible asistir como ponente y por ello me he decidido a recopilar en este post la información que iba a compartir con los asistentes.

Aurelia nace con la idea de ser un framework que solucione problemas habituales que se encuentran los desarrolladores y de esta forma, convertir el desarrollo de aplicaciones en algo sencillo. Para cumplir esta premisa, se centran en que podamos olvidarnos de la configuración del framework, o de problemas con el data binding, es por ello que Aurelia viene con una variedad de plugins que te ayudan en diversas situaciones.

Además para alcanzar este objetivo se basa en “Convention over Configuration”, y os preguntaréis ¿en qué se traduce esto? Pues simplemente que a la hora de crear componentes, si el archivo Javascript se nombra igual que el archivo HTML, Aurelia los mapea automáticamente sin necesidad de archivos de configuración.

También nos ofrece opciones más avanzadas como la capacidad de implementar métodos de ciclo de vida en los componentes. Estos métodos son invocados por Aurelia en el momento adecuado, permitiéndote un control específico sobre diferentes pasos del ciclo de vida de un componente. Algunos de estos métodos son: Created, Bind, Attached, Detached y Unbind.

Con respecto al “data binding”, Aurelia te permite tener varios tipos de acciones: one-time (del modelo a la vista, sólo una vez), to-view (viaja del modelo a la vista, múltiples veces), from-view (de la vista al modelo, múltiples veces), two-way (en ambas direcciones) y bind (que elige automáticamente el mejor tipo a utilizar).

Otro de los puntos de los que los creadores de Aurelia están muy orgullosos es del Routing. La forma de implementar un enrutamiento es muy simple, con el siguiente código en el app.ts:

Y el siguiente código para crear el menú de navegación ya lo tendríamos funcionando:

También disponen de una opción para gestionar las rutas desconocidas: config.mapUnkownRoutes.

Otras de las ventajas que posee es que permite extender HTML, para crear componentes personalizados y con un buen rendimiento y además tiene módulos específicos para testing, con un contenedor de inyección de dependencias potente, que mejora gratamente el testing. Por último, el desarrollo con Aurelia puede hacerse tanto en TypesScript como en ECMAScript.

Todas estas ventajas son las que definen al framework y que nos podemos encontrar en los distintos foros. Mi opinión personal tras unos meses utilizándolo en mis Pet Projects es que aunque es un framework potente, el que no sea todavía muy usado dificulta mucho el desarrollo, porque evidentemente no hay mucho soporte en internet y los recursos con información son limitados. Tiene una comunidad muy involucrada pero a veces resulta difícil encontrar ayuda para los problemas.

Yo recomendaría antes de comenzar a trabajar con él, no sólo leyeras la documentación de la página oficial sino también echarle un vistazo al libro: “Hands-On, Full Stack Web Development with Aurelia” de Diego Jose Argüelles Rojas y Erikson Haziz Murrugarra Sifuentes. Es un libro muy completo que explica paso a paso como crear un proyecto.

En mi Github además podéis encontrar también un par de proyectos personales desarrollados con esta tecnología (AfayaBio y STEM Trivial) y dentro de la carpeta Documents de ellos encontraréis un pdf en el cual voy detallando a modo de diario los pasos que seguí para realizar la aplicación.

No obstante os resumo un poco los pasos más importantes que yo seguí este verano:

PASO 1. INSTALAR AURELIA CLI

Al igual que otros frameworks nos ofrece una herramienta que mediante consola nos facilita la creación de la estructura básica de un proyecto. Es importante tener instalado el Node en el portátil y una vez hecho esto, lo siguiente es instalar Aurelia CLI:

npm install -g aurelia-cli

Una vez realizado el proyecto se crea con el siguiente comando:

Mostrará más preguntas para permitirte ir configurando la aplicación con la arquitectura que se desee.

El resultado final es un proyecto con la siguiente estructura:

PASO 2. CREACIÓN DE COMPONENTES.

Para crear componentes basta con crear dos archivos: uno .ts y otro .html con el mismo nombre y como he comentado anteriormente, Aurelia ya los entiende como parte de un componente. Además en el app.tsañado el enrutamiento como mostré anteriormente.

PASO 3. CREACIÓN DE MODELOS.

Yo me suelo crear una carpeta denominada models en la que introduzco los modelos que voy a utilizar en las vistas, siendo un modelo ni más ni menos que una clase donde detallas los atributos que necesitas:

PASO 4. CODIFICACIÓN DE LOS SERVICIOS.

La lógica yo la agrupo en los servicios y los recojo todos en una carpeta denominada Services. La peculiaridad que yo me he encontrado durante el desarrollo de los servicios es que, a pesar de que Aurelia tiene Observables como otros framework, a mí me han dado muchos problemas, así que las llamadas a las APIs las implemento de la siguiente forma:

PASO 5. CODIFICO EL HTML DE LOS COMPONENTES

Aquí Aurelia tiene una sintaxis propia, similar a Angular para diversas funcionalidades pero no idéntica, por lo que el paso de un framework a otro es relativamente sencillo pero tienen sus particularidades.

PASO 6. CODIFICACIÓN DEL ARCHIVO TS DE LOS COMPONENTES.

En este archivo se introduce la lógica relacionada con la vista, aunque yo siempre intento que la lógica más “pesada” vaya a los servicios. De nuevo se parece mucho a otros frameworks, ya que mayormente es usar TypeScript para realizar las operaciones que queramos:

PASO 7. AÑADO EL CSS.

En este punto se puede utilizar tanto Sass como Less o simplemente el css más simple como es mi caso, ya que no me quise complicar mucho (ya estaba llegando el verano a su fin).

Al final conseguí una aplicación web que reunía varias funcionalidades que yo quería recopilar. La parte backend la desarrollé en .Net Core 2.0 ya que deseaba probar las novedades que ofrecía, pero se podría hacer en cualquier lenguaje o incluso en Node.JS para ya tenerlo todo en Javascript.

Por último quedaría compilarlo para PROD, lo cual se realiza con el siguiente comando:

au build --env prod

Esto nos generaría dos archivos: app-bundle.js que contiene nuestro código y vendor-bundle.js que contiene las dependencias a librerías de terceros.

O si simplemente lo queremos ejecutar en local:

au run --watch

Espero por un lado, haberte animado a por lo menos probarlo y compararlo. Es un gran framework aunque todavía está muy verde para temas empresariales (de hecho yo trabajo con Angular 6).Y también que este documento te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin