¿Qué es Aurelia.JS? Introducción y primeros pasos

Tengo que confesar que cuando escuché por primera vez el nombre de Aurelia no tenía claro de lo que se iba a tratar en aquella charla pero fue de lo más interesante. Razón por la que horas después me encontraba delante de mi ordenador haciendo horas en la noche para entender qué es lo que tenía enfrente, tenía una enorme curiosidad por conocer sus posibilidades. Esto fue dos años atrás, durante la JSDay Canarias 2018 y así comenzaron mis primeros pasos con Aurelia a base de “trastear” en la habitación de un hotel.

Aurelia JS es un moderno framework de JavaScript para usar usado para potenciar el front-end de nuestras aplicaciones para navegador, dispositivos móviles y de escritorio basados en estándares web abiertos marcados por la W3C. Cuenta con una arquitectura no monolítica con una colección de módulos más orientados funcionalmente que nos ayudan a crear aplicaciones web simples y ofreciendo un gran rendimiento al estar más cerca de las API nativas y tiene muy poca abstracción.

Todos estos módulos permiten hacer todo lo que necesitamos para crear una aplicación web moderna. Sus vistas son HTML, sus modelos de vista son Javascript (o TypeScript) y el modelo de componentes de Aurelia se basa en las Plantillas HTML de los Componentes Web de W3C y ShadowDOM, de modo que su código refleja el de un estándar web emergente real.

¿Es difícil aprender a trabajar con Aurelia?

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. Con la cantidad de framework JavaScript disponibles, la decisión de utilizar Aurelia depende de una decisión personal pero también de elementos de usabilidad que nos ayudan en nuestra elección. En ese sentido Aurelia utiliza sintaxis de clase EcmaScript 6 y otras características que nos ayudan a percibir una curva de aprendizaje considerablemente menor que otros marcos de desarrollo.

Si bien puede que para algunos desarrolladores front-end ES6 pueda resultar extraña pero para aquellos que vengan de tener experiencia trabajando con lenguajes como Java o PHP notarán algunas similitudes y aprenderán sus fundamentos muy rápidamente.

De hecho lo que encontramos en Aurelia es algo opuesto a la empinada curva de aprendizaje en AngularJS, como por ejemplo su sintaxis de abstracción HTML extraña y la forma en que realmente se define y configura una aplicación.

La documentación tal como está es excepcional. Es clara, relativamente concisa y posiblemente más fácil de seguir que la “pesadilla” de Angular con una documentación que incluso confunde a profesionales de vez en cuando.

Ventajas y características:

  • Arquitectura moderna. En lugar de adoptar el enfoque del marco monolítico, Aurelia se compone de módulos más pequeños, enfocadas.
  • Amplio soporte de lenguajes: El desarrollo de nuestro proyecto con Aurelia puede hacerse tanto en TypesScript como en ECMAScript.
  • Solución todo en uno: Aurelia te proporciona ya elementos como la inyección de dependencias, templates, enrutamiento, etc.. Que te permiten crear una aplicación rápidamente sin preocuparte de librerías externas. También tiene plugins para internalización, validación, ventanas modales y más cosas.
  • Es un framework con una curva de aprendizaje muy corta y además es muy fácil de integrar con otras librerías o frameworks. También te permite realizar aplicaciones con Vanilla Javascript.
  • Ofrece un databinding adaptativo.
  • Tiene una alta velocidad de renderizado y una gran eficiencia de memoria.

Primeros pasos

Igual que otros framework Javascript posee una herramienta de línea de comandos que ayuda con la agrupación y la estructura, llamada Aurelia-CLI. Para usarla es necesario tener instalado en nuestro PC el Node JS version 4.x o superior. La herramienta facilita mucho la creación de un proyecto inicial encargándose de las dependencias y la principal arquitectura.

npm install -g aurelia-cli

Nota: Antes de continuar, es recomendable ejecutar el comando au -v para asegurarnos que Aurelia CLI se haya instalado correctamente. Debería ver un número de versión mostrado.

Hola Mundo: Empezando con aurelia-cli

Para crear un nuevo proyecto, ejecutaremos el siguiente comando: au new

Tras esto el cliente nos mostrará una serie de preguntas para permitir ir configurando la aplicación con la arquitectura que se desee. La primera pregunta, por supuesto, será nombre de su aplicación. Al final resulta en un árbol de directorios en donde encontraremos la carpeta src en donde trabajaremos más adelante. Pero para nuestro ejemplo no necesitaremos hacer nada más.

Para ejecutar esta aplicación Aurelia, desde la misma carpeta ejecutamos: au run Esto debería mostrarnos una aplicación con el mensaje hello world en un navegador web.

Nota: De forma predeterminada, el servidor de desarrollo de CLI estará disponible en http://localhost:9000.

Creando una lista de tareas con Aurelia JS

Tomando como base el proyecto anterior de ejemplo lo que haremos será crear una aplicación que llamaremos TODO en donde se mostrará una lista de tareas que podemos añadir mediante un formulario simple.

Para comenzar nuestro proyecto necesitamos escribir un poco de código JavaScript, comenzando por definir la clase Todo y su constructor.

En la carpeta src editaremos una serie de ficheros:

todo.js


export class Todo {
    constructor(description) {
      this.description = description;
      this.done = false;
    }
  }

 

A continuación definiremos el código de nuestra aplicación así como los métodos necesarios para crear la lógica relacionada con la vista de nuestra aplicación.

app.js

import {Todo} from './todo';
   
  export class App {
    constructor() {
      this.heading = "Todos";
      this.todos = [];
      this.todoDescription = '';
    }
   
    addTodo() {
      if (this.todoDescription) {
        this.todos.push(new Todo(this.todoDescription));
        this.todoDescription = '';
      }
    }
   
    removeTodo(todo) {
      let index = this.todos.indexOf(todo);
      if (index !== -1) {
        this.todos.splice(index, 1);
      }
    }
  }

 

main.js

import {Aurelia} from 'aurelia-framework';
    
  export function configure(aurelia: Aurelia) {
    aurelia.use.basicConfiguration();
    aurelia.start().then(() => aurelia.setRoot());
  }

El siguiente paso es añadir nuestro componente. 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.

app.html

<template>
  <h1>${heading}</h1>
  
    <form submit.trigger="addTodo()">
      <input type="text" value.bind="todoDescription">
      <button type="submit">Add Todo</button>
    </form>
   
    <ul>
      <li repeat.for="todo of todos">
        <input type="checkbox" checked.bind="todo.done">
        <span>
          ${todo.description}
        </span>
        <button click.trigger="removeTodo(todo)">Remove</button>
      </li>    
    </ul>
   
 </template>

Y por último dejaremos el código HTML de index.html como sigue:

<!DOCTYPE html>
<html>
  <head>
    <title>Todo</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

¿Demasiado simple? Hagamos un pequeño resumen de lo que incluye cada línea:

<script src="scripts/system.js"></script>

Esta etiqueta se usa para cargar SystemJS, un moderno cargador de módulos JavaScript. Localiza los módulos, comprende sus dependencias y garantiza que todo se haya cargado en tiempo de ejecución.

<script src="scripts/config-typescript.js"></script>
 

Esta línea es donde configuramos el lenguaje con el que vamos a trabajar. Apunta a un archivo de configuración de SystemJS, para que el cargador de módulos pueda instalar un transpilador en el cargador.

<script src="scripts/aurelia-core.min.js"></script>

Este es el corazón de Aurelia. Debe agregar este script para usar el marco. Es a través de él que podremos realizar todas las cosas geniales que veremos en esta serie de tutoriales.

System.import('aurelia-bootstrapper');

Esa última línea es un poco diferente. En lugar de "configurar" una propiedad src, hay un código aquí. El objeto SystemJS está siendo proporcionado por el cargador del módulo SystemJS, como se mencionó anteriormente. Aquí llamamos a una de sus API, importar.

Esto es lo que le dice a Aurelia Bootstrapper qué módulo contiene la configuración del marco, así como qué elemento HTML es el host, que "alojará", por así decirlo, la aplicación. Es allí donde se presentará la solicitud.

 

Si todo es correcto al ejecutar nuestra aplicación deberíamos tener como resultado una aplicación web con un sencillo formulario que nos permitirá añadir tareas a una lista.

De Padawan a maestro Jedi con Aurelia

Estoy seguro que tras leer estas líneas ya te pica un poco la curiosidad y quieres conocer más sobre Aurelia JS. Y no podría ser más fácil. Comentaba al comienzo que si algo destaca en Aurelia es por su documentación. Desde su sitio web oficial es posible acceder a una colección de recursos que nos ayudarán no solo en nuestra toma de contacto sino también cada vez que lo necesitemos. Toda la documentación del marco Aurelia puede consultarse aquí y se divide en las siguientes secciones:

  • Visión general : Descubra qué es Aurelia junto con sus ventajas comerciales y técnicas.
  • Tutoriales : Tutoriales paso a paso que muestra cómo crear nuestras primeras aplicaciones Aurelia.
  • Fundamentos : Información general sobre el modelo de aplicación de Aurelia, sus componentes, la inyección de dependencias y más.
  • Binding: Conexión de datos mediante Aurelia.
  • Plantillas: Fundamentos sobre cómo hacer uso de las plantillas que ofrece Aurelia.
  • Routing: Configurar el enrutador de Aurelia.
  • Plugins: Información sobre los complementos oficialmente compatibles de Aurelia y cómo usarlos, incluida la validación, i18n, http, diálogo y gestión de estado.
  • Integración: Cómo integrar Aurelia con otras bibliotecas y marcos.
  • Testing: Pruebas de aplicaciones en Aurelia, incluidas las pruebas de componentes y las pruebas e2e.
  • Server Side Rendering: Información sobre la representación en lado del servidor con Aurelia y cómo configurar nuestro proyecto.
  • CLI: Fundamentos de uso del CLI de Aurelia en nuestros proyectos.
  • Build Systems: Uso de Webpack o JSPM directamente para crear aplicaciones sin la CLI de Aurelia.

Si esto no fuera suficiente hay varios libros disponibles para ayudarnos a comenzar a aprender a desarrollar usando código JavaScript moderno y trabajar con Aurelia:

Conclusión

Aurelia es un framework pensado para hacer las cosas simples, sin mayores complicaciones. Si eres un desarrollador que ya conoce otros lenguajes y está acostumbrado a trabajar en proyectos basados en Java o PHP verás que hay muchas cosa aquí que te sonarán.

Otro detalle importante a destacar de Aurelia es su documentación. Desde su web oficial o en otras webs en Internet es posible encontrar abundante información y ejemplos para poder abordar nuestros proyectos.

Espero que este documento te resultase útil, tanto si ya conocías Aurelia como si este es tu primer contacto. Sin duda es un gran framework aunque habrá quien sostenga que todavía está muy verde para temas empresariales. Aunque en lo personal para pequeños proyectos le daría una oportunidad. Más ahora que ni hace un mes que se ha presentado la última revisión del proyecto con importantes actualizaciones.