Como muchos ya sabéis,  Angular ha lanzado su nueva versión y con ella algunos cambios que os sorprenderán. Hoy daremos un repaso a las nuevas características de Angular 6 que nos harán la vida mas fácil a todos los developers.

Sobre septiembre de 2016, el equipo de Angular lanzó la nueva versión del framework y dejó atrás la nomenclatura AngularJS para proyectos inferiores a la versión 2. A partir de entonces pasó a llamarse simplemente Angular, aconsejando a la comunidad no mencionar la versión, simplemente Angular. Desde entonces, Angular ha ido evolucionando constantemente y, aunque no siempre se ha cumplido, el equipo desarrollador anunció que cada 6 meses habría una nueva versión con cambios significativos.

 

LO NUEVO EN ANGULAR 6

En esta ocasión, los cambios se han centrado, principalmente, en la creación de nuevas herramientas que permitan agilizar los desarrollos con Angular, así como los cambios y la actualizaciones de nuestros proyectos desarrollados con versiones inferiores. Algunos de los cambios más interesantes son los siguientes:

NG UPDATE

Angular CLI incorpora este nuevo comando que analiza todas las dependencias que utilizamos en nuestro proyecto y nos recomendará actualizaciones que podemos realizar en nuestro proyecto. Básicamente, este comando es capaz de saber cuáles son las versiones adecuadas que debemos utilizar. Además, el equipo de Angular ha publicado una web en que se muestran qué son pasos necesarios seguir para actualizar correctamente desde cualquier versión inferior.

REGISTRO DE SERVICIOS

Angular recomienda una nueva manera de registrar nuestros servicios, desde esta nueva versión, en la generación de un servicio desde el CLI podremos observar como por defecto se crea un objeto dentro del decorador:

@Injectable({
providedIn: ‘root’
})export class BookService {}

De esta manera, especificando ‘root’ en la propiedad providedIn, el servicio funcionará a modo de singleton en la aplicación y no será necesario añadirlo dentro de los providers en el módulo principal. Así mismo, si en lugar de utilizar ‘root’ especificamos, por ejemplo “BookModule”, el servicio quedará registrado como provider de este mismo módulo.

ANGULAR ELEMENTS

Realmente, esta es una de las nuevas características que más llama la atención. ¿Te imaginas poder crear un componente con Angular y poder exportarlo para utilizarlo en cualquier otra aplicación? ¡Ah! Por supuesto, no necesariamente debe ser una aplicación Angular, será posible utilizarlo en ¡cualquier aplicación web!

Los chicos de AngularFirebase han publicado el siguiente video donde muestran cómo crear un componente web con Angular Elements:

NUEVO MOTOR DE RENDERIZADO

Aunque no viene por defecto activado, Angular 6 nos trae Ivy, un nuevo motor de renderizado con en las que según los test realizados es capaz de reducir… ¡hasta un 90% el tamaño de nuestra aplicación! ¡Una bestialidad! Sobre el mes de febrero, Minko Gechev, ex miembro del equipo de desarrollo de Angular, compartió el siguiente tweet donde nos mostraba el gran potencial de este motor. Ahora, por fin, ya podemos disfrutar de él.

Si os interesa saber más acerca de Ivy podéis echarle un vistazo al siguiente post en medium.

NGADD

Este nuevo comando nos ayudará a añadir nuevas funcionalidades a nuestras aplicaciones de una forma muy sencilla y rápida. Podremos convertir un proyecto normal en una PWA, o añadir Angular Material, entre muchísimas otras posibilidades. Ng add se encargará de descargar todas las dependencias y actualizar cualquier configuración necesaria para implementar la funcionalidad. Así de fácil:

1. npm install @angular/service-worker
2. ng add @angular/pwa

Podéis comprobar la lista completa de cambios en el Change Log oficial de Angular.

Esta nueva versión demuestra lo sólido que sigue siendo nuestro framework favorito. Personalmente creo que los nuevos avances con Elements y el nuevo sistema de renderizado Ivy son una gran noticia para la comunidad y hacen que Angular siga la estela de otros competidores que destacaban en estas áreas. Y tú, ¿qué opinas? ¿Has probado ya la nueva versión de Angular?

Nuestro SlashBoy Xavier Murcia, Software Developer, es el autor de este post.

Recommended Posts

Leave a Comment

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.