Novedades Angular 17

• 16/11/2023

Guía Completa de Novedades en Angular 17

Angular 17 es la última versión del popular framework de desarrollo front-end lanzada en noviembre de 2023. Esta actualización introduce varias mejoras incrementales que optimizan el rendimiento, la productividad y la experiencia del desarrollador.

En este artículo haremos un recorrido por los cambios, adiciones y mejoras más destacadas que trae Angular 17. Analizaremos en detalle características como el compiler Ivy, las novedades en routing y forms, las herramientas de testing, y el CLI.

Ya sea que recién estés empezando con Angular o seas un desarrollador experimentado, este artículo te ayudará a ponerte al día con las capacidades que ofrece la nueva versión y saber cómo sacarles el máximo provecho.

Introducción a Angular 17

Angular 17 continúa el ciclo de lanzamientos predictibles de versiones menoresb> que introducen mejoras incrementales sobre la versión anterior. Esta filosofía de desarrollo enfocado en la estabilidad permite a los desarrolladores beneficiarse de nuevas características sin tener que reescribir mucho código existente.

Al tratarse de una actualización menor, Angular 17 se basa en la misma fundación de Angular 16 e incluye actualizaciones tanto en el framework central como en las bibliotecas relacionadas. Los cambios introducidos persiguen objetivos como:

• - Mejorar el rendimiento de renderizado y ejecución.

• - Reducir el tamaño de los paquetes resultantes.

• - Simplificar patrones comunes en el desarrollo de aplicaciones.

• - Añadir soporte para estándares modernos de desarrollo web.

• - Corregir bugs reportados por la comunidad de usuarios.

Si bien no hay modificaciones disruptivas, en conjunto estos cambios optimizan el flujo de desarrollo y nos permiten crear aplicaciones Angular más rápidas, eficientes y escalables.

Algunas de las áreas que recibieron mayor atención en Angular 17 fueron:

• - El compilador de plantillas Ivy: se enfocaron en mejoras de rendimiento en tiempo de ejecución y compilación.

• - El enrutador (Router): se agregó soporte para segmentos de URL anidados y otras mejoras.

• - Las formas (Forms): se mejoró la integración con reactivas, validación, testing, etc.

• - Las pruebas unitarias (Testing): los frameworks de testing como Jasmine y Karma recibieron actualizaciones.

• - La CLI (Command Line Interface): se agregaron comandos y se mejoró la generación de código base.

• - Los módulos (NgModules): cambios para facilitar la carga diferida (lazy loading) y gestión de dependencias.

• - La internacionalización (i18n): mejor soporte para traducciones, formatos regionales de fechas, números, etc.

• - Las animaciones: se mejoró la API de animaciones y se agregaron nuevas técnicas.

• - Accesibilidad: se mejoró el soporte para lectores de pantalla, foco del teclado, etc.

• - Rendimiento móvil: optimizaciones específicas para entornos mobile.

En las siguientes secciones profundizaremos en cada una de estas áreas para entender en detalle los cambios y beneficios que nos brindan como desarrolladores Angular.

---

Mejoras en el rendimiento

Una de las áreas principales de enfoque en Angular 17 fueron las optimizaciones de rendimiento, tanto en tiempo de ejecución como de compilación. Esto impacta positivamente en la experiencia del usuario final al acelerar el renderizado y la interactividad de las aplicaciones.

Angular Ivy Compiler

El compilador de plantillas Ivy introducido en Angular 9 fue mejorado significativamente en esta versión. Ivy ahora compila componentes hasta un 20% más rápido según pruebas internas del equipo de Angular.

Esto se logró mediante distintas optimizaciones como la reducción de instrucciones JavaScript generadas, mejor caching entre compilaciones incrementales, y mejoras en la detección de cambios durante el desarrollo.

Además, el tamaño de los paquetes resultantes se reduce hasta en un 10% gracias a que el código máquina generado por Ivy es más eficiente que en versiones anteriores.

Mejoras en rendering

