Angular 13 🔥

Se vino Angular 13, señores así es ya está aquí. Esta última versión trae todo tipo de actualizaciones y características para ayudar a sus equipos a construir grandes aplicaciones.

Consigue Angular v13 ahora ejecutando ng update en tu proyecto. También ya esta disponible una guía de actualización disponible en update.angular.io para ayudar a los equipos a obtener instrucciones sobre cómo actualizar sus proyectos.

¿Cuál es el objetivo de actualizar las versiones de Angular?

Con cada nueva versión el objetivo es encontrar formas materiales de mejorar Angular.

En esta versión, fue realizado a través de la expansión de características y optimizaciones basadas en Ivy, asociándonos con nuestra excelente comunidad Angular y continuando con un proceso de actualización suave y estable para tus equipos y proyectos.

¿Cómo esta haciendo Angular para avanzar con el poder de Ivy?

En primer lugar Moviendo el renderizado de Angular hacia el futuro. En la versión v12 de mayo de 2021 se hablo de "Ivy Everywhere" y se menciono que habría algunos cambios importantes en Angular para apoyar esta iniciativa.

Hubo una gran diligencia en la búsqueda de esto y estamos muy contentos de haber aterrizado algunos cambios impactantes en la v13, ya que Ivy continúa abriendo puertas para optimizaciones y mejoras.

Estado de View Engine

View Engine ya no está disponible en Angular a partir de la v13. Esto es una gran noticia porque Angular puede seguir creando características basadas en Ivy que refuerzan su productividad con la plataforma.

La eliminación de View Engine también significa que Angular puede reducir su dependencia de ngcc (compilador de compatibilidad de Angular) en el futuro, y los equipos pueden esperar una compilación más rápida porque los metadatos y los archivos de resumen ya no se incluyen.

Cambios en el formato de paquete de Angular (APF)

El formato de paquete de Angular (APF) se ha racionalizado y modernizado para servir mejor a los desarrolladores. Para racionalizar el APF en la v13 se han eliminado los formatos de salida más antiguos, incluidos los metadatos específicos del motor de visualización.
Para modernizarlo, se han estandarizado los formatos JS más modernos, como ES2020. Las bibliotecas construidas con la última versión del APF ya no requerirán el uso de ngcc. Como resultado de estos cambios, los desarrolladores de bibliotecas pueden esperar una salida de paquetes más ligera y una ejecución más rápida.

También se han actualizado el APF para que sea compatible con las exportaciones de paquetes de Node. Esto ayudará a los desarrolladores a no depender inadvertidamente de APIs internas que puedan cambiar.

Actualizaciones de la API de componentes

Ivy también permite mejorar la calidad de vida de la forma en que los desarrolladores pueden crear componentes de forma dinámica.

La API se ha simplificado. Antes de los cambios en Angular v13, la creación dinámica de componentes requería mucho código repetitivo.

La nueva API elimina la necesidad de inyectar ComponentFactoryResolver en el constructor. Ivy crea la oportunidad de instanciar el componente con ViewContainerRef.createComponent sin crear una fábrica asociada.
Aquí hay un ejemplo de creación de componentes con versiones anteriores de Angular:

Con la nueva API, este código puede convertirse:

Tenemos muchas más mejoras de la API como esta en las obras que serán habilitadas por Ivy.

Fin de la compatibilidad con IE11

Esta nueva versión tuvo un arduo trabajo para allanar el camino con la eliminación del soporte de IE11 en Angular v13.
La eliminación de la compatibilidad con IE11 permite a Angular aprovechar las características modernas del navegador, como las variables CSS y las animaciones web, a través de las API web nativas. Además, las aplicaciones serán más pequeñas y se cargarán más rápido porque se pueden eliminar los polyfills y las rutas de código específicas de IE. También se elimina la necesidad de la carga diferencial.

Los desarrolladores se beneficiarán de la mejora de las API y de la infraestructura de construcción, mientras que los usuarios de las aplicaciones se beneficiarán de una carga más rápida y de una experiencia de usuario mejorada.

La ejecución de la actualización ng eliminará automáticamente estos polyfills específicos de IE y reducirá el tamaño del paquete durante la migración del proyecto.
Los desarrolladores que aún necesiten dar soporte a los usuarios de IE11 para los proyectos existentes pueden seguir utilizando Angular v12 y será soportado hasta noviembre de 2022.

