Esta vez el enfoque se nota en pulir el trabajo que ya estaba, graduando muchas de las nuevas API en estables, respondiendo a peticiones comunes de los desarrolladores y lanzando experimentalmente uno de los proyectos más deseados de la hoja de ruta: la detección de cambios sin zonas (zoneless change detection.)
Los aspectos más destacados de la nueva versión de angular son:
- Soporte experimental para la detección de cambios sin zonas
Angular.dev es ahora el nuevo hogar para los desarrolladores de Angular - Material 3, deferrable views, built-in control flow son ahora estables e incorporan una serie de mejoras
- Mejoras en el renderizado del lado del servidor como soporte de hidratación i18n, mejor depuración, soporte de hidratación en Angular Material y repetición de eventos impulsada por la misma biblioteca que Google Search.
Para una visión general, asegúrate de ver el vídeo de nuestro evento de lanzamiento:
Evolución de la detección de cambios
Históricamente, una biblioteca llamada zone.js ha sido la responsable de activar la detección de cambios de Angular. Esta librería venía con una serie de desventajas en cuanto a experiencia del desarrollador y rendimiento.
Actualmente Angular busca que no se dependa de zone.js, y ha lanzado las primeras API experimentales para zoneless.
Puedes probar el soporte experimental de zoneless en Angular a partir de hoy. Añade provideExperimentalZonelessChangeDetection al bootstrap de tu aplicación:
Después de añadir el proveedor, elimina zone.js de tus polyfills en angular.json.
De cara al futuro, zoneless abre muchas puertas a los desarrolladores:
- Mejorar la composabilidad para micro-frontends y la interoperabilidad con otros frameworks.
- Render inicial y tiempo de ejecución más rápidos
- Menor tamaño de bundle y cargas de página más rápidas
- Trazas de pila más legibles (readable stack)
- Depuración más sencilla
La mejor forma de utilizar zoneless en tus componentes es con 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 signal y actualiza la interfaz de usuario. Esto funciona de forma similar a una aplicación que utiliza zone.js, con pocas diferencias.
Con zone.js, Angular ejecuta la detección de cambios cada vez que el estado de la aplicación puede haber cambiado. Sin zonas, Angular limita esta comprobación a menos desencadenantes, como las actualizaciones de signals. Este cambio también incluye un nuevo planificador con coalescencia para evitar la comprobación de cambios varias veces consecutivas.
Cuando el usuario haga clic en el botón de arriba, por ejemplo, Angular ejecutará la detección de cambios sólo una vez gracias al coalescente del planificador. Aprende más sobre zoneless en su documentación.
Actualización a zoneless
Angular ha estado experimentando una emocionante evolución últimamente y zoneless es una parte fundamental de ella. Mientras evolucionamos el framework, se aseguranro de que todas las API existentes sigan funcionando como se espera y de que haya una buena historia de interoperabilidad con todo lo nuevo que introducimos en Angular.
Zoneless es otro ejemplo de su enfoque en la interoperabilidad. Además, se aseguraron de trasladar las aplicaciones existentes a zoneless fuera lo más sencillo posible.
Si tus componentes son compatibles con la estrategia de detección de cambios ChangeDetectionStrategy.OnPush de Angular, también deberían serlo en su mayoría con zoneless, ¡lo que hará que su transición sea perfecta!
Coalescencia por defecto
A partir de la versión 18, se utiliza el mismo programador para las aplicaciones sin zonas y para las aplicaciones que utilizan zone.js con la coalescencia activada. Para reducir el número de ciclos de detección de cambios en las nuevas aplicaciones zone.js, también han activado la coalescencia de zonas de forma predeterminada.
Este comportamiento sólo está habilitado para aplicaciones nuevas porque puede causar errores en aplicaciones que dependen del comportamiento de detección de cambios anterior.
La coalescencia reduce los ciclos innecesarios de detección de cambios y mejora significativamente el rendimiento de algunas aplicaciones.
Para optar por la coalescencia de eventos para proyectos existentes, configure su proveedor NgZone en bootstrapApplicationbootstrapApplication:
bootstrapApplication(App, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true })
]
});Espera nativa para aplicaciones sin zonas
Zone.js intercepta muchas llamadas del navegador para conectar la detección de cambios de Angular. Desafortunadamente, async/await es una de las APIs que zone.js no puede parchear y, por lo tanto, tenemos que pasarla a promesas a través de la CLI de Angular.
Eso es subóptimo porque todos los navegadores modernos soportan async/await que son más expresivos que las promesas y optimizados por el tiempo de ejecución de JavaScript.
Actualmente, si creas una aplicación que utiliza la detección de cambios experimental sin zonas, la CLI de Angular utilizará el async/await nativo sin degradarlo a promesas. Esto mejorará la depuración y hará que tus paquetes sean más pequeños.
Los componentes soportan zoneless
Han estado habilitando el soporte zoneless en el CDK de Angular y en Angular Material. Esto también ayudó a descubrir y pulir algunas de las asperezas del modelo zoneless.
Nuevo hogar para los desarrolladores de Angular
Durante los últimos 18 meses han trabajado duro en angular.dev para ofrecer un viaje intuitivo y práctico de introducción y guías detalladas mejoradas. angular.dev es el sitio web oficial de documentación de Angular.
Además del nuevo y moderno aspecto, puedes encontrar un tutorial práctico interactivo basado en WebContainers, una zona de juegos interactiva con ejemplos, una búsqueda mejorada con Algolia, guías actualizadas, navegación simplificada y mucho más.
Todas las solicitudes a angular.io ahora redirigen automáticamente a angular.dev. +
Material 3 ya es estable
Hace un par de meses, se introdujo soporte experimental para Material 3. Después de atender los comentarios de los desarrolladores y pulir componentes Material 3,
Junto con esto, también se refresco material.angular.io con los nuevos temas y documentación de Material 3.
Signals API en la vista previa para desarrolladores
En las versiones 17.1 y 17.2 de Angular se anunciaron las nuevas entradas de signals, consultas basadas en signals y una nueva sintaxis de salida.
Las vistas aplazables ya son estables
En los últimos seis meses, hemos oído hablar mucho de las vistas aplazables y de cómo permiten a los desarrolladores mejorar sin esfuerzo el Core Web Vitals de sus aplicaciones.
Por ejemplo, Bill.com compartió que utilizando @defer redujeron el tamaño del paquete de una de sus aplicaciones en un 50%. Hoy en día, ¡las vistas aplazables ya son estables! Puedes utilizarlas en tus aplicaciones y bibliotecas.El flujo de control integrado ya es estable
Junto con las vistas aplazables, en la versión 17 también anunciaron el nuevo flujo de control integrado con un rendimiento mejorado. Se ha observado una adopción significativa de esta nueva sintaxis.
Durante la vista previa, mejoramos aún más la comprobación de tipos del flujo de control, habilitaron un aliasing de variables implícito más ergonómico y establecieron barreras de protección para ciertos antipatrones relacionados con el rendimiento.
Mejoras en el renderizado del lado del servidor
Hace aproximadamente un año introdujeron la hidratación. Basado en la base de datos pública HTTPArchive, el 76% de las aplicaciones Angular v17 que usan prerendering o server-side rendering ya están usando hydration.
Había un obstáculo principal para conseguir que más gente aprovechara la hidratación: la falta de soporte i18n. Tras colaborar con el equipo de Chrome la hidratación para bloques i18n está disponible en modo de vista previa para desarrolladores en la versión 18.
Repetición del evento
Hace menos de dos meses, anunciaron el proyecto en curso a largo plazo que pretende hacer converger Angular y el framework interno de Google, Wiz. Como recordatorio, Angular y Wiz han estado sirviendo a dos segmentos diferentes de aplicaciones en el pasado - Wiz fue utilizado principalmente para aplicaciones enfocadas al consumidor, hiper centrado en el rendimiento y Angular se ha centrado en la productividad y la experiencia del desarrollador.
Como resultado de los esfuerzos de convergencia, Wiz integró profundamente Angular Signals en su modelo de renderizado. Del mismo modo, Angular ahora está trayendo más y más características centradas en el rendimiento, tales como la hidratación parcial.
Experiencia de depuración mejorada
Han actualizado Angular DevTools para visualizar el proceso de hidratación de Angular. Al lado de cada componente puedes encontrar un icono que representa el estado de hidratación del componente. Para previsualizar qué componentes ha hidratado Angular en la página también puedes habilitar un modo de superposición. Si tu app tiene algún error de hidratación, Angular DevTools lo visualizará en el explorador de componentes.
Soporte de hidratación en CDK y Material
En la v17 algunos componentes de Material y CDK de Angular no eran compatibles con la hidratación, lo que provocaba su rerenderizado. A partir de la v18, todos los componentes y primitivas son totalmente compatibles con la hidratación.
Hidratación parcial
Es una técnica que te permite hidratar tu aplicación de forma incremental después del renderizado del lado del servidor. La hidratación incremental de tu aplicación permite cargar menos JavaScript por adelantado y mejora el rendimiento de tu aplicación.
La hidratación parcial se construye sobre la misma base que las vistas aplazables. En lugar de renderizar el bloque @placeholder en el servidor como ocurre hoy, podrás habilitar un modo en el que Angular renderizará el contenido principal del bloque @defer en el servidor. En el cliente, Angular descargará el JavaScript asociado e hidratará un bloque diferido sólo cuando se cumplan las condiciones de activación especificadas en una plantilla. Por ejemplo, esta es una API hipotética:
@defer (render on server; on viewport) {
<app-calendar/>
}El bloque anterior renderizará el componente calendario en el servidor. Una vez que llegue al cliente, Angular descargará el JavaScript correspondiente e hidratará el calendario haciéndolo interactivo sólo después de que entre en la ventana gráfica.
Alojamiento robusto para sus aplicaciones con Firebase App Hosting
Con la creciente complejidad de la plataforma web, el alojamiento de la aplicación tiene un papel crítico cuando se trata de rendimiento, fiabilidad, productividad y escala.
Las aplicaciones que utilizan renderización híbrida tienen diferentes requisitos de alojamiento para la renderización del lado del servidor, la renderización previa y la renderización del lado del cliente. Gestionar esta complejidad manualmente podría ser engorroso. Firebase App Hosting ahora maneja todo esto de forma transparente para los desarrolladores.
Firebase anunció App Hosting en Google I/O este año. App Hosting agiliza el desarrollo y despliegue de aplicaciones dinámicas Angular, ofreciendo soporte de framework integrado, integración con GitHub e integración con otros productos Firebase como Authentication, Cloud Firestore y Vertex AI para Firebase.
Y aún hay más...
Junto con las grandes iniciativas que estamos llevando adelante, siempre dedicamos tiempo a abordar las necesidades comunes de los desarrolladores. Estos son algunos de los aspectos más destacados de la versión 18:
Especificación de un contenido fallback para ng-content
Una de las cuestiones más votadas que hemos tenido ha sido la de especificar un contenido por defecto para ng-content. En la v18 ya está disponible. He aquí un ejemplo rápido:
@Component({
selector: 'app-profile',
template: `
<ng-content select=".greeting">Hello </ng-content>
<ng-content>Unknown user</ng-content>
`,
})
export class Profile {}Ahora podemos utilizar el componente:
<app-profile>
<span class="greeting">Good morning </span>
</app-profile>Lo que resultará en:
<span class="greeting">Good morning </span>
Unknown userEventos de cambio de estado de control unificados
Las clases FormControl, FormGroup y FormArray de Angular forms ahora exponen una propiedad llamada events, que te permite suscribirte a un flujo de eventos para este control de formulario. Usándolo puedes rastrear cambios en el valor, estado táctil, estado prístino y el estado del control.
Ahora puedes usar:
const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
// process the individual events
});Automatización de la migración al constructor de aplicaciones
En Angular v17 anunciamos el "constructor de aplicaciones" como estable y lo habilitamos por defecto para nuevos proyectos. Bajo el capó utiliza Vite con esbuild para reemplazar la experiencia webpack anterior.
Para la mayoría de las aplicaciones, los desarrolladores pudieron actualizarse al nuevo sistema de construcción actualizando su angular.json.
Dado que webpack no se encuentra en la ruta crítica del nuevo sistema de compilación, hemos hecho que la dependencia de webpack sea opcional, lo que nos ha permitido reducir el número total de dependencias de la CLI de Angular en más de un 50%. Este cambio acelerará el tiempo de instalación de Angular CLI.
Redirecciones de ruta como funciones
Para permitir una mayor flexibilidad al tratar con redirecciones, en Angular v18 redirectTo ahora acepta una función que devuelve una cadena. Por ejemplo, si desea redirigir a una ruta que depende de algún estado de tiempo de ejecución, puede implementar una lógica más complicada en una función:
const routes: Routes = [
{ path: "first-component", component: FirstComponent },
{
path: "old-user-page",
redirectTo: ({ queryParams }) => {
const errorHandler = inject(ErrorHandler);
const userIdParam = queryParams['userId'];
if (userIdParam !== undefined) {
return `/user/${userIdParam}`;
} else {
errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
return `/not-found`;
}
},
},
{ path: "user/:userId", component: OtherComponent },
];TypeScript 5.4
Por último, pero no por ello menos importante, han actualizado la dependencia de TypeScript para que puedas beneficiarte de las últimas funciones de TypeScript 5.4.
Librerías populares de gestión de estados como ngrx, ngxs y rxAngular ya están adoptando las signals de Angular y permitiendo una reactividad fina en los componentes.
Hace dos meses el GDE de Angular, Brandon Roberts, lanzó la versión 1.0 de Analog.js - un meta framework para Angular impulsado por la comunidad. Proporciona algunas características interesantes como el enrutamiento basado en archivos, rutas API, soporte de primera clase markdown y mucho más. El equipo de Analog.js ha estado experimentando con un formato de componente de archivo único que ha encantado a la comunidad.