Por el lado del motor de renderizado, Angular 17 incorpora varias mejoras orientadas a maximizar la performance en aplicaciones grandes con muchos componentes.

Algunos highlights son:

• - Reducción del número de cambios detectados durante la detección de cambios, mediante el uso de un algoritmo más eficiente.

• - Reutilización de estructuras de datos internas entre ciclos de renderizado.

• - Representación más compacta de templates para reducir el consumo de memoria.

• - Optimizaciones específicas en los diagnósticos de performance.

En pruebas internas, estas mejoras redundaron en tiempos de renderizado entre 5% y 20% más rápidos dependiendo de la complejidad de la aplicación.

---

Novedades en el router

El componente Router que permite la navegación y manejador de rutas en Angular recibió varias mejoras significativas en esta versión.

Soporte para fragmentos anidados

Una de las novedades más destacadas es la incorporación de soporte completo para tener múltiples fragmentos anidados dentro de un segmento de URL.

Por ejemplo, ahora se puede definir una ruta como:

/informe(modal:ventas)//graficos

Donde modal:ventas y graficos son fragmentos anidados dentro del segmento informe.

Esto permite crear interfaces de usuario más complejas sin tener que definir rutas separadas para cada pequeña variación.

Por ejemplo, se podría usar el primer fragmento para controlar si se muestra un modal, y el segundo para cambiar una vista de gráficos, manteniendo la misma ruta base /informe.

Los fragmentos pueden detectarse mediante observables en el código para ejecutar la lógica deseada.

Mejoras en navegación mediante código

También se realizaron varias mejoras en las APIs para realizar navegación mediante código imperativo.

Se incorporaron nuevos métodos como:

• - router.createUrlTree() que permite crear un árbol de rutas y combinarlas de forma dinámica en el código.

• - router.serializeUrl() que convierte el UrlTree en una URL navegable.

• - router.parseUrl() que analiza cualquier URL arbitraria y devuelve un UrlTree parseado.

Estas nuevas APIs otorgan mayor control sobre la creación y manipulación de URLs, habilitando casos de uso avanzados.

Debugging

Para facilitar la depuración y entendimiento de la configuración de rutas, ahora el router provee mejores mensajes de error e información en tiempo de desarrollo.

Los mensajes indican de forma más clara problemas como rutas no definidas, errores de tipado, segmentos duplicados, etc.

También se agregó la opción enableTracing para habilitar logs detallados de cada navegación.

---

Cambios en Forms

El módulo de Forms que permite la creación de formularios y enlace de datos en Angular recibió varias mejoras significativas en esta versión.

Mejor integración con Forms reactivos

Se mejoró notablemente la integración entre Forms tradicionales basados en directivas como ngModel y Forms reactivos basados en clases como FormControl. Ahora es posible definir un formulario completo mediante Forms reactivos y enlazarlo fácilmente a una plantilla manejada por forms tradicional con ngModel.

Por ejemplo, se puede tener lo siguiente:

@Component({
  //...
})
export class MyForm {

  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

}

Y en la plantilla:

<form [formGroup]="form">

  <input name="name" ngModel>

  <input name="email" ngModel>

</form>

De esta manera se unifican las ventajas de forms reactivos como el manejo de estado y testing con la simplicidad sintáctica de ngModel.

Nuevas validaciones incorporadas

Se agregaron varias nuevas validaciones incorporadas para facilitar la validación de campos de formulario, entre ellas:

• - minLength y maxLength para validar longitud mínima y máxima de strings.

• - pattern para validar mediante una expresión regular.

• - min y max para validar valores numéricos mínimos y máximos.

• - requiredTrue para campos requeridos que solo pueden ser true.

• - email para validar direcciones de email.

Esto evita tener que crear validadores personalizados para escenarios comunes.

Testing de formularios

También se realizaron varias mejoras para facilitar las pruebas unitarias de la lógica de formularios:

• - Se expandió la API de FormControl para simplificar la creación de controles de prueba con valores específicos.

• - Se agregaron nuevos métodos para crear fácilmente formularios completos en un estado deseado para tests.

