Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=196cbd55-ce0f-41c2-8863-1d5734376178

Angular 6: un repaso a las novedades

Icono de advertencia ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.

El pasado 3 de Mayo de 2018 se publicó oficialmente la versión 6 de Angular bajo las palabras:

The first release of Angular that unifies the Framework, Material and CLI.

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.

Superman con un logotipo de Angular

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 Observable
import { Observable } from 'rxjs/Observable';

// Angular 6 Observable
import { 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.

¿Sabías que... nuestro curso de Angular ya está actualizado con las novedades de esta versión? ¡No te lo pierdas y domina Angular en poco tiempo y creando una aplicación real!

Fecha de publicación:
David García Valiñas David García es ingeniero informático y Web Technologies Google Developer Expert. Domina diferentes tecnologías: Java, JavaScript, TypeScript, Unity, Angular... y posee una amplia experiencia en desarrollo web, aplicaciones de escritorio y videojuegos. En la actualidad trabaja para IBM Research en Nueva York. Puedes seguirlo en Twitter: @tansitos Ver todos los posts de David García Valiñas
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.