Menu

Angular 6.

angular - May 04, 2018 por Carlos Rojas

Cada 6 meses el equipo de Angular nos trae una versión mayor de Angular y el final de marzo es el turno para Angular 6.0.0.

Otra versión de Angular ?

Si. El equipo de Angular hace un tiempo anuncio su plan predictible de lanzamiento de versiones como una forma de ayudar a los equipos grandes y sus empresas con la planeación de actualizaciones y cambios. Puedes ver las notas aquí.

Voy a tener que aprender Angular de nuevo ?

No. Si has estado trabajando con Angular frecuentemente has notado que las versiones 2, 4 y 5 son muy parecidas entre ellas a excepción de pequeños cambios que puedes hacer en el momento que necesites. Puedes ayudarte con este pequeño Asistente.

Si cambia cada 6 meses el codigo de mi empresa va a quedar sin Soporte ?

El equipo de Angular tiene ciertas versiones las cuales cuentan con LTS (Long Term Support) el cual puedes encontrar acá y la versión 6 resulta ser una versión LTS.

Update Todas las versiones mayores tienen LTS :)

Novedades en la versión 6.

En esta versión se estan sincronizando las versiones mayores de todos los paquetes que hacen parte de la plataforma. (@angular/core, @angular/common, @angular/compiler, etc), el Angular CLI, Angular Material + CDK. Todo esta saliendo con la versión 6.

La versión 6 de Angular tiene pequeños parches y 3 caracteristicas principales, estas son:

  • El Motor de Renderizado.

  • Formato de Paquetes de Angular.

  • MVP de Angular Elements.

Motor de Renderizado.

ngIvy es el nombre en codigo de esta version del motor de renderizado. Pero que es el motor de renderizado?

Si piensas un poco en la arquitectura de Angular podemos dividir todo en dos cosas. Los elementos que componen la logica del negocio y la UI. El motor de renderizado es el que se encarga que la UI sea una realidad en nuestra App. Adicionalmente, el proceso de renderizado tiene principalmente dos fases la compilacion y la ejecución.

Podemos pensar en la compilación como el proceso en que nuestro codigo se organiza y se prepara para ser enviado al Navegador. ngIvy promete hacer la compilación dramaticamente mas rapida, lo que se traduce en un mejor proceso en el momento de desarrollo.

Podemos pensar en la ejecución como el proceso en que el Navegador procesa nuestra App en el DOM y actualiza sus estados. ngIvy tiene ahora un nuevo Proceso que codigo que no es necesario no se envie al Navegador traducido en componentes mas livianos (en kb) que van a estar preparados más rapido para el Navegador.

Otra mejora en la ejecución es la participación de Angular Elements en esto, pero hablaremos de esto luego.

La versión de Angular 6.0.0 va a venir aun con renderer2 (El actual motor de renderizado) lo que hara que puedas seguir utilizandolo mientras te vas preparando para el renderer3 ( El que deberia ser ngIvy).

Formato de Paquetes de Angular.

El Angular Package Format es una colección de buenas practicas y formas de organizar y construir tus librerias o codigo que puedes reusar con el foco de que pueda ser utilizado facilmente por los componentes de Angular y las herramientas de trabajo.

Puedes ver estas practicas acá.

MVP de Angular Elements.

Y por ultimo la caracteristica que más me emociona es la versión minima de Angular Elements. Para entender esto debes pensar en cuando desarrollas tus Apps lo que haces es basicamente crear Componentes de Angular, los cuales magicamente se renderizan y funcionan en el navegador. El problema con esto es que es magia solo en el universo de Angular, entonces, si lo quieres mezclar con otras tecnologias no es posible.

Ahora con Angular Elements, Angular buscara convertir los componentes que quieras en componentes nativos para el Navegador o mas especificamente Custom Elements y de esta manera van a ser piezas independientes que puedas utilizar con otras tecnologias. Puedes explorar más sobre Angular Elements Aquí

Mejoras de rendimiento para las animaciones.

El paquete de Animations no necesita más el polyfill de Animation como dependencia. Es decir te puedes ahorrar 47KB de tu bundle mientras incrementas el rendimiento en las animaciones en Safari al mismo tiempo.

Bueno espero que sea de ayuda y no te olvides comentar y compartir :)

¡Compártelo!