Quiero más

Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más

Mejoras en la CLI de Angular

En cuanto a las actualizaciones de las herramientas de Angular. Angular ahora soporta el uso de la caché de construcción persistente por defecto para los nuevos proyectos v13. Esta actualización de las herramientas resulta en una mejora de hasta el 68% en la velocidad de construcción y más opciones ergonómicas. Para que los proyectos existentes que han sido actualizados a la v13 puedan habilitar esta característica los desarrolladores pueden añadir esta configuración a angular.json:

Es muy importante que cuando las versiones se actualizan lo mejor para conocer  más detalles, es consultar la documentación.

ESBuild también ve algunas mejoras de rendimiento en esta versión. Han introducido esbuild, que ahora trabaja con terser para optimizar los scripts globales.  Además, esbuild soporta mapas de origen de CSS y puede optimizar el CSS global, así como optimizar todas las hojas de estilo.

Cambios en el marco de trabajo y actualizaciones de las dependencias

Angular v13 también presenta algunas actualizaciones útiles y cambios importantes. En primer lugar, RxJS 7.4 es ahora el predeterminado para las aplicaciones creadas con ng new. Las aplicaciones existentes que utilizan RxJS v6.x tendrán que actualizarse manualmente mediante el comando npm install rxjs@7.4. ç

Para saber más sobre los cambios de la versión 6 a la 7, consulta este resumen en rxjs.dev. Por si fuera poco, ahora hay soporte para TypeScript 4.4.

Mejoras en las pruebas de Angular

Hemos realizado algunas mejoras importantes en TestBed que ahora hace un mejor trabajo de desmontaje de los módulos y entornos de prueba después de cada prueba.

El DOM se limpia ahora después de cada prueba y los desarrolladores pueden esperar pruebas más rápidas, menos intensivas en memoria, menos interdependientes y más optimizadas. Esta característica ha sido optativa desde la versión 12.1.0 y ahora será la predeterminada sin dejar de ser personalizable.

Así es como: se puede configurar para todo el conjunto de pruebas a través del método TestBed.initTestEnvironment:

O se puede configurar por módulo actualizando el método TestBed.configureTestingModule:

Esto proporciona la flexibilidad necesaria para aplicar estos cambios donde tengan más sentido para cada proyecto y sus pruebas.

Todo sobre los componentes

La accesibilidad (a11y) tiene que ser la base de todo lo que construimos dentro y fuera de la comunidad Angular. es por ello que el trabajo que han  realizado en esta nueva versión de angular ha dado lugar a mejoras y cambios significativos en los componentes de Angular Material.
Todos los componentes basados en MDC han sido evaluados para cumplir con los elevados estándares de a11y en áreas como el contraste, los objetivos táctiles, ARIA y más.

También se han introducido algunas mejoras en los modos de alto contraste para múltiples componentes.

Han realizado importantes cambios en la documentación de angular.io para ofrecer a los desarrolladores más información sobre la API de localización. Las guías de localización han sido actualizadas para incluir secciones más pequeñas para que el viaje de aprendizaje sea más claro. También han añadido más documentación de la API para $localize.

Contribuciones de la comunidad

Alguna de las contribuciones más relevantes  expuestas por la comunidad y que fueron tomadas en consideración para está nueva actualización son   Activar/desactivar validadores dinámicamente Este PR permite deshabilitar los validadores incorporados estableciendo el valor a null.

Esto es cada vez más útil cuando se construyen formularios dinámicos.
Restaurar el historial después de cancelar la navegación
Ahmed Ayed contribuyó con un PR que permite que la bandera del enrutador canceledNavigationResolution restaure el valor computado del historial del navegador cuando se establece como computed.

Estas son algunas de las actualizaciones, pero aún hay más contribuciones de la comunidad:
Hacer la API de SwUpdate un poco más ergonómica.
Configuración del servicio lingüístico para permitir la aplicación automática del encadenamiento opcional en los símbolos anulables.
El enrutador emite eventos de activación/desactivación cuando se conecta/desconecta una salida y mucho más.

Finalmente se puede concluir con que Angular sigue avanzando cada días, y tal como lo dejan en claro parte de quienes están detrás esto se logra gracias a la ayuda constante de la comunidad.

Fuente