Angular 17: Novedades y características clave

¿Qué es Angular 17?

Angular 17 fue la versión más reciente de Angular, un framework de desarrollo utilizado para construir aplicaciones web dinámicas y escalables. Con el lanzamiento de Angular 18 en Mayo de 2024 los desarrolladores pueden disfrutar de una serie de mejoras de rendimiento, nuevas características y mejor integración con herramientas modernas de desarrollo web. Angular 18 representa un paso adelante en la evolución del desarrollo front-end, ofreciendo estructuras de código más limpias, reducción en el tamaño de los paquetes y mejoras en la velocidad de ejecución de las aplicaciones.

¿Cuándo salió Angular 17?

Angular 17 ha sido lanzado oficialmente el pasado mes de Noviembre, marcando otro hito significativo en el ciclo de vida del framework. Este lanzamiento trajo consigo actualizaciones importantes que responden a las necesidades de la comunidad de desarrolladores y alinean a Angular aún más con las prácticas modernas de programación web.

¿Cómo Actualizar a Angular 17?

Actualizar a Angular 17 es un proceso que requiere planificación y cuidado. En otro tutorial de nuestra web te explicamos cómo actualizar Angular.

Evolución de la versión de Angular

Angular continúa su evolución como uno de los frameworks más populares y robustos para el desarrollo de aplicaciones web. Con la llegada de su última versión, Angular 17, se nos presentan novedades y mejoras que marcan un antes y un después en el ecosistema de desarrollo moderno. En esta sección, exploraremos las mejoras y novedades de Angular 17.

Cambio de Imagen en Angular: Nuevo Logo y Dominio

Angular siempre ha estado en la vanguardia del desarrollo web y, con su última actualización, no solo ha renovado su core sino también su imagen.

El lanzamiento de Angular 17 trae consigo un nuevo logo, más moderno y minimalista, reflejando la evolución y madurez del framework. Además, Angular estrena un nuevo sitio web de documentación, este dominio viene con una nueva estructura, nuevas guías,contenido mejorado y una plataforma nueva que permite a los usuarios aprender Angular y Angular CLI de forma interactiva y a su propio ritmo. Se espera que este nuevo dominio se convierta en el sitio web predeterminado para Angular en su versión 18.

Este cambio de imagen representa el compromiso de Angular con la innovación constante y su esfuerzo por mantener una comunidad unida y bien informada.

Migración Automática a la Nueva Sintaxis

Con la actualización a Angular 17, se proporciona una herramienta de migración automática que refactoriza el código para usar la nueva sintaxis. Ejecutando ng update, Angular CLI hará la mayor parte del trabajo por ti.

Nuevos Flujos de Control

En un esfuerzo por mejorar la experiencia de desarrollo, Angular ha lanzado una nueva sintaxis de plantilla de bloque. Esta innovación proporciona funciones avanzadas a través de API declarativas simples. Internamente, el compilador Angular convierte esta sintaxis en instrucciones JavaScript eficientes, optimizando el flujo de control y la carga diferida entre otras capacidades.

La adopción de la nueva sintaxis de bloque resulta en un flujo de control integrado y mejorado. Investigaciones y estudios de usuarios revelaron que los desarrolladores a menudo enfrentan desafíos con las directivas ngIf, ngFor y ngSwitch

Con los comentarios de la comunidad y los resultados de investigaciones de UX, Angular ha desarrollado un flujo de control más integrado. Este nuevo sistema brinda varias ventajas:

• Una sintaxis más ergonómica y alineada con JavaScript, haciendo que el proceso sea más intuitivo y minimizando la necesidad de consultar la documentación.
• Mejora en la verificación de tipos debido a una reducción de tipos más efectiva.
• Al ser una característica que se manifiesta principalmente en tiempo de compilación, reduce la huella en tiempo de ejecución, potencialmente disminuyendo el tamaño del paquete hasta en 30 kilobytes y mejorando las puntuaciones de Core Web Vital.
• Se integra en las plantillas sin la necesidad de importaciones adicionales.
• Proporciona mejoras de rendimiento significativas, las cuales se detallarán próximamente.

Vistas Diferidas (Lazy Loading)

Angular 17 permite cargar componentes de manera diferida con la nueva directiva ngDeferLoad. Esto reduce el tiempo de carga inicial de la aplicación y los recursos necesarios para la primera pintura.

1// Uso de ngDeferLoad
2<ng-container *ngDeferLoad="loadComponent">
3  <app-heavy-component></app-heavy-component>
4</ng-container>
5 }

Standlone por Defecto

A partir de ahora, Standlone estará activado por defecto en todas las aplicaciones nuevas. Todo lo que se haga con ng generate y ng new será Standalone aunque, se van a poder seguir usando los módulos como siempre para ello deberemos añadir la opción:

1--Standalone false

Bucle For Incorporado

Otra mejora notable en Angular 17 es el bucle for incorporado. Esta característica trae una sintaxis más limpia y un rendimiento mejorado* en la renderización de listas. Por ejemplo, la nueva sintaxis para iterar sobre una lista de usuarios sería:

1@for (user of users) {
2  // Código para renderizar cada usuario
3}

Esta nueva sintaxis hace que sea más fácil de escribir y entender, especialmente para aquellos desarrolladores que vienen de otros lenguajes que utilizan una sintaxis similar para los bucles.

Signals Optimizados

Los Signals, introducidos en Angular 16, han sido optimizados en esta última versión. Además, el proceso de compilación ha sido actualizado cuando se utiliza el renderizado híbrido. Con SSR y SSG puedes observar una mejora de velocidad de hasta un 87% ng buildy un bucle de edición y actualización un 80% más rápido parang serve .

Esbuild y Vite por Defecto

Los compiladores Esbuild y Vite estarán habilitados por defecto a partir de esta versión. Este cambio mejorará la velocidad de compilación.

Mejoras SSR

• Firebase ahora reconocerá e implementará automáticamente la aplicación Angular con una configuración casi nula, con la vista previa anticipada del framework CLI. CLI reconoce el uso de SSR, i18n, optimización de imágenes y más, lo que permite ofrecer aplicaciones web de alto rendimiento en una infraestructura rentable y sin servidor.
• Nuevo paquete @angular/ssr: Angular ha trasladado el repositorio de Angular Universal al repositorio de Angular CLI y ha convertido el renderizado del lado del servidor en una parte aún más integral en la oferta de herramientas. A partir de hoy, para añadir soporte de renderizado híbrido a tu aplicación existente ejecuta:

1ng add @angular/ssr

Este comando generará el punto de entrada del servidor, añadirá capacidades de compilación SSR y SSG, y habilitará la hidratación por defecto.

• Para mejorar el rendimiento de los SSR y SSG de Angular, a largo plazo Angular busca alejarse de la emulación de DOM y de las manipulaciones directas del DOM. Al mismo tiempo, a lo largo del ciclo de vida de la mayoría de las aplicaciones es necesario interactuar con elementos para instanciar bibliotecas de terceros, medir el tamaño de los elementos, etc. Para ello, han desarrollado un conjunto de nuevos ciclos de vida:
  
  • afterRender: registra una llamada de retorno que será invocada cada vez que la aplicación termine de renderizar.
  • afterNextRender: registra una llamada de retorno que será invocada la próxima vez que la aplicación termine de renderizar. Sólo el navegador invocará estos hooks, lo que te permite conectar DOM de forma personalizada y segura directamente dentro de tus componentes. Por ejemplo, si quieres instanciar una librería de gráficos puedes usar afterNextRender:

1@Component({
2  selector: 'mi-grafico',
3  template: `<div #chart>{{ ... }}</div>`,
4})
5export class MyChartCmp {
6  @ViewChild('grafico') chartRef: ElementRef;
7  chart: MyChart|null;
8  constructor() {
9    afterNextRender(() => {
10      this.chart = new MyChart(this.chartRef.nativeElement);
11    }, {phase: AfterRenderPhase.Write});
12  }
13}

Depuración de Inyección de Dependencias en DevTools

En los últimos meses, Angular ha implementado nuevas APIs de depuración que nos permiten conectarnos al tiempo de ejecución del framework e inspeccionar el árbol de inyectores. Basándose en estas APIs han creado una interfaz de usuario de inspección que permite previsualizar:

• Dependencias de tus componentes en el inspector de componentes.
• Árbol de inyectores y ruta de resolución de dependencias.
• Proveedores declarados dentro de los inyectores individuales.

Mejoras en Rendering

En cuanto al motor de renderizado, Angular 17 introduce varias mejoras orientadas a maximizar la performance, especialmente en aplicaciones de gran escala con numerosos componentes. Entre estas mejoras se destacan:

• Reducción en el número de cambios detectados durante la detección de cambios, empleando un algoritmo más eficiente.
• Reutilización de estructuras de datos internas entre ciclos de renderizado.
• Representación más compacta de templates, que ayuda a disminuir el consumo de memoria.

Estas optimizaciones han resultado en una mejora de los tiempos de renderizado de entre un 5% y un 20%, dependiendo de la complejidad de la aplicación. Estas cifras, obtenidas en pruebas internas, evidencian el compromiso de Angular con la entrega de experiencias de usuario finales más rápidas y fluidas.

Mejor Integración con Forms Reactivos

Una de las mejoras más destacadas en Angular 17 es la mejor integración con forms reactivos. Esta actualización permite una mayor sinergia entre los enfoques basados en directivas, como ngModel, y los forms reactivos basados en clases, como FormControl. Esto significa que ahora es posible:

