Nueva versión Angular v12, ¿qué hay de nuevo?

por jesuscuesta el en Angular,Javascript

Ya tenemos nueva versión de Angular liberada, V12, la cual viene con más cambios y con la orientación que llevará en los próximos años. ¿Qué mejoras nos encontramos?

Como tenían planificado, hoy han liberado la versión 12 de Angular, aunque ya podíamos realizar pruebas en las semanas anteriores. Lo que nos vamos a poder encontrar en esta versión, van a ser cambios ya en la configuración central que teníamos como opcionales en la versión 11, mejoras en las funcionalidades y la orientación que vamos a ver en las siguientes versiones de Angular. Sí, siguientes versiones, porque antes de que acabe el año, posiblemente tendremos la versión 13.

Entre los cambios que han destacado en en artículo de su blog, podemos destacar:

Moving Closer to Ivi EveryWhere

View Engine ha sido deprecado y en las siguientes versiones lo eliminarán. Las librerías antiguas que lo utilicen, todavía serán compatibles con Ivy, pero los desarrolladores deberían ir actualizando dichas librerías a Ivy. Explicado en más detalle de lo que conlleva y las ventajas en este otro artículo.

 

Transitioning from Legacy i18n Message IDs

Actualmente, hay varios formatos de identificación de mensajes heredados que se utilizan en nuestro sistema i18n. Estos identificadores de mensajes heredados son frágiles ya que pueden surgir problemas basados ​​en los espacios en blanco y las plantillas de formato y las expresiones de ICU. Para resolver este problema, están migrando lejos de ellos. El nuevo formato de identificación de mensajes canónicos es mucho más resistente e intuitivo. Este formato reducirá la invalidación de traducción innecesaria y el costo de retraducción asociado en aplicaciones donde las traducciones no coinciden debido a cambios en los espacios en blanco, por ejemplo.

Desde v11, los nuevos proyectos se configuran automáticamente para usar los nuevos ID de mensajes y ahora tenemos herramientas para migrar proyectos existentes con traducciones existentes. Más información en la guía.

 

The Future of Protractor

El equipo de Angular ha estado trabajando con la comunidad para determinar el futuro de Protractor (librería para realizar test funcionales, basada en Selenium). Actualmente, están revisando los comentarios compartidos en el RFC.. Han optado por no incluirlo en nuevos proyectos y, en su lugar, ofrecen opciones con soluciones de terceros populares en la CLI de Angular. Actualmente están trabajando con Cypress, WebdriverIO y TestCafe para ayudar a los usuarios a adoptar las soluciones alternativas. Más información próximamente a medida que se desarrolle.

Desde hace un par de años, posiblemente, en aquellos proyectos frontend que os encontréis, sobre todo si es React o Vue, estaréis usando Cypress. Esta librería nos facilita muchas de las tareas para los test funcionales, además de añadir mejoras y una plataforma UI. En el caso de que ya estuvieseis utilizando NX, ellos ya la habían integrado para proyectos Angular.

 

Nullish Coalescing

El operador de Nullish Colascing (??) ha estado ayudando a los desarrolladores a escribir código más limpio en clases de TypeScript durante un tiempo. Ahora puedes utilizar esta funcionaladad en las plantillas de angular en v12!
Ahora, en las plantillas, los desarrolladores pueden usar la nueva sintaxis para simplificar condicionales complejos. Por ejemplo:

{{age! == null && age! == undefined? age: calculateAge ()}}

Se convierte en:

{{ age ?? calculateAge ()}}

 

Stylish Improvements

A partir de la v12, los componentes de Angular ahora admitirán Sass en línea en el campo de estilos del decorador @Component. Anteriormente, Sass solo estaba disponible en recursos externos debido al compilador Angular. Para habilitar esta función en sus aplicaciones existentes, tienes que agregar «inlineStyleLanguage»: «scss» a angular.json. De lo contrario, estará disponible para nuevos proyectos usando SCSS.

