Angular 21: desarrollo web empresarial más rápido, inteligente y accesible

El equipo de Angular en Google lazó la semana pasada la versión 21 de este framework de desarrollo Front-End. Aunque de entrada pudiera parecer una versión relativamente menor, lo cierto es que es un lanzamiento estratégico que busca avanzar en tres pilares fundamentales: modernizar la experiencia de desarrollo, optimizar más aún el rendimiento e integrarse mejor con las herramientas de código basadas en inteligencia artificial.

En este artículo vamos a analizar todas las actualizaciones relevantes.

1.- Modernización del ecosistema de desarrollo de Angular: Zoneless y Vitest

La productividad de un equipo de desarrollo está muy atada a la potencia y a la simplicidad de las herramientas que utilicen. La versión 21 de Angular ha tomado una serie de decisiones estratégicas para mejorar el rendimiento, simplificar la configuración y ofrecer una experiencia de desarrollo general más moderna y ágil.

La primera de ellas es el uso de Zoneless como método por defecto para detección de cambios, algo que ya habíamos adelantado cuando salió la versión 20 de Angular, pero que todavía estaba en estado Developer Preview (o sea, no definitivo).

¿Qué es Zoneless en Angular y cuáles son sus beneficios?

Desde sus inicios con la versión 4, Angular para detectar cambios en la interfaz, ha dependido de zone.js, una biblioteca que "parchea" las APIs del navegador para detectar cuándo actualizar el DOM para responder a eventos asíncronos como peticiones HTTP, timers o eventos del propio DOM. Aunque esto proporcionaba una experiencia de desarrollo fluida, también introducía una sobrecarga importante de rendimiento.

Con Zoneless, los desarrolladores obtienen control explícito sobre cuándo y cómo se ejecuta la detección de cambios. Por ejemplo, llamando a markForCheck o aprovechando el conocimiento de los cambios de estado que ofrecen las Señales. Combinar Zoneless con Signals es una forma muy potente de disparar actualizaciones de forma más precisa.

Con la adopción masiva de Signals como mecanismo principal para la gestión del estado, ya casi completada en la versión 20 (pero no del todo), zone.js ya no es indispensable para la detección de cambios en aplicaciones modernas creadas con esta abstracción de las señales.

Además, según las métricas de adopción interna en Google, más de la mitad de las nuevas aplicaciones de Angular creadas en 2024 son ya zoneless, y cientos de ellas ya están en producción.

Por eso, en esta versión 21 se han decidido a ponerlo ya como mecanismo por defecto, lo cual ofrece a los desarrolladores varias ventajas importantes:

• Mejora de las Core Web Vitals: o sea, aplicaciones más rápidas y con mejor puntuación en las métricas de rendimiento web, tan importantes para SEO y la experiencia del usuario. Mejor rendimiento de la UI, en definitiva.
• Soporte nativo para async-await: un comportamiento más predecible y alineado con los estándares de JavaScript.
• Mayor compatibilidad con el ecosistema JS: mejor interoperabilidad con otras bibliotecas de JavaScript.
• Reducción del tamaño del bundle: un efecto secundario de no incluir zone.js. El paquete final de la aplicación es más pequeño y por lo tanto se descarga antes, lo cual es especialmente importante en móviles.
• Depuración más sencilla: las pilas de llamadas (call stacks) son más limpias y fáciles de seguir.

Vitest como framework por defecto para testing en Angular

Otro cambio importante en las herramientas del desarrollador es que, tras la "descontinuación" de Karma en 2023, y basándose en el feedback abrumadoramente positivo de la comunidad durante su fase experimental, se tomó la decisión de adoptar Vitest como el nuevo ejecutor de pruebas (test runner) por defecto para Angular.

A partir de esta versión 21, el soporte para Vitest es estable y está listo para producción, y será la opción que se utilice por defecto en todos los nuevos proyectos. Debido a ello, y mucho ojo, el soporte experimental que había para Jest (aunque Vitest es compatible con Jest) y para Web Test Runner se va a eliminar en la próxima versión 22, para marzo o abril. Karma y Jasmine seguirán siendo compatibles por el momento para facilitar la transición en proyectos existentes.

Para los proyectos que quieras migrar ya, el equipo de Angular proporciona un schematic experimental que automatiza gran parte del proceso: ng g @schematics/angular:refactor-jasmine-vitest.

