AngularJS 1.x: Componentizando tus aplicaciones

banner_puzzle

EDIT: En el tiempo que he dedicado este post, Carlos Azaustre ha subido una entrada entera para explicar el taller que dió en la AngularCamp de Barcelona y habla exactamente sobre el mismo tema de una manera mucho más profunda y concisa.

Como tenía bastante avanzado el post he decidido publicarlo, sin embargo, os recomiendo encarecidamente que vayáis al suyo ya que deja todo los conceptos mucho más claros.

Sí, estoy hablando de Angular 1.x, no me he equivocado de framework. No, no me he vuelto loco, voy a componentizar vuestras aplicaciones hecha en AngularJS 1.x con… AngularJS 1.x. ¿Queréis saber cómo? Adelante 🙂

Una de los grandes problemas que veía a Angular2, si venías de AngularJS 1.x, es lo diferentes que son en cuanto al concepto de arquitectura sobre el que giran ambos frameworks.

Si en AngularJS 1.x, Google había optado por permitir una arquitectura orientada a un patrón flexible del tipo MV*. En Angular2 preferían trabajar con jerarquías de componentes. Cómo pude contaros en este post, por el momento se me hacía difícil la posibilidad de migrar una aplicación de AngularJS 1.x a Angular2, sin embargo todo ha cambiado desde que apareció la versión 1.5 de AngularJS.

Si hasta el momento nuestras funcionalidades estaban compuestas por controladores y servicios, a partir de la versión 1.5 por fin contamos con un nuevo elemento en el framework. Me refiero al nuevo método denominado ‘component’.

Entendiendo los componentes

Es cierto que ‘component’ no deja de ser azúcar sintáctico sobre lo que ya conocíamos sobre las directivas, pero como veréis a continuación, la sintaxis de un componente es algo más sencilla que la de una directiva.

Un componente en AngularJS 1.X es un tipo especial de directiva que cuenta con una configuración más simple y más adecuada a la filosofía de estructuras de aplicaciones basadas en componentes. Esto hace que sea más fácil escribir aplicaciones de una forma similar a como los hacen los Web Components (Polymer) o a usar el framework al estilo que lo haría Angular2.

Entre las ventajas de los componentes nos encontramos con que:

  • Son más simples de configurar que una directiva.
  • Promueven el uso de buenas prácticas.
  • Se encuentra optimizados para arquitecturas basados en componentes.
  • Escribiendo este tipo de componentes nos será más fácil migrar a Angular2.

Tenemos que tener en cuenta cuando no deberíamos usar los componentes:

  • Cuando queramos manipular el DOM o añadir eventos. Esto es debido a que las funciones ‘compile‘ y ‘link‘ no están disponibles dentro de su configuración.
  • Cuando necesitemos definir opciones avanzadas como son ‘priority’, ‘terminal o ‘multi-element’.
  • Cuando quieras una registrar una directiva como un atributo o una clase.

Arquitecturas basadas en componentes

Como ya hemos mencionado, los componentes nos ayudan a seguir una estructura basada en componentes. La importancia de orientar nuestros desarrollos hacia este tipo de arquitecturas se basan en que:

  • Los componentes solo tiene control sobre sus propios datos y su vista. Esto hace que, gracias a los componentes, obtengamos instancias de interfaz completamente desacopladas que permitan su reutilización.
  • Los componentes tienen una API pública bien definida: Al final un componente visual se comporta como una función donde se saben sus entradas (parámetros y configuración del componente) y su salida (en esta ocasión HTML generado). Trabajar con sistemas de caja negra donde se saben las entradas y salidas pero no el cómo funciona por dentro el componente, nos ayuda a realizar aplicaciones más mantenibles.
  • Los componentes tienen un ciclo de vida bien definido. Esto nos va a permitir tener un control del componente y nos permitirá realizar ciertas acciones dependiendo del estado en el que se encuentre un componente. Algo con lo que en EmberJS o ReactJS ya contábamos, pero que en AngularJS o no contábamos con ellos o no era nada intuitivo de usar.
  • Una aplicación al final se caracteriza por ser un árbol de componentes: Al final nuestra aplicación basada en componentes de AngularJS se convierte en un árbol donde es mucho más fácil de seguir el flujo y donde se puede ver cómo se integra cada elemento dentro del mismo.

Al turrón

Para seguir explicando un poco cómo funciona esta nueva funcionalidad de AngularJS 1.5 me gustaría haceros un pequeño ejemplo para que viésemos cómo podemos hacer que nuestras aplicaciones estén formadas por medio de una jerarquía de componentes.

Para ello vamos a desarrollar 3 componentes que van a mostrar un listado de álbumes obtenidos de la API de Spotify. Crearemos lo siguiente:

  • Un componente denominado ‘App’ que nos servirá de componente container.
  • Y dos componentes visuales denominados ‘AlbumList‘ y ‘Album‘.

Para realizar el ejercicio nos apoyaremos en ES6 que nos permitirá modularizar mejor nuestro código. Empecemos por el App Component:

Lo bueno de la nueva estructura para definir componentes es que ahora lo que definimos es un objeto y no una función, quedando la estructura más limpia.  Además ya no tenemos que indicar restricciones del tipo elemento HTML que necesitamos ya que siempre definiremos elementos de interfaz.

Vemos que contiene definido un controlador que lo importo con ES6. Este controlador se encarga de obtener los álbumes de la API de Spotify. Podemos verlo aquí:

Este componente abarca todo lo que sería nuestra aplicación. Al crear un árbol de componentes, se va creando una jerarquía que hace fácil seguir el flujo. Dentro de este componente se crea el AlbumList. El componente AlbumList es el siguiente:

Este componente permite indicar un array de álbumes por parámetro. Eso se indica dentro de la propiedad bindings. En este objeto indicamos los parámetros de nuestro componente y el tipo de enlace que podemos indicar. En nuestro caso al ser un dato que simplemente se tiene que pintar en pantalla indicamos el símbolo ‘<‘ que indica que simplemente en un enlace simple de datos.

Como vemos en los componente, el bindeo de parámetros a controlador es mucho más fácil. No tenemos que indicar nada ya que irá por defecto. De hecho, si observamos el template, podemos ver un elemento denominado $ctrl.

En los componentes de Angular 1.5, el Scope se encuentra ya indicado con un alias por defecto, el alias será $ctrl. SI nos damos cuenta los bindings indicados ya se encuentran dentro del alias $ctrl. Todo mucho más cómodo y sencillo y evitando todos los problemas que solían surgir en versiones anteriores.

El último componente es el álbum en sí y es el encargado de pintar los datos en pantalla:

Volvemos a lo mismo, ahora se bindean dos propiedades denominadas image y name y son enlazadas en el template por medio del alias del controlador $ctrl.

Para terminar, indicar que este alias para $ctrl, puede ser cambiado indicando el alias que deseemos en la propiedad controllerAs del objeto del componente.

Conclusión

Como podéis observar, la versión 1.5 es la versión que por fin tiende puentes entre ambos frameworks. Creo sinceramente que podemos empezar a crear aplicaciones con Angular 1.5 sin problemas siguiendo buenas prácticas de arquitecturas de componentes. Todd Motto está trabajando mucho en ello y ya podéis seguir esta guía que os hará la vida más fácil.

Nos leemos 🙂

Imagen portada | Secure Cloud

Anuncios

2 comments

  1. Miguel Angel Diez · agosto 7, 2016

    Muchas gracias por tu orientación, José Antonio. La pondré en práctica.

    Me gusta

    • jdonsan · agosto 9, 2016

      Muchas gracias a ti por leerme :). No dudes en ir al artículo de Carlos Azaustre. Te ayudará a tenerlo más claro todavía.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s