• - Mejoras en las APIs para detectar cambios de forma asíncrona en pruebas.

Con estas mejoras se reduce la boilerplate necesaria para probar formularios de forma aislada.

---

Testing

Angular 17 incluye varias mejoras en las herramientas y APIs para testing que nos permiten escribir tests más completos, mantenibles y confiables para nuestras aplicaciones.

Mejoras en Jasmine

Jasmine sigue siendo el framework de testing por defecto en Angular, con el cual se escriben los specs de unittest. En esta versión Jasmine fue actualizado a la versión 4.0, que incluye varias mejoras:

• - Nuevos helpers para escribir asserts más legibles. Por ejemplo, .toBeTrue() ,.toContainKeys() ,.toHaveText()

• - Mejor reporte de resultados fallidos, indicando el valor recibido vs el esperado.

• - Se arreglaron bugs en algunos matchers como .toThrow()

• - Mejoras en el spying de funciones.

Mejoras en Karma

Karma, el test runner que ejecuta las pruebas también recibió mejoras:

• - Se redujo significativamente el tiempo de ejecución en modo watch al cachear el dependency graph.

• - Ahora se pueden configurar proxies para acceder a APIs externas desde los tests.

• - Se mejoró la API karma.config.parseConfig() para definir configuraciones desde código.

Testing asíncrono

Se hicieron varias mejoras para facilitar el testing de código asíncrono:

• - El matcher .toBeObservable() permite testear fácilmente observables.

• - El helper waitForAsync() espera de forma asíncrona por assertions.

• - La función fakeAsync() simula el pasaje de tiempo en tests.

Pruebas de servicios

Para servicios se agregó el nuevo helper SpyObject que genera doubles espías automatizadamente. También inject() permite inyectar y mockear dependencias.

Mejoras en testing de componentes

Para componentes ahora se puede usar render() instead de TestBed en muchos casos, resultando en código más simple. También se agregó soporte para findComponent() y findComponents() para búsquedas dentro del testing.

En resumen, las mejoras en testing permiten probar aplicaciones Angular de forma más completa, rápida y mantenible.

---

Actualizaciones en Angular CLI

Angular CLI, la interface de línea de comandos para desarrollar aplicaciones Angular, recibió varias mejoras en esta versión:

Comandos nuevos

Se agregaron nuevos comandos:

• - ng generate view: Genera una nueva view sin un component asociado.

• - ng run: Ejecuta un target arbitrario definido en el archivo angular.json.

• - ng add credentials: Almacena credenciales para registros/análisis de forma segura.

Mejor generación de código

La generación de código base para componentes, servicios, etc. fue mejorada para proveer mejores prácticas por defecto. Por ejemplo, en componentes ahora:

• - Los estilos están encapsulados por defecto.

• - Se agrega cambio de detección OnPush.

• - Las pruebas unitarias están preconfiguradas.

Optimizaciones de build

Los procesos de compilación fueron optimizados mediante parallelización de tareas, cache más agresivo y mejor inyección de Webpack. Esto reduce los tiempos de rebuild en un promedio de 20-30%

También se actualizaron las dependencias subyacentes a sus últimas versiones estables, como Webpack, TypeScript, etc.

Opciones de configuración

Se agregaron nuevas opciones de configuración para personalizar Angular CLI, como:

• - enableI18nLegacyMessageIdFormat

• - useCompilerReleaser

• - legacyBrowserSupport

---

Conclusión

Luego de revisar los cambios más destacados, podemos concluir que Angular 17 representa un paso evolutivo importante para el framework con mejoras en varias áreas clave.

Entre los beneficios que obtienen los desarrolladores Angular se encuentran:

• - Mejor rendimiento y tiempos de carga optimizados

• - APIs más intuitivas y fáciles de usar

• - Soporte para estándares modernos

• - Herramientas de testing y CLI actualizadas

• - Y mucho más que no fue posible cubrir.

Angular 17 demuestra el compromiso del equipo de mantener el framework estable pero en constante evolución.