Este cambio impacta en la experiencia de desarrollo ya que la importante mejora de rendimiento que trae Vitest implica ciclos de integración continua (CI/CD) más rápidos. Además, la experiencia de consola modernizada que tiene Vitest disminuye la fricción y el tiempo de depuración, mejorando la productividad general del equipo de desarrollo.

2.- Formularios con Señales en Angular (experimental)

La gestión de formularios es algo fundamental y básico en las aplicaciones de todo tipo, pero sobre todo en las empresariales. Sin embargo, y aunque es bastante sencillo de utilizar en Angular, históricamente ha tenido bastantes cosas mejorables, como la aparición de código repetitivo de ReactiveFormsModule, la sobrecarga para casos de uso simples y la complejidad de implementar la interfaz ControlValueAccessor.

Angular 21 ataca todo esto con Signal Forms, una nueva biblioteca que reemplaza los modelos imperativos por una filosofía basada en la reactividad de las señales. Este cambio no es solo una mejora de la API, sino una redefinición de cómo se plantea filosóficamente y se gestiona el estado de los formularios.

Signal Forms se fundamenta en tres principios clave que definen su arquitectura:

1. Reactivos: el modelo de datos del formulario se define mediante una señal (signal). Cualquier cambio en esta señal se propaga automáticamente a los campos de la interfaz de usuario, y viceversa, eliminando la necesidad de sincronización manual.
2. Declarativos: la lógica de validación y el estado se declaran de forma centralizada, lo que resulta en un código más legible y predecible
3. Componibles: la estructura del formulario refleja directamente la forma del modelo de datos, permitiendo una construcción modular.

El siguiente fragmento muestra la declaración de un componente para un formulario de inicio de sesión básico (he dejado fuera el HTML para hacerlo más claro) con Signal Forms, que nos permite la simplicidad del enfoque:

import { form, Field } from '@angular/forms/signals';
@Component({
  imports: [Field],
  template: `
    Email: <input [field]="loginForm.email">
    Password: <input [field]="loginForm.password">
  `
})
export class LoginForm {
  login = signal({
    email: '',
    password: ''
  });
  loginForm = form(this.login);
}

El código tiene los siguientes elementos centrales:

• [field]: es una nueva directiva que enlaza un control de la plantilla (como un <input>) a un campo específico del modelo del formulario, gestionando la sincronización bidireccional.
• signal(): define el modelo de datos (login) como una fuente reactiva de "verdad".
• form(): recibe la señal del modelo y la transforma en una estructura de formulario con capacidades reactivas para acceder al estado y los valores de cada campo.

Con Signal Forms, un componente solo necesita definir las entradas y los modelos apropiados, y la directiva [field] gestionará el "binding" automático. Se incluyen validadores integrados para patrones comunes, como la validación de correos electrónicos (email). Además, la API permite la creación de validadores personalizados tan solo pasando una función callback a la función form(). A diferencia de los sistemas de formularios anteriores que solían devolver null para indicar una validación correcta, Signal Forms devuelve undefined.

Esto puede parecer poca cosa, pero es importante para la consistencia y la previsibilidad del código. Un campo con un valor de undefined se excluye de la estructura del árbol de campos, mientras que null podría interpretarse como un valor de dato válido, aunque vacío, lo que puede causar ambigüedad o comportamientos inesperados en el sistema de validación y en la estructura final del modelo del formulario. Ahora es obligatorio devolver undefined, por lo que la posible ambigüedad que había antes se ha eliminado. Seguir este patrón promueve la consistencia en toda la API basada en señales.

Todo esto implica una experiencia de desarrollo más sencilla, con un código con mayor seguridad de tipos y un "no me hagas pensar" de manual que todos agradeceremos.

De momento está como experimental, pero funciona bien. Lo que ocurre es que seguramente tardará todavía un par de versiones en ser una característica definitiva (dentro de un año, estimo) y en el ínterin puede que le hagan cambios que rompan hacia atrás. Pero quizá te merezca la pena usarlos porque son más sencillos y probablemente las migraciones entre versiones sean sencillas.

3.- Accesibilidad: Angular Aria (Developer Preview)

La accesibilidad de las aplicaciones es más importante que nunca. Y no solo eso, sino que además en Europa todos los nuevos desarrollos deben ser accesibles desde junio de 2025. Además, en el desarrollo empresarial la consistencia de la marca es muy importante, y exige la creación de sistemas de diseño personalizados.

