Ya se ha lanzado Angular 6. Muchos de nosotros tenemos curiosidad por ver qué nuevas características y ventajas obtenemos con este lanzamiento.
Esta nueva versión hace que Angular sea más ligero, rápido y proporciona varias novedades. Vamos a verlas.
Elementos Angular
Este paquete está diseñado principalmente para aprovechar los componentes web que soportan los navegadores modernos (excepto Edge). Esto nos permite crear un componente Angular y publicarlo como componente web, que puede usarse después en cualquier página HTML.
Transformar un componente en un elemento personalizado nos proporciona una manera sencilla de crear HTML dinámico en una aplicación Angular.
Ivy Renderer
Ivy Renderer es el nuevo motor de renderización diseñado para que sea retrocompatible con la renderización existente y dedicado a mejorar la velocidad de renderización, además de optimizar el tamaño del empaquetado final. Para Angular, este no será el renderizador por defecto, pero se puede activar manualmente en las opciones del compilador.
Para profundizar en Ivy Renderer, echa un vistazo aquí (en inglés).
Compilador Bazel
En este lanzamiento, comenzaremos a tener soporte para el compilador Bazel. Cuando compilamos con Bazel, se recompila el código base, pero sólo con el código necesario. Usa cachés avanzados locales y distribuidos, análisis de dependencias optimizado y ejecución paralela.
Cambios en RouterModule
Se añade navigationSource y restoredState a NavigationStart
Actualmente, en NavigationStart no hay modo si la navegación se lanzado de forma imperativa o a través del cambio de localización. Con navigationSource, el origen de la navegación, p. ej. la posición del scroll o el cambio de URL/URI puede identificarse. restoredState nos da el identificador de navegación que nos dirige a la navegación actual. Estás dos propiedades nos ayudan a manejar múltiples casos de uso en el enrutamiento.
Cambios en FormsModule
NgModelChange
Actualmente este evento se emite después de que se actualice el valor y su validez. Anteriormente, se emitía antes de actualizar. Dado que el valor actualizado está disponible, este manejador es ahora más potente.
Controlador de formulario statusChanges
Angular 6 emite un evento PENDING al llamar a AbstractControl markAsPending.
Mejoras en el validador del patrón del formulario
Antes de Angular 6, los patrones de los validadores no podían contener símbolos como ^, & o $. Anteriormente, el validador añadía estos símbolos al patrón de validación automáticamente, sin comprobar su existencia. Por eso, cuando el desarrollador introducía estos caracteres, la validación fallaba. Ahora los validadores ya comprueban si existen estos símbolos, de modo que no fallarán tanto si se añaden como si no.
Se añaden validadores múltiples para el método array de FormBuilder
Antes de Angular 6, no teníamos modo de pasar múltiples validadores al método formBuilder.array. Ahora sí se permite.
Mejoras en el rendimiento de las animaciones
Una nueva implementación de Animaciones Angular que ya no requiere animaciones web polyfill. Tu aplicación pesará 47Kb menos si usa animaciones.
Angular CLI 1.7
Soporte para Schematics
Schematics es una tecnología de flujo de trabajo para el desarrollo de aplicaciones web modernas, que puede aplicar transforms a tu proyecto, como crear un nuevo componente o actualizar tu código para solucionar problemas de retrocompatibilidad (breaking changes) en una dependencia o para añadir una nueva opción de configuración o un nuevo framework a un proyecto existente. Esto nos ayuda a construir la estructura inicial del proyecto (scaffolding) lo que facilita la reusabilidad y facilidad de uso del desarrollo de la aplicación.
ng update
Ahora tenemos un comando para actualizar las dependencias de Angular de nuestras aplicaciones CLI automáticamente. Todas las dependencias de @angular/* se actualizarán a la última versión estable que incluye todo los paquetes principales (core) en tus dependencias como rxjs, zone, typescript, etc… además del propio CLI.
ng add
El nuevo comando ng add añade una nueva característica a tu proyecto. Usaba tu gestor de paquetes para descargar nuevas dependencias y llamar a un script de instalación que puede actualizar tu proyecto con los cambios en la configuración, añadir dependencias adicionales o crear código de scaffolding específico para un paquete. Esto es muy importante ya que todos sabemos lo difícil que es el manejo de dependencias en proyectos grandes, especialmente con actualizaciones importantes.
Safety worker (Service worker)
A veces, cuando desplegamos la última versión de una aplicación, necesitamos desacticar y activar el service worker. En este momento, no hay un modo directo de deshabilitar un service worker. Para responder a esta necesidad, esta nueva versión tiene en script llamado safety-worker.js que formará parte del paquete en producción y que nos ayuda a desactivar el service worker existente.
App Budgets
App Budgets es una característica de Angular CLI que nos permite establecer umbrales para el tamaño de los paquetes. Podemos configurar mensajes de error o avisos cuando el paquete sobrepasa el umbral establecido.
Referencias (en inglés)
https://github.com/angular/angular
https://github.com/angular/angular-cli/wiki
https://next.angular.io/guide
https://blog.angular.io/
Nota: puedes encontrar el artículo original en https://medium.com/@vyakymenko/new-features-in-angular-6-e028c6c1b8c2