Angular 6 liberado

4 mayo, 2018
Category : Angular,programacion

Angular 6 liberado

Hola buenas a todos, como les había comentado en un articulo anterior Angular 6 quedo liberado para todo el mundo.

Muchos se preguntaran si van a tener que aprender cosas nuevas, pero no, si ya tiene tiempo trabajando con versiones de Angular 2, 4 o 5 veras que los cambios fueron muy pequeños en comparación de Angular JS a Angular 2.

Puedes usar este asistente para hacer una actualización de tu proyecto y migrar a Angular 6. Asistente

Actualmente tendremos dos versiones de angular LTS Angular 4 y Angular 6, puedes ver esta info aquí.

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.

Angular CLI

Otro grande que se actualiza es AngularCLI

¿ Que caracteristicas nuevas nos trae el Angular CLI ?

Angular carga todos los componentes que están importados en nuestro módulo principal app.module.ts y puede ser que tarde unos segundos en cargar nuestra aplicación, dependiendo cuantos componentes haya. Para resolver ese problema llegó a nosotros lo que es Lazy Loading.

Generación de nuevas librerias. Ahora con ng generate library <name> vas obtener los archivos para crear tu propia libreria.
Actualización de dependencias. Ahora con ng update el Angular CLI analiza las dependencias de tu proyecto y te deja actualizarlas. Incluyendo la del propio CLI.
Cambio del angular.json. Para soportar las nuevas caracteristicas del CLI el archivos angular.jsonva a cambiar, pero con ng update podras actualizarlo facilmente.
Un empaquetamiento mas ligero global. Gracias a Webpack 4 y que el Angular CLI mantiene todo en el package.json ahora el empaquetamiento final es mucho mas ligero.
ng config para obtener y configurar valores. Ahora puedes cambiar facilmente los valores de CLI y tu proyecto con el ng config.
ng add: Otro nuevo comando CLI ng add facilita la adición de nuevas capacidades a su proyecto. ng add usará su administrador de paquetes para descargar nuevas dependencias e invocar un script de instalación (implementado como un esquema) que puede actualizar su proyecto con cambios de configuración, agregar dependencias adicionales (por ejemplo, polyfills) o código de inicialización específico del paquete de andamio.

Pruebe algunos de los siguientes comando en su nueva aplicación ng new:

ng add @angular/pwa — Convierta su aplicación en un PWA agregando un app manifest y un service worker.
ng add @ng-bootstrap/schematics — Agregar ng-bootstrap en tu aplicacion.
ng add @angular/material — Instale y configure Angular Material y template y registre nuevos componentes de inicio con ng generate
ng add @clr/angular@next — Instalar y configurar Clarity de VMWare
ng add @angular/elements — Agregue el polyfill y las dependencias de document-register-element.js necesarios para Angular Elements