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.
¡La versión 7.0.0 de Angular está aquí! Esta es una nueva versión "Major", de las que lanzan cada 6 meses, y que afecta a la plataforma completa, incluido el "core" del framework, a Angular Material y a la herramienta de línea de comandos, con versiones principales sincronizadas. Esta versión contiene nuevas funciones para el "tooling" y ha permitido varios lanzamientos interesantes de algunos partners del framework.
Vamos a dar un repaso rápido a las novedades...
Pequeñas mejoras de rendimiento
Un error común de los desarrolladores Angular es dejar el polyfill llamado reflect-metadata al pasar la aplicación a producción. Pero solamente es necesario durante el desarrollo, por lo que se está añadiendo una capa innecesaria de lógica que merma el rendimiento. Para solucionar este problema, como parte de la actualización a v7, el proceso eliminará automáticamente de tu archivo polyfills.ts, y luego lo incluirá como un paso de compilación cuando construyas tu aplicación en modo JIT, eliminando este polyfill de las compilaciones de producción de manera predeterminada.
En esta nueva versión se está cambiando el ajuste por defecto de las nuevas aplicaciones de modo que puedan sacar partido a la característica del CLI denominada "Bundle Budgets" (presupuestos de empaquetamiento). Si tu aplicación final ocupa más de 2MB la línea de comandos te avisará, y si pasa de 5MB directamente te dará un error. Estos límites son fáciles de cambiar tocando el archivo angular.json:
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Estos límites están alineados con los avisos que muestra la extensión Data Saver para Chrome:
De este modo, mantienes el tamaño de las aplicaciones bajo control y los usuarios de eta extensión bastante popular (sobre todo en móviles) no verán este tipo de avisos.
Avisos en la CLI
La interfaz de línea de comandos (CLI) ahora, cuando los usuarios ejecuten comandos comunes como ng new o ng add @angular/material, mostrará ciertos avisos informativos para ayudarles a descubrir funciones integradas como el enrutamiento o el soporte SCSS.
Se han añadido estos avisos de la CLI a Schematics, de modo que cualquier paquete publicado con este sistema puede sacarles partido para mostrarlos también a sus usuarios, simplemente añadiendo una clave x-prompt a cualquier colección de Schematics.
Diseño "Material" y el Component Development Kit
El lenguaje de diseño Material, en el que se basan las aplicaciones Android y Web de Google y que es ampliamente utilizado por millones de desarrolladores, sufrió importantes cambios este año. Si utilizas la biblioteca Angular Material para poder usar componentes con este lenguaje visual en tus aplicaciones, vas a ver algunos cambios en la estética de la aplicación, para adaptarse a las nuevas directivas:
Además, el Kit de Desarrollo de componentes (CDK) de Material trae dos nuevas características interesantes:
Scroll virtual
Esto es muy interesante para manejar listas de elementos muy largas. Lo que hace es cargar y descargar elementos en el DOM automáticamente en función de las partes de la lista que haya visibles en cada momento, consiguiendo que incluso en listados muy grandes el rendimiento sea muy elevado:
Basta con importa el módulo scrollingModule y decorar mínimamente las listas, así:
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
Aquí tienes más información sobre scroll virtual en Angular 7.
Además, existe un nuevo comportamiento para elementos que permite añadirles el comportamiento de arrastrar y soltar, con renderizado automático cuando el usuario mueve el elemento, y métodos auxiliares para reordenar automáticamente listas (moveItemInArray) y transferir elementos de unas listas a otras (transferArrayItem):
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
Puedes leer aquí más sobre arrastrar y soltar con Angular 7.
Mejor accesibilidad de listas de selección
Mejora la accesibilidad de tu aplicación haciendo uso de un elemento select nativo de HTML5 dentro de un componente mat-form-field. Así conseguirás algunas mejoras también de usabilidad y de rendimiento. Pero siempre puedes seguir utilizando mat-select en caso de querer control total sobre las opciones de presentación.
Más info sobre mat-select y sobre mat-form-field.
Proyección de contenidos en elementos
En Angular existe el concepto de "Proyección de contenidos" o "Content Projection". Esta característica te permite insertar un determinado shadow DOM dentro de tu componente. Por decirlo de manera simple, si quieres insertar unos determinados elementos HTML o incluso otros componentes dentro de un componente que hayas definido en Angular, utilizas la proyección de contenidos para hacerlo, para lo cual en la práctica empleas las etiquetas <ng-content></ng-content>. Utilizando de manera adecuada esta característica puedes crear aplicaciones escalables basadas en componentes reutilizables.
Desde Angular 7 es posible utilizar también el content projection con elementos de Angular. Se trata de elementos personalizados que se pueden reutilizar no solo en Angular sino incluso en otros frameworks, como Vue.js, React, etc. Cualquiera puede utilizarlos incluso sin saber nada de Angular o sin usar framework alguno, permitiendo su reutilización en otros proyectos.
Puedes leer más sobre Angular Elements en la documentación oficial.
Nuevos componentes y utilidades de la comunidad
Junto con Angular 7 se lanzan varios componentes y herramientas que sacan partido a algunas de las nuevas características del framework. En concreto:
- Angular Console: una consola visual que te permite arrancar y ejecutar proyectos Angular en la máquina local sin tener que acordarte de todos los parámetros que se usan en el CLI y automatizando algunas cosas por ti. Te facilitará el uso de Angular.
- Angular Fire 2: la biblioteca oficial para usar Firebase desde Angular.
- NativeScript: para crear aplicaciones nativas a partir de tu aplicación web.
- Stackblitz: el editor online específico para Angular que te permite programar y compartir las aplicaciones creadas directamente desde tu navegador, sin instalar nada en local.
Nuevas dependencias
Como ya viene siendo habitual con los cambios de versión grandes, la única incompatibilidad hacia atrás que existe es la de los componentes del núcleo del sistema, que simplemente se actualizan a las versiones más recientes, así ahora se utilizan:
- TypeScript 3.1
- RxJS 6.3
- Node 10 (aunque se sigue soportando Node 8 también)
Todavía no se ha tocado el pipeline de renderizado con lo que se denominó Proyecto Ivy cuando se anunció en abril. No estará listo hasta dentro de varios meses y se asegurarán que en la medida de lo posible sea compatible hacia atrás pero proporcione mucho mejor rendimiento.
Actualizar desde 6.x a 7
Por suerte, actualizar una aplicación creada con la versión anterior a esta nueva es muy sencillo. Basta con abrir la línea de comandos en tu proyecto y escribir:
ng update @angular/cli @angular/core
Dice el equipo de Angular que la migración es muy rápida y que, para la mayor parte de las aplicaciones, aunque sean grandes, no debería tardar más de 10 minutos.
De todos modos, en update.angular.io tienes unas guías más detalladas sobre cómo actualizar cualquier aplicación a mano, en función de la versión, la complejidad, etc.
Nota: este post está basado en las novedades de Angular 7 anunciadas oficialmente por el propio proyecto Angular a través de Stephen Fluin, su portavoz oficial, aunque lo hemos enriquecido con algunas explicaciones y enlaces para que te resulte más útil. Y en español, claro 😉
Fecha de publicación: