¿Por qué Angular 2?

En este tutorial vamos a hablar del framework que está en boca de todos los desarrolladores, Angular 2, vamos a ver cuáles son principales características y el porqué pienso que se a imponer en el desarrollo de aplicaciones web.

Índice de contenidos

• 1. Entorno
• 2. Introducción
• 3. Aprovecha las últimas mejoras en los estándares front-end
• 4. Principales características de Angular 2
• 5. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 15″ (2,3 Ghz Intel Core i7, 16 GB DDR3)
• Sistema Operativo: Mac OS X El Capitan

2. Introducción

Vamos a hablar de las principales características de Angular 2 y el porqué tiene que ser el framework que le tienes que recomendar a tu jefe de proyecto para abordar desarrollos del lado del cliente.

3. Aprovecha las últimas mejoras en los estándares front-end

Estas revoluciones son los web components, que son recomendación de la W3C desde Julio 2014 y permiten extender el HTML a nuestro antojo; y la nueva especificación de JavaScript que desde Junio 2015 cuenta con la especificación ECMAScript 6, de la que se nutre TypeScript para añadirle tipos de datos, interfaces y mejoras en la programación orientada a objetos.

Como ya he dicho los web components nos permiten extender el HTML como queramos, es decir, nos permiten crear etiquetas personalizadas que encapsulan el contenido en HTML, el comportamiento en JavaScript y el estilo en CSS y todo gracias a estas cuatro especificaciones:

• Custom Elements: es la tecnología que nos permite crear las etiquetas semánticamente correctas para la funcionalidad que le queramos dar. Es buena práctica que esta etiqueta incluya un ‘-‘, para reducir el riesgo de colisiones, ya que la W3C se compromete a no crear etiquetas que incluyan este carácter.
• HTML Imports: es la tecnología que nos permite importar un código HTML en otro HTML, se utiliza para la distribución de las librerías de web components.
• Templates: es la tecnología que permite crear la estructura visual del web component. No tiene ningún efecto sobre la página, es decir, no se incluye en el DOM hasta que algún elemento la procesa, hace una copia y la incluye en el DOM.
• Shadow DOM: es la tecnología que permite encapsular el web component para que no se vea afectado por el DOM general de la página a no ser que lo permitamos explícitamente. En otras palabras, es todo el contenido que encapsula la etiqueta del web component. En algunos navegadores podemos verlo inspeccionando la página.

Actualmente podemos hacer uso de ECMAscript 6 y de TypeScript pero los navegadores no se actualizan tan rápido a estos cambios en JavaScript, por lo que ahora estamos en un punto en el que si utilizamos las nuevas sintaxis, antes de poder ejecutarse en los navegadores tienen que pasar un proceso de transpilado, que convierte su contenido a sintaxis de ECMAScript 5 que es la que actualmente soportan todos los navegadores.

Todos los navegadores están trabajando en tener soporte para estos nuevos lenguajes lo antes posible, cuando llegue ese momento los transpiladores dejarán de tener sentido a no ser que salga una nueva especificación.

En el caso de ECMAScript 6 los transpiladores que se utilizan son babel o traceur, mientras que TypeScript ya proporciona su propio transpilador. En Angular 2 se puede utilizar cualquier tipo de sintaxis, ES5, ES6, TypeScript e incluso Dart.

4. Principales características de Angular 2

Simplicidad

Otra de las característica que ha perseguido el equipo de Angular en la versión 2 es la de simplificar el framework, quedándose solo con lo bueno y mejorando o eliminando lo malo de la primera versión. Entre lo malo que destaca de AngularJS es la utilización directa del $scope, en vez de utilizar el «controller syntax as», el sobre diseño de los servicios y la carga de módulos, que ahora se resuelve de forma nativa con ES6, la eliminación de directivas propias de Angular y la construcción de web components en lugar de directivas para extender el HTML.

TypeScript proporciona una sintaxis mucha más entendible y cercana a lenguajes de programación orientados a objetos como Java o C# y los templates definen claramente las características de la vista de un componente y sus relaciones con otros componentes.

Todo esto redunda en una curva de aprendizaje mucho más pequeña que hace que la productividad de los equipos aumente, permitiendo que se focalicen en la lógica de negocio y la presentación; el framework ya se encarga del resto.

Rendimiento

Todas las mejoras en el diseño mejoran el rendimiento general, pero la más crítica es la detección de cambios en la vista que antes se hacía con un ciclo de digest que consumía muchos ciclos de CPU y ahora se implementa con un sistema reactivo que supone una muy importante mejora de rendimiento.

Relacionada con esta mejora, ahora el databinding es unidireccional, para hacer un databinding bidireccional como en AngularJS, se tiene que hacer de forma explícita.

Está optimizado para móviles donde los ciclos de CPU y memoria son parámetros críticos para el correcto funcionamiento.

En el gráfico mostrado en el keynote del último Angular Connect (https://www.youtube.com/watch?v=UxjgUjVpe24) el responsable de Meteor mostró esta comparativa de frameworks donde el eje de las y es el tiempo de respuesta en milisegundos y el de las x la cantidad de elementos en el DOM (50.000), como se puede apreciar Angular 2 está por debajo de React de Facebook y Blaze de Meteor y mejora considerablemente el rendimiento de la versión 1 de Angular.

Inyección de dependencias

Es una característica heredada de la versión 1 que reduce el acoplamiento entre clases y favorece el testing permitiendo la utilización de doubles y el diseño con TDD.

Testabilidad

Esta característica está muy ligada a la anterior. Con Angular 2 tampoco tenemos excusas para que nuestro código no esté completamente testeado, ya que cualquier elemento de la aplicación es fácilmente testeable gracias a frameworks como Karma y Jasmine. También es posible implementar tests de aceptación de selenium con Protractor.

Mejoras en el router

El router en las aplicaciones single page es el elemento que permite simular la navegación entre páginas, permitiendo cambiar la vista dinámica principal al clicar sobre un enlace.

En la versión 2 de Angular el router tiene importantes mejoras: la primera es que su configuración en mucho más intuitiva gracias al decorador @RouteConfig que define todos los path a ese nivel y permite anidar otros path relativos al nivel de los hijos, evitando de este modo tener todos los path en el fichero de arranque de la aplicación.

También se incluye el concepto de ruta auxiliar permitiendo establecer más de un área donde cargar el componente que define la ruta. Cada una de estas áreas se identifica con un nombre y al hacer el link le indicamos en qué área se tiene que renderizar.

Además cada ruta define el componente a renderizar y un identificador, que será utilizado para crear el link, en vez de usar toda la ruta. Y se puede pasar todo tipo de parámetros entre vistas.

Integración con otras tecnologías

No es un framework que se crea autosuficiente para todo, una de sus mayores fortalezas es que se integra a la perfección con otras tecnologías que permiten crear web components como: react, de Facebook; Polymer, del propio Google y X-Tag, de MicroSoft. Además la empresa PrimeTek, famosa por sus librerías de componentes PrimeFaces y PrimeUI, está liberando todos estos componentes como directivas que se integran especialmente con Angular 2, en su proyecto PrimeNG.

Pero no solo eso, además se puede utilizar para crear aplicaciones móviles híbridas con Ionic 2; aplicaciones nativas en Ios y Android a partir de código JavaScript con NativeScript y aplicaciones en tiempo real con Meteor.

Soporte a navegadores

Con el reciente anuncio por parte del MicroSoft de la retirada de soporte a las versiones 8, 9 y 10 de Internet Explorer, se cierra un periodo de dolores de cabeza y peleas con el cliente, ya que ahora todos los navegadores del mercado son Evergreen, es decir que se autoactualizan y ya los desarrolladores no nos tenemos que anclar a una versión en concreto.

El equipo de Angular 2 está trabajando en tener el mejor soporte posible en todos los navegadores del mercado tanto de PC como de móvil; y ofrece script de polyfills para aquellos que todavía no soportan alguna característica del estándar.

5. Conclusiones

Es una tecnología que aunque esté en beta (beta.6) no va a morir por el camino, ya que Google ha aprendido de la lección de Dart y se ha ajustado a los estándares que ellos mismos habían propuesto en la W3C.

Además es una tecnología que nos proporciona nuestra querida inyección de dependencias y se integra con muchas otras tecnologías (esto suena un poco a Spring, no?), presenta un rendimiento óptimo y mucho más simple y comprensible que la versión 1, y al igual que ésta, nos permite tener todo nuestro código bajo una red de seguridad de tests.

Si hay que ponerle un pero a esta tecnología es que todavía está en beta, aunque mi experiencia personal es que ya está suficientemente madura y los cambios entre versiones actualmente son mínimos; os aseguro que todos hemos puesto tecnologías en producción mucho menos fiables.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.