Las Novedades más Destacadas Que Trae Angular 13

Nube Colectiva

hace 2 años

Es impresionante lo rápido que pasa el tiempo en Angular para sacar nuevas versiones, talvez sea el Framework que más rápido y seguido saca nuevas versiones. En las primeras semanas de Noviembre de 2021 el equipo de desarrolladores que da soporte a Angular ha decidido sacar otra versión con nuevas características y funciones, veamos cuales son estas en este Post.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque Debes Acostumbrarte A Resolver Los Problemas De Código Por Tu Cuenta”:

Spotify:	Sound Cloud:	Apple Podcasts:

Bien ahora continuemos con el Post: Las Novedades más Destacadas Que Trae Angular 13.

En cada nueva versión de Angular el objetivo es encontrar nuevas formas solidas de mejorar Angular y en esta versión se ha logrado mediante la expansión de las funciones y optimizaciones basadas en Ivy, asociándolas con la excelente comunidad de Angular y continuando con el brindar un proceso de actualización estable y fluido para los equipos y proyectos.

Veamos a continuación un vistazo de como avanza Angular con el poder de “Ivy”.

Moviendo el Renderizado Angular hacia el Futuro

En Angular 12, se hablo sobre “Ivy Everywhere” y se menciono que habría algunos cambios importantes en Angular para respaldar esta iniciativa. El equipo de Angular ha sido diligente en la búsqueda de esto y esta orgulloso de haber logrado algunos cambios impactantes en la versión 12, ya que Ivy continúa abriendo puertas para optimizaciones y mejoras. Algunas de estas mejoras son:

Motor de Estado de Vista

El motor View Engine ya no esta disponible en Angular a partir de la versión 13. Esta es una gran noticia porque Angular puede continuar creando funciones basadas en Ivy que refuerzan su productividad con la plataforma. Eliminar View Engine también significa que Angular puede reducir su dependencia del ngcc (Angular Compatibility Compiler) 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 están incluidos.

Cambios en el Formato de Paquete Angular (APF)

El APF (Formato de Paquete Angular) se ha simplificado y modernizado para brindar un mejor servicio a los desarrolladores. Para optimizar el APF en Angular 13, se ha eliminado los formatos de salida más antiguos, incluidos los metadatos específicos de View Engine.

Para modernizarlo, se ha estandarizado en formatos JavaScript (JS) más modernos como ES2020. Las librerías creadas con la última versión de APF ya no requerirán el uso de ngcc (Angular Compatibility Compiler). Como resultado de estos cambios, los desarrolladores de librerías pueden esperar un resultado de paquete más reducido y una ejecución más rápida.

También se actualizo el APF para admitir Node Package Exports. Esto ayudará a los desarrolladores a no depender inadvertidamente de las APIs internas que pueden cambiar.

Actualizaciones de la API de Componentes

“Ivy” también permite mejoras en la calidad de vida en la forma en que los desarrolladores pueden crear componentes dinámicamente. La API ahora se ha simplificado. Antes de los cambios en Angular 13, 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 ViewContainerRef.createComponent sin crear una fábrica asociada.

A continuación un ejemplo de creación de componentes con versiones anteriores de Angular:


@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

@Directive({ … })