Sin embargo, esto crea tensiones entre esta necesidad de una estética única y el riesgo de crear componentes complejos desde cero y que sean accesibles. Angular Aria es un nuevo enfoque que desacopla la lógica de accesibilidad y el comportamiento de un componente, de su presentación visual.

Angular Aria introduce el concepto de "componentes headless" en el ecosistema de Angular. La biblioteca proporciona un conjunto de patrones de accesibilidad y comportamientos de interfaz de usuario complejos y listos para usar. Pero, a propósito, no incluye ningún estilo. Este enfoque le da al desarrollador libertad total para aplicar su propio look and feel, asegurando que los componentes se integren perfectamente en la identidad visual de la marca sin sacrificar las mejores prácticas de accesibilidad.

La versión inicial de Angular Aria se lanza en Developer Preview con 8 patrones de interfaz de usuario, que abarcan un total de 13 componentes. Estos patrones fueron seleccionados por su complejidad y alta demanda en aplicaciones modernas:

• Accordion
• Combobox
• Grid
• Listbox
• Menu
• Tabs
• Toolbar
• Tree

Puedes probarlos instalando el paquete correspondiente: npm i @angular/aria .

Angular Aria es una opción de UI más que se une a otras oficiales dentro del mundillo Angular:

• Angular CDK (Component Dev Kit): es el paquete nativo "fundacional" de Angular. Ofrece primitivas de comportamiento (como Drag and Drop) que sirven como bloques de construcción para componentes totalmente personalizados.
• Angular Material: se construye sobre el anterior para proporcionar una biblioteca de componentes muy completa que siguen los principios de Material Design de Google. Ideales para una implementación rápida y consistente, pero poco personalizable.
• Angular Aria: ahora nos da componentes headless accesibles para que los equipos apliquen sus propios estilos. Es ideal para sistemas de diseño personalizados.

Recuerda: todavía en preview, pero probablemente para Angular 22 ya sean una realidad soportada al 100%.

4.- Angular MCP: integración con Copilot y agente de código IA

La adopción de herramientas de IA generativa en el ciclo de vida del desarrollo de software ya no es una opción. Los vas a usar sí o sí, te guste o no. Angular 21 aborda esta realidad de manera proactiva con la estabilización del servidor Angular MCP del que ya nos hicimos eco en su momento: "Servidor MCP de Angular CLI 20.1".

Esta herramienta se posiciona como una de las soluciones para garantizar que los asistentes de IA y los modelos grandes de lenguaje (LLMs) trabajen con la información más actualizada sobre Angular y el código de un proyecto específico.

Dado que los modelos se entrenan con datos hasta una fecha determinada (el famoso knowledge cuttoff), rápidamente quedan desactualizados respecto a las nuevas APIs y las mejores que traen los frameworks. El servidor MCP actúa como un puente entre el agente IA y la documentación, dándole a los agentes IA unas herramientas que le permiten interactuar en tiempo real con un proyecto Angular, consultar la documentación más reciente y utilizar patrones de código modernos.

Desde su lanzamiento por sorpresa en julio de 2025, ha mejorado mucho. Ahora el servidor MCP expone todas estas herramientas:

Es muy interesante porque asegura que el código generado por la IA utilice las APIs y los estándares más recientes, incluyendo explícitamente el uso de Signal Forms y Angular Aria. Permite revisar el código existente o automatizar migraciones complejas.

En resumen: ¿por qué Angular 21 es muy interesante, sobre todo para las empresas?

Angular 21 se confirma como la mejor opción para organizaciones y empresas que buscan estabilidad, rendimiento y una hoja de ruta preparada para el futuro.

La transición a una arquitectura zoneless por defecto y la introducción de Signal Forms son cambios arquitectónicos muy importantes. Angular se desprende de la herencia, eliminando riesgos en la elección del framework a largo plazo. Las empresas pueden invertir en Angular con la confianza de que su base tecnológica es sólida, escalable y está diseñada para construir aplicaciones de alta complejidad y rendimiento sostenido.

Por otro lado, el servidor MCP es la inversión estratégica de Angular en la experiencia de desarrollo del futuro (más bien del presente). Demuestra una comprensión muy buena y mejor que la de otras herramientas de la revolución que está suponiendo la IA en el sector. Me parece algo muy relevante, desde luego y que le da ventaja frente a otras opciones.

Angular está ganando más atractivo con cada nueva versión, y parece que el equipo ha dado con la tecla, convirtiéndose en la opción preferida de las empresas desde hace ya mucho tiempo, frente a opciones más "hippies" como React.