Hace unas semanas, se lanzó oficialmente Angular 18, y ya hemos tenido la oportunidad de probarlo y explorar sus mejoras. Angular 18 es la versión más reciente de este popular framework, que llega con una serie de nuevas funcionalidades y optimizaciones que prometen mejorar aún más el desarrollo de aplicaciones web. En este artículo, te contaremos sus principales novedades y cómo pueden beneficiar a los desarrolladores.
1. Qué hay de nuevo en Angular 18
2. Zoneless Change detection (Soporte experimental)
– Implementando Zoneless
– Agrupamiento de Eventos por Defecto en Angular 18
– Zoneless y await nativo
3. Signals
4. Nuevas Funcionalidades en Formularios
– Eventos de Cambio de Estado y Valor
5. Deferrable views
6. Nuevas Directivas control flow
7. Ng-content con contenido alternativo
8. Event replay
– ¿Qué es «Event Replay»?
9. Material 3 es estable
10. angular.dev La nueva web oficial de Angular
Qué hay de nuevo en Angular 18
Sin ninguna duda y después de ver esta nueva versión, vemos que Angular 18 se ha enfocado en la mejora del rendimiento y en la simplificación del desarrollo.
Zoneless Change detection (Soporte experimental)
En versiones anteriores, Angular utiliza la librería ZoneJS para activar la detección de cambios. Esta dependencia tiene ciertas desventajas en términos de rendimiento y experiencia en el desarrollo.
Con la nueva versión 18, Angular quiere empezar a quitarse esta dependencia y ha incluido una detección de cambios propia. Esta nueva funcionalidad Zoneless, elimina esta dependencia con Zone.js pero hay que recalcar que esta funcionalidad es experimental, por tanto esta aun en desarrollo y no se recomienda su uso para producción
Implementando Zoneless
Para probar Zoneless en nuestros proyectos solo tenemos que añadir provideExperimentalZonelessChangeDetection en nuestro boostrap.
bootstrapApplication(App,
{
providers: [
provideExperimentalZonelessChangeDetection()
]
});Después de este cambio puedes eliminar ZoneJS de tus polyfills en el archivo angular.json, siempre que no tengas dependencias que afecten a esta librería.
Los desarrolladores debemos ir adaptándonos poco a poco a estos cambios ya que en el futuro tendremos:
- Mayor compatibilidad para micro frontends y la interoperabilidad con otros frameworks
- Tiempos de renderizado y ejecución mucho más rápidos
- Una depuración del código mas sencilla
- Webs y aplicaciones mucho más ligeras, permitiendo mejorar la velocidad de carga.
La mejor forma de utilizar zoneless es con el uso de Signals.
@Component({
...
template: `
<h1>Hello from {{ name() }}!</h1>
<button (click)="handleClick()">Go Zoneless</button>
`,
})
export class App {
protected name = signal('Angular');
handleClick() {
this.name.set('Zoneless Angular');
}
}
En el ejemplo anterior, al hacer clic en el botón se invoca el método handleClick, que actualiza el valor de la señal y la interfaz de usuario. Esto funciona de manera similar a una aplicación que usa zone.js, con algunas diferencias clave. Con zone.js, Angular ejecutaba la detección de cambios cada vez que el estado de la aplicación podía haber cambiado. Sin zonas, Angular limita esta comprobación a menos desencadenantes, como actualizaciones de señales.
Este cambio incluye un nuevo planificador que evita comprobaciones múltiples. Por ejemplo, cuando el usuario hace clic en el botón, Angular ejecutará la detección de cambios solo una vez. Para más información puedes consultar la documentación oficial.
Agrupamiento de Eventos por Defecto en Angular 18
A partir de Angular 18, se utiliza el mismo planificador para aplicaciones zoneless y para aplicaciones que usan zone.js. Para reducir la cantidad de ciclos de detección de cambios en nuevas aplicaciones zone.js
Este comportamiento solo se habilita para nuevas aplicaciones, ya que puede causar errores en aplicaciones que dependan del comportamiento anterior de detección de cambios.
Para tener soporte de ambas tecnologías de eventos en proyectos existentes, configura tu proveedor de NgZone en bootstrapApplication:
import { bootstrapApplication, provideZoneChangeDetectionCoalescing } from '@angular/core';
bootstrapApplication(AppComponent, {
providers: [provideZoneChangeDetectionCoalescing(true)]
});
Zoneless y await nativo
Ahora, al crear una aplicación con la detección de cambios sin zones, Angular CLI usa async/await nativo sin convertirlo a promesas. Esto mejora la depuración y reduce el tamaño de los paquetes.
Con ZoneJS esto no ocurría así. Con esta librería cada vez que se usaba async/await en tu aplicación, se transformaba en promesas mediante Angular CLI.
Signals
Los signals, introducidos en versiones anteriores de Angular, han sido optimizados en Angular 18 para ofrecer un mejor rendimiento. Estos permiten una comunicación más eficiente entre componentes, reduciendo el tiempo de respuesta y mejorando la experiencia del usuario.
Beneficios Clave:
- Mejor Rendimiento: Optimización en la actualización y gestión de datos reactivos.
- Eficiencia: Menor latencia en la comunicación entre componentes.
- Experiencia del Usuario: Respuestas más rápidas y fluidas en las aplicaciones web.
import { signal } from 'angular/signals';
const count = signal(0);
// Optimized signal usage
count.set(1);
console.log(count.value); // Outputs: 1
Nuevas Funcionalidades en Formularios
Angular 18 introduce nuevas funcionalidades en la gestión de formularios, ofreciendo una mayor robustez y flexibilidad en el manejo de estados y valores.
Eventos de Cambio de Estado y Valor
Ahora es posible rastrear cambios en el estado y valor de los formularios mediante eventos unificados. Esto permite una mayor reactividad y control sobre los formularios, mejorando la validación y la actualización dinámica.
Estas mejoras simplifican la gestión de formularios complejos, facilitando la creación de aplicaciones más eficientes.
const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
// process the individual events
});
Deferrable views
@defer ahora es estable, permitiendote utilizar plantillas o componentes de forma diferida cuando se cumpla una condición. En la documentación oficial podrás encontrar todo sobre las deferrables views
Nuevas Directivas control flow
Angular 18 introduce nuevas directivas
@if @else
@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}
@switch
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}
De esta manera, con las nuevas directivas se simplifica el uso de *ngIf y de*ngSwitch permitiendo un código más limpio. Estos solo son unos ejemplos, en la documentación oficial de control-flow encontrarás todos los detalles.
Ng-content con contenido alternativo
Ahora podemos añadir contenido alternativo dentro de <ng-content> y este se mostrará si no se proyecta ningún contenido en el componente.
@Component({
selector: 'app-profile',
template: `
<ng-content select=".greeting">Hello </ng-content>
<ng-content>Unknown user</ng-content>
`,
})
export class Profile {}
Ahora añadiendo select="nombre" te permite definir el contenido alternativo. Por ejemplo en este componente:
<app-profile>
<span class="greeting">Good morning </span>
</app-profile>
El resultado sería el siguiente
<span class="greeting">Good morning </span>
Unknown user
Event replay
Hace unos meses, Angular comunicó que empezarían a trabajar en la fusión de Angular con un framework interno utilizado por Google llamado Wiz para mejorar el rendimiento. Gracias a esto, Angular está incorporando más características centradas en esta mejora, como la hidratación parcial. Para ello, ha incluido en el monorepo de Angular event dispatch potenciando la función de event replay en la renderización híbrida
¿Qué es «Event Replay»?
«Event replay» graba eventos de usuario mientras la página se está cargando y los reproduce una vez que la aplicación ha cargado, asegurando que las acciones del usuario no se pierdan. Esto es útil en conexiones lentas, donde los eventos del usuario se procesan una vez que la página esta completamente cargada.
Por ejemplo, si un sitio web de comercio electrónico tarda en cargar, o si el usuario tiene mala conexión. El usuario pulsara el boton de añadir producto al carrito varias veces antes de que la página haya cargado completamente. En las versiones anteriores, al no tener incluido event replay estas acciones se perderían.
Pero con la nueva version de angular, estas acciones se registrarían incluso antes de que la página se terminara de cargar y al completarse la carga, estas acciones se reproducirían, añadiendo tantos productos al carrito como veces haya pulsado el usuario
Event replay angular18
La función de repetición de eventos está disponible en Angular 18 en developer preview. Puedes habilitarlo usando withEventReplay()
bootstrapApplication(App, {
providers: [
provideClientHydration(withEventReplay())
]
});
Material 3 es estable
Angular 18 presenta Material 3 con una serie de innovaciones que mejoran la experiencia del usuario y optimizan el desarrollo de aplicaciones.
Diseño Adaptativo
Interfaces más flexibles y responsive, ajustándose mejor a multiples dispositivos y tamaños de pantalla.
Nuevos Componentes
Incorporación de nuevos componentes y mejoras en los existentes, proporcionando más opciones y funcionalidades.
Temas Modernizados
Temas visuales actualizados con una estética moderna y opciones avanzadas de personalización.
Mejoras en Accesibilidad
Enfoque en accesibilidad, mejorando el contraste, navegación y soporte para tecnologías asistivas.
Compatibilidad Mejorada
Mejor integración con las últimas versiones de Angular y herramientas del ecosistema.
Documentación Ampliada
Documentación actualizada con ejemplos prácticos y guías detalladas para facilitar la adopción de Material 3.
angular.dev La nueva web oficial de Angular.
Y para terminar, Angular sacó una nueva web mucho más moderna https://angular.dev/ donde podrás encontrar toda la documentación oficial y tutoriales prácticos basados en WebContainers.
En nuestro blog podéis encontrar más contenido.