export class MyDirective {

constructor(private viewContainerRef: ViewContainerRef,

private componentFactoryResolver:

ComponentFactoryResolver) {}

createMyComponent() {

const componentFactory = this.componentFactoryResolver.

resolveComponentFactory(MyComponent);

this.viewContainerRef.createComponent(componentFactory);

}

Con la nueva API en Angular 13, el código anterior puede convertirse en:


@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

@Directive({ … })

export class MyDirective {

constructor(private viewContainerRef: ViewContainerRef) {}

createMyComponent() {

this.viewContainerRef.createComponent(MyComponent);

}

Hay muchas más mejoras de API como esta en proceso que será habilitadas por Ivy.

Fin del Soporte de IE 11

El equipo de Angular escucho los comentarios de la comunidad y trabajo para allanar el camino con la eliminación del soporte de IE 11 en Angular 13.

La eliminación de la compatibilidad con Internet Explorer 11 permite a Angular aprovechar las funciones 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 podemos eliminar polyfills y rutas de código específicos de IE. También elimina la necesidad de Carga diferencial (Differential loading). Los desarrolladores se beneficiarán de las API mejoradas y la infraestructura de construcción, mientras que los usuarios de la aplicación se beneficiarán de una carga más rápida y una experiencia de usuario mejorada.

Le ejecución ng update eliminará automáticamente estos polyfills específicos de IE y reducirá el tamaño del paquete durante la migración del proyecto.

El equipo de angular agradece a todos los que participaron en la solicitud de comentarios (RFC). Los desarrolladores que aún necesitan admitir a los usuarios de Internet Explorer 11 para proyectos existentes pueden continuar usando Angular 12 y será permitido hasta Noviembre de 2022.

Mejoras en Angular CLI

Se añadieron mejoras a la CLI (Command Line Interface ) de Angular. Angular ahora admite el uso de caché de compilación persistente de forma predeterminada para nuevos proyectos con Angular 13. Los valiosos comentarios [RFC] de Caché de compilación persistente de forma predeterminada llevaron a esta actualización de herramientas que da como resultado una mejora de hasta un 68% en la velocidad de compilación y opciones más ergonómicas. Para que los proyectos existentes que se han actualizado a Angular 13 habiliten estas características , los desarrolladores pueden agregar esta configuración al archivo angular.json:


{
    "$schema": "...",
    "cli": {
        "cache": {
            "enabled": true,
            "path": ".cache",
            "environment": "all"
        }
    }
    ...
}

{

"$schema": "...",

"cli": {

"cache": {

"enabled": true,

"path": ".cache",

"environment": "all"

}

...

}

Puedes obtener más detalles en la documentación oficial de Angular.

¡ESBuild también ve algunas mejoras de rendimiento en esta versión!

Se introdujo esbuild, que ahora funciona con terser para optimizar los scripts globales. Además esbuild admite mapas de origen CSS y puede optimizar CSS global, además de optimizar todas las hojas de estilo.

Cambios en el Framework y Actualizaciones de Dependencias

Angular 13 también presenta algunas actualizaciones útiles y cambios importantes. Primero, RxJS 7.4 es ahora el predeterminado para las aplicaciones creadas con el comando ng new. Las aplicaciones existentes que usen RxJS v6.x deberán actualizarse manualmente usando el comando npm install rxjs@7.4. Puedes obtener más información sobre los cambios de la versión 6 a la versión 7 en el siguiente resumen en rxjs.dev

Asimismo ahora hay soporte para TypeScript 4.4. Puedes encontrar más información en el Blog de TypeScript.

Mejoras en las Pruebas con Angular

Se han realizado algunas mejoras importantes TestBed que ahora hacen un mejor trabajo al derribar los módulos y entornos de prueba después de cada prueba. El DOM ahora se limpia 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 función se ha habilitado desde la versión 12.1.0 y ahora será la predeterminada y seguirá siendo personalizable. Podemos ver aquí como se puede configurar para todo el conjunto de pruebas a través del método TestBed.initTestEnvironment:


beforeEach(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(
        BrowserDynamicTestingModule,
        platformBrowserDynamicTesting(),
        {
            teardown: { destroyAfterEach: true }
        }
    );
});

beforeEach(() => {

TestBed.resetTestEnvironment();

TestBed.initTestEnvironment(

BrowserDynamicTestingModule,

platformBrowserDynamicTesting(),

{

teardown: { destroyAfterEach: true }

}

);

});

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


beforeEach(() => {
    TestBed.resetTestEnvironment();
    ...
    TestBed.configureTestingModule({
        declarations: [TestComp],
        teardown: { destroyAfterEach: true }
    });
});

beforeEach(() => {

TestBed.resetTestEnvironment();

...

TestBed.configureTestingModule({

declarations: [TestComp],

teardown: { destroyAfterEach: true }

});

Esto proporciona la flexibilidad para aplicar estos cambios donde tengan más sentido para cada proyecto y sus pruebas. Puedes consultar este artículo de Lars Gyrup Brink Nielsen para obtener más información.

Mejoras en Componentes

Las accesibilidad desde Angular 11 tiene que ser la base de todo lo que se construyo dentro y fuera de la comunidad Angular. El equipo de Angular se ha tomado esta responsabilidad en serio y el trabajo que ha realizado ha dado como resultado mejoras y cambios significativos en los componentes de Angular Material.

Todos los componentes basados en Material Design (MDC) han sido evaluados para cumplir con los estándares elevados en áreas como contraste, objetivos táctiles, ARIA y más.

Para tener una mejor idea de cómo estos cambios afectan a los componentes, echa un vistazo a los ajustes que se han realizado en los tamaños de los objetivos táctiles para componentes como la checkbox y el radio button.

Una comparación de los tamaños de los objetivos táctiles. Los tamaños de la derecha son los nuevos tamaños.

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

Obtén más información sobre estos cambios en la publicación hecha en el Blog de Angular sobre cómo mejorar la accesibilidad de Angular Component.

Otras Actualizaciones Destacadas

Con el lanzamiento de Angular 11 en el año 2020, se presento soporte para insertar fuentes de Google Fonts. Ahora se esta ampliando la compatibilidad con Adobe Fonts. Recuerda, las fuentes insertadas pueden mejorar el rendimiento de tu aplicación al acelerar el FCP (First Contentful Paint).

¡Este cambio ahora está habilitado para todos de forma predeterminada! Todo lo que necesitas es hacer ng update. Puedes ver el siguiente video sobre inserción de fuentes que puede ser útil:

Asimismo se ha realizado cambios importantes en los documentos de la web angular.io para brindar a los desarrolladores más imformación sobre la API de localización. Las guías de localización se han actualizado para incluir secciones más pequeñas para que el viaje de aprendizaje sea más claro.

También se agrego más documentación de la API para $localize.

Contribuciones de la Comunidad

La comunidad Angular nunca de aparecer de una manera enorme al agregar características al Framework. El equipo de Angular está increíblemente agradecido por ser una comunidad tan vibrante y solidaria. Veamos a continuación algunas de las contribuciones que se incluyeron en esta versión 13 de Angular:

Activar/Desactivar Validadores Dinámicamente

Este aporte fue enviado por Nirmal Bhagwani, este Pull Request permite que los validadores integrados se deshabiliten estableciendo el valor en null. Esto se vuelve cada vez más útil al construir formas dinámicas.

Restaurar el Historial después de la Navegación Cancelada

Ahmed Ayed contribuyo con un Pull Request que permite que la flag o bandera canceledNavigationResolution del enrutador restaure el valor calculado del historial del navegador cuando se establece en computed.


RouterModule.forRoot(
    routes,
    { canceledNavigationResolution: 'computed' },
);

RouterModule.forRoot(

routes,

{ canceledNavigationResolution: 'computed' },

);

Las contribuciones anteriores son las que más destaca el equipo de Angular, pero aún más contribuciones vinieron de la comunidad:

¡Y más!

El equipo de Angular está muy agradecido con todos los miembros de la comunidad que han hecho contribuciones al Framework.

Hasta aquí terminamos con este Post en donde te compartimos las novedades más destacadas que nos trajo la versión 13 de Angular, nos vemos en un próximo update de Angular.

Conclusión

Mediante este Post hemos conocido las novedades más destacadas que trae esta versión de Angular, puedes obtener una descripción general más detallada en el registro de cambios completo, alojado en el repositorio GitHub de Angular.

Nota(s)

Los novedades y características mencionadas en este Post pueden dejar de existir, ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Angular.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.