• Definir formularios completos utilizando forms reactivos.
• Enlazarlos fácilmente con plantillas gestionadas por directivas tradicionales.

Nuevas Validaciones

Angular 17 también introduce nuevas validaciones incorporadas, ampliando las capacidades de validación de formularios directamente desde el framework. Entre estas nuevas validaciones se encuentran:

• minLength y maxLength para strings.
• pattern para validación mediante expresiones regulares.
• min y max para valores numéricos.
• requiredTrue para campos que deben ser verdaderos.
• email para la validación de direcciones de correo electrónico.

Estas validaciones incorporadas facilitan la implementación de escenarios comunes de validación de formularios, reduciendo la necesidad de validadores personalizados.

Testing de Formularios

Angular 17 hace significativas mejoras en el testing de formularios. Esto incluye:

• Expansión de la API de FormControl para facilitar la creación de controles de prueba.
• Nuevos métodos para crear formularios en un estado específico para tests.
• Mejoras en la detección de cambios asíncronos en pruebas.

Con estas actualizaciones, los desarrolladores pueden realizar pruebas unitarias de formularios de manera más eficiente y con menos código repetitivo, asegurando así una mayor calidad y fiabilidad en las aplicaciones.

Mejoras Testing en Jasmine

Jasmine, el framework de testing por defecto en Angular, ha recibido actualizaciones clave en esta versión. Entre las mejoras más notables se incluyen:

• Nuevos helpers para escribir aserciones más legibles, como .toBeTrue(), .toContainKeys(), y .toHaveText().
• Un mejor reporte de resultados fallidos, proporcionando una comparación clara entre el valor esperado y el recibido.
• Correcciones de bugs en matchers específicos, como .toThrow().
• Mejoras en el spying de funciones, lo que facilita el testeo de interacciones entre diferentes partes del código.

Estas actualizaciones hacen que escribir y depurar pruebas unitarias sea una tarea más sencilla y eficiente.

Mejoras Testing en Karma

Karma, el test runner utilizado en Angular, también ha experimentado mejoras significativas:

• Reducción en el tiempo de ejecución en modo watch gracias a un caching más eficiente del dependency graph.
• Posibilidad de configurar proxies para acceder a APIs externas durante las pruebas.
• Mejoras en la API karma.config.parseConfig() que permiten una mayor flexibilidad y personalización de la configuración.

Estas mejoras en Karma contribuyen a un proceso de testing más ágil y adaptable a distintos entornos de desarrollo.

Testing Asíncrono

El testing asíncrono ha sido simplificado y mejorado en Angular 17, incluyendo:

• El matcher .toBeObservable() para testear fácilmente observables.
• El helper waitForAsync() que facilita la espera asíncrona de aserciones.
• La función fakeAsync() que simula el paso del tiempo en pruebas, lo que es particularmente útil para probar funcionalidades que dependen del tiempo.

Estas herramientas ofrecen a los desarrolladores un mayor control y facilidad al escribir pruebas para código asíncrono.

Pruebas de Servicio Testing

Las pruebas de servicios también han recibido atención en esta actualización:

• Nuevo helper SpyObject que genera dobles espías de forma automática.
• La función inject() facilita la inyección y el mockeo de dependencias en las pruebas.

Estas herramientas simplifican el proceso de testing de servicios, haciendo que sea más fácil simular y probar su comportamiento.

Mejoras en Testing de Componentes

Finalmente, el testing de componentes ha sido mejorado con:

• La opción de usar render() en lugar de TestBed en muchos casos, lo que resulta en pruebas más simples y directas.
• Soporte para findComponent() y findComponents(), facilitando la búsqueda y prueba de componentes dentro del entorno de testing.

Estas mejoras permiten a los desarrolladores escribir pruebas de componentes de manera más eficiente y con menos código boilerplate.

Mantente a la Vanguardia con Angular 17

Con cada nueva versión, Angular continúa evolucionando y Angular 17 no es la excepción. Esta versión trae consigo una serie de actualizaciones significativas y mejoras de rendimiento que son esenciales para cualquier desarrollador que busque mantenerse al día con las últimas tendencias en tecnología web.

Si realmente quieres aprovechar todo el potencial que Angular 17 tiene para ofrecer, nuestro curso completo de Angular te proporcionará las habilidades necesarias para crear aplicaciones robustas y de alto rendimiento. Desde conceptos fundamentales hasta técnicas avanzadas, te guiaremos a través de cada nueva característica y te enseñaremos cómo implementarlas en proyectos reales.

Únete a nuestro curso y asegúrate de que estás equipado con el conocimiento y la experiencia para sobresalir en el mundo del desarrollo moderno.