En la versión v11.2, agregamos soporte para Tailwind CSS. Para comenzar a usarlo en proyectos: instale el paquete tailwindcss desde npm y luego inicialice Tailwind para crear tailwind.config.js en su proyecto. Esta librería lleva unos años estando en boca de los desarrolladores frontend y los influencers técnicos. Parece que el equipo de Angular esta queriendo incluir más rápidamente las librerías y mejoras que se utilizan en otros proyectos frontend. Tal vez en un futuro cercano también veamos algo de Houdini.

Angular CDK y Angular Material han adoptado internamente el nuevo sistema de módulos de Sass. Si su aplicación usa Angular CDK o Angular Material, deberás asegurarte de haber cambiado de node-sass al paquete sass npm. El paquete node-sass no se mantiene y ya no se mantiene al día con las nuevas funciones incorporadas al lenguaje Sass.

Además, tanto Angular CDK como Angular Material exponen una nueva superficie de API Sass diseñada para el consumo con la nueva sintaxis @use. Esta nueva superficie API ofrece las mismas características, pero con nombres más significativos y puntos de entrada más ergonómicos. Todas las guías de material.angular.io se han reescrito por completo para mostrar esta nueva superficie de API, así como para proporcionar explicaciones más detalladas de los conceptos de tematización y las API.

Al actualizar a v12, su aplicación cambiará automáticamente a la nueva API de Sass al actualizar su aplicación con ng update. Este comando refactorizará cualquier declaración de Sass @import para el código de Angular CDK y Angular Material a la nueva @use API. A continuación, se muestra un ejemplo del antes y el después.

 

Strict Mode

Si en la versión 11, podíamos utilizarlo de forma opcional, el modo estricto está habilitado de forma predeterminada en la CLI. El modo estricto ayuda a detectar errores al principio del ciclo de desarrollo. Más información sobre el modo estricto en la documentación o en el blog de angular.

 

Webpack 5

En la actualización v11, agregaron soporte experimental para Webpack 5. Hoy, tenemos una versión lista para producción del soporte de Webpack 5 en Angular. Para aquellos que no hayan estado atentos a los últimos meses en las publicaciones de Microfrontends y mejoras de Webpack, desde el verano del año pasado se lleva realizando muchas publicaciones sobre Module Federation, lo que nos permitirá crear aplicaciones y arquitecturas más escalables con Angular. En las anteriores semanas pudimos ver como Manfred Steyer estuvo hablando de las mejoras, además de la publicación de una librería para integrarlo con Angular. La librería en cuestión la podemos encontrar publicada en npm.

 

Versión Typescript

También están actualizando la versión compatible de TypeScript a 4.2. Consulta esta publicación para obtener más detalles sobre lo que se incluye.

 

IE11 soporte deprecado

Angular es una plataforma imperecedera, lo que significa que se mantiene actualizada con el ecosistema web en evolución. Eliminar la compatibilidad con navegadores heredados nos permite centrar nuestros esfuerzos en brindar soluciones modernas y un mejor soporte a desarrolladores y usuarios. Van a comenzar a incluir un nuevo mensaje de advertencia de desaprobación en Angular v12, y eliminaran el soporte para IE11 en Angular v13. Puede ver el fundamento de su decisión en este RFC.

Esto va a implicar que si deseas utilizar la versión de Angular 13 en proyectos compatibles con IE11, lo vas a tener mucho más complicado. Esto para el 2022, no debería ser un problema, dado que el propio microsoft lo está dejando fuera de su estrategia. Aunque en el caso de que tengamos una aplicación antigua con otra versión de angular, siempre la podremos integrar dentro con diferentes estrategias como webcomponents, module federation, configuraciones de servidor, etc.

 

APP_INITIALIZER

Esta funcionalidad, que posiblemente la habréis utilizado para tener configuraciones avanzadas en angular o añadir configuraciones por servidor, nos añade una mejora que nos permitirá utilizar observables dentro de ella.

 

Más cambios

Estos serían los cambios que están destacando, pero hay muchas más mejoras y correcciones de errores. Podemos encontrarlos todos en su changelog. En posteriores artículos procederemos a analizarlos y a explicar más en detalle los anteriores.

 

Bibliografía