22/05/2018Artículo original
El pasado 3 de Mayo de 2018 se publicó oficialmente la versión 6 de Angular bajo las palabras:
Esta frase resume perfectamente la finalidad que persigue esta release, en la cual se hizo un gran esfuerzo por parte del equipo de Angular por aunar el framework, la biblioteca de estilos y la línea de comandos en una misma versión, la 6.0.0.
Novedades
A continuación encontrarás un resumen de las principales novedades de esta nueva versión centrándonos tanto en el framework (que puede ser lo que más te interese) como en la línea de comandos (la parte que más novedades ha recibido).
Para ver el log completo de lo que se ha introducido en esta versión te invito a leer el CHANGELOG de Angular.
TypeScript 2.7 y RxJS 6
Este punto puede que sea el más conflictivo porque abarca los denominados Breaking Changes o cambios no compatibles con anteriores versiones.
Por suerte Angular 6 ha introducido pocos cambios que afecten a su “exterior”, es decir, a la manera de utilizarlos, y éstos son bastante suaves.
La principal incompatibilidad surgió de un cambio en los imports de RxJS 6, la biblioteca para desarrollo Reactivo de Angular, ya que se simplificaron las rutas de cada una de las clases (Observable, por ejemplo) y operadores (map, por ejemplo).
Este cambio resulta en la siguiente actualización:
// Angular 5 Observableimport { Observable } from 'rxjs/Observable';// Angular 6 Observableimport { Observable } from 'rxjs';
Como ves, el cambio es mínimo de cara a nosotros, los desarrolladores. Pero por detrás esto da como resultado una optimización en el tamaño del paquete que se genera, aspecto muy importante en los frameworks de hoy en día, que sufren continúas comparaciones sobre lo rápidos / pesados que son.
Dicho esto, es comprensible que si tu código es de un tamaño considerable o tienes también que dar soporte a diferentes bibliotecas, sea un cambio como mínimo tedioso de implementar, ya que hay detalles (como bibliotecas externas) que no dependen de ti. RxJS 6 ofrece una utilidad para aliviar esa transición y ayudarte poco a poco a introducir los cambios que tu código necesite a través de la biblioteca rxjs-compat, instalable como siempre desde NPM.
Esta biblioteca te permitirá mantener el mismo código durante tu transición.Eso sí, es altamente probable que para la versión 7 (sin fecha todavía) ya no tengas que hacer uso de esta biblioteca.
Angular Elements
Angular 6 también introduce gratas sorpresas como la de Angular Elements. Este nuevo proyecto entra para quedarse ya que son la entidad con la que trabaja Angular para dar soporte a los Custom Elements, una de las patas de los cada vez más famosos Web Components.
La finalidad de estos Angular Elements es que por debajo generen Custom Elements (que no Web Components) que puedan ser reutilizados, no sólo en otros proyectos de Angular, sino incluso en cualquier proyecto JavaScript a través de “Vanilla JavaScript” (o sea, JavaScript puro y duro).
Por otro lado, aunque es un proyecto que suscita un gran interés, no te recomiendo su uso actualmente en producción ya que seguramente se esperen cambios (costosos o no) sobre estos elementos. Pero te animo a probarlos o como mínimo a investigar sobre ellos ya que es una parte de la Web que está cogiendo una relevancia considerable como estándar (que se dice pronto) en los últimos años.
Si te ha interesado este punto te invito a ver una charla del equipo de Angular Firebase en la que tratan los Angular Elements.
Ivy
Angular lleva un tiempo preparando un nuevo motor de renderizado llamado Ivy mucho más pequeño que el actual y que se traducirá en una disminución aún mayor del tamaño de tu aplicación. En esta nueva versión no ha habido novedades sobre este motor, pero seguramente oigamos alguna muy pronto, puede que incluso antes de la versión 7.0.0.
Angular CLI: ng add y ng update
Este es quizás el punto clave de Angular 6 y la motivación de esta release.
El principal cambio que ha sufrido angular-cli es un cambio de concepto. Ahora al ejecutar un ng new ya no podemos hablar de la generación de un proyecto o una carpeta, sino de la creación de un workspace completo en el que poder alojar múltiples aplicaciones. Esto para los desarrolladores nos ofrece un juego y un dinamismo a la hora de desplegar o simplemente “arquitecturizar” nuestras aplicaciones a un nivel muy interesante.
Además el equipo de Angular no sólo han querido aunar sus propias aplicaciones (el framework, la biblioteca de Material, el CLI…) sino que quiere que la comunidad también participe en esa unificación y se mantenga actualizada. Este compromiso lo quieren conseguir a través del comando ng update y ng add. El primero aunque puede parecer el mismo que antes a simple vista, ahora es mucho más potente, ya que las bibliotecas externas pueden suscribirse a este comando y actualizarse automáticamente con la aplicación.
Por otro lado, con ng add se busca evitar esas configuraciones iniciales que muchas veces se sufren al instalar una biblioteca nueva. Lo que se persigue es que simplemente con ejecutar un comando se tenga todo preparado para trabajar.