Las Novedades más Destacadas que trae Angular 12

Hace un mes aproximadamente fue lanzada la versión número 11 del popular framework Angular, en esta versión se han agregado características interesantes, en la mayoría son a solicitud de la comunidad de desarrolladores que usan Angular y requerían que se solucionaran algunas de estas características, bien en este Post vamos a ver lo más destacado que nos trajo esta versión de Angular, vamos con ello.

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

• Las Novedades más Destacadas que nos Trajo Angular 11
• Las Novedades más destacadas que trae Angular 10
• Como usar el Componente Google Maps de Angular 9
• Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
• Como usar el Componente YouTube de Angular 9
• 5 Herramientas para el trabajo con Angular en este 2020
• Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1
• 5 Extensiones de Visual Studio Code recomendables para Desarrolladores de Angular
• Puedes leer más en la categoría Angular

Antes de continuar te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify	SoundCloud	Apple Podcasts

Bien ahora continuemos con el Post: Las Novedades más Destacadas que trae Angular 12. 

Antes de adentrarnos en las novedades, hagamos un viaje para recordar el estado de Angular. Una clave vital para el futuro de Angular es Ivy y lo que significa. El equipo de desarrollo de Angular, ha estado trabajando en lanzamientos recientes con el objetivo de hacer converger el ecosistema Angular en Ivy, lo llaman a este enfoque “Ivy Everywhere”.

Ivy en muchos aspectos de Angular

El momento clave en la próxima evolución de Angular finalmente ha llegado, desde Angular 12 se desaprueba View Engine y en una futura versión de Angular se eliminará del Framework.

Las librerías actuales que usan View Engine seguirán funcionando con las aplicaciones de Ivy (No es necesario que los desarrolladores hagan alguna configuración), pero los autores de estas librerías, deben comenzar a planificar la transición a Ivy.

Transición desde los ID de mensajes de i18n heredados

En la actualidad, 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 espacios en blanco y las plantillas de formato y expresiones de ICU.

Para resolver este inconveniente, Angular 12 esta alejándose de estos identificadores. El nuevo formato de identificación de mensajes canónicos es mucho más persistente 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 Angular 11, los nuevos proyectos se configuran automáticamente para usar los nuevos ID de mensajes y ahora hay herramientas para migrar proyectos existentes con traducciones existentes, puedes aprender más en este enlace.

El Futuro de Protractor (Transportador)

El equipo de Angular ha estado trabajando con la comunidad para determinar el futuro de Protractor (Transportador) y se están revisando los comentarios compartidos en el RFC. Todavía se esta trabajando en mejorar Protractor poco a poco. Se ha optado por no incluirlo en nuevos proyectos, en cambio se brinda opciones con soluciones populares de terceros en la CLI de Angular.

En la actualidad el equipo de Angular esta trabajando con Cypress, WebdriverIO y TestCafe para ayudar a los usuarios a adoptar las soluciones alternativas. Se brindará más información a medida que se va desarrollando.

Fusión Nula

El operador de fusión nula (??) ha estado ayudando a los desarrolladores a escribir código más limpio en clases de TypeScript desde hace un tiempo. El equipo de Angular está encantado de anunciar que los desarrolladores podrán llevar el poder de la fusión nula a las plantillas de Angular 12.

En las plantillas los desarrolladores pueden usar la nueva sintaxis para simplificar condicionales complejos, por ejemplo:

Se convierte a:

Solo es cuestión que la uses en tus proyectos con Angular 12 para que veas lo rápido que es trabajar con Fusión Nula.

Mejoras en la Documentación de Angular

El equipo de Angular esta constantemente trabajando para mejorar la experiencia de aprendizaje de Angular para los desarrolladores. Se han realizado algunos cambios significativos en la documentación y se ha creado una guía de proyección de contenido, con más contenido nuevo en proceso.

Se han recibido muchos comentarios y preguntas para mejorar la documentación de Angular. Buenas noticias, se ha actualizado angular.io con una guía para colaboradores que ayudará a las personas que buscan mejorar los documentos de Angular. Échale un vistazo y ayuda a mejorar los documentos de Angular.

Algo más, desde el último lanzamiento importante de Angular, se han incluido guías y videos para ciertos mensajes de error. La comunidad ha descubierto que esto es increíblemente útil, así que si no los has visto, pásate y échales un vistazo.

Mejoras con Estilo

Desde Angular 12, los componentes de Angular ahora admiten Sass en línea en el campo styles del decorador @Component. En versiones anteriores, Sass solo estaba disponible en recursos externos debido al compilador Angular. Para activar esta función en tus aplicaciones existentes, debes añadir “inlineStyleLanguage”: “scss” en el archivo angular.json. De lo contrario, estará disponible para nuevos proyectos que utilicen SCSS.

Asimismo en Angular 12 se agrego soporte para Tailwind CSS. Para comenzar a usarlo en tus proyectos, instala el paquete npm tailwindcss y luego inicializa Tailwind para crear el archivo tailwind.config.js en tu proyecto. Ahora los equipos de trabajo están listos para comenzar a usar Tailwind en Angular.

Angular CDK y Angular Material han adoptado internamente el nuevo sistema de módulos Sass. Si tu aplicación usa Angular CDK o Angular Material, debes asegurarte de cambiar node-sass al paquete npm sass. El paquete node-sass ya no esta siendo mantenido por su creador y por ende no cuenta con la nuevas funciones incorporadas en el lenguaje Sass.

Asimismo, 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.

Luego que actualices a Angular 12, tu aplicación cambiará automáticamente a la nueva API de Sass al actualizarla mediante el comando ng update. Este comando refactorizará cualquier declaración @import de Sass para Angular CDK y código de Angular Material en la nueva API @use. Puedes ver un ejemplo de como era antes y como es ahora en este enlace.

Desactivación del Soporte para IE11

Angular es una plataforma imperecedera, esto significa que se mantiene actualizada con el ecosistema web que esta en constante evolución. Eliminar la compatibilidad con navegadores heredados, permite concentrar los esfuerzos del equipo de Angular en brindar soluciones modernas y un mejor soporte para desarrolladores y usuarios.

Desde Angular 12 se mostrará un mensaje de advertencia de desaprobación para los navegadores Internet Explorer 11 y se eliminará el soporte en Angular 13. Puedes ver la decisión del equipo de Angular en este RFC.

Apoyo de la Comunidad

La comunidad de Angular ha trabajado arduamente para mejorar la experiencia de Angular y el equipo de Angular lo agradece. Estos son algunos de los PRs que se han conseguido gracias al increíble trabajo de la comunidad:

• Evitar que ngZone lance una advertencia relacionada con la navegación innecesariamente #25839.
• HttpClient admite la especificación de metadatos de solicitud #25751.
• Fueron agregados los validadores de formulario min y max #39063.
• Apoyo del trabajo de APP_INITIALIZER con observables #33222.

Se irán agregando otros cambios conforme se vayan aprobado para las siguientes versiones de Angular.

Otras Geniales Características

A continuación veamos otras actualizaciones que se han incluido en esta nueva versión de Angular:

• La ejecución del comando ng build ahora tiene como valor predeterminado production, esto ahorra a los equipos de trabajo algunos pasos adicionales y ayuda a evitar compilaciones de desarrollo accidentales en producción.
• El modo strict, está habilitado de forma predeterminada en la CLI. El modo estricto ayuda a detectar errores al principio del ciclo de desarrollo. Obtén mas información sobre el modo estricto en la documentación y revisa esta publicación en el Blog de Angular.
• El servicio de idiomas basado en Ivy está pasando de la suscripción a la activación de forma predeterminada. El servicio de idiomas ayuda a aumentar tu productividad al crear aplicaciones con Angular, ya que proporciona excelentes funciones como finalización de código, errores, sugerencias y navegación dentro de las plantillas angulares. Puedes ver este video para aprender más.
• En Angular 11 se agregó soporte experimental para Webpack 5. Ahora en Angular 12 se ha lanzado una versión lista para producción con Webpack 5.
• Se esta actualizando la versión compatible de TypeScript a 4.2, puedes consultar esta publicación para obtener más detalles sobre lo que se incluye.

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

Conclusión

En este Post hemos aprendido las novedades que trae la versión 12 de Angular, puedes seguir la cuenta de Twitter de Angular para mantenerte actualizado, asimismo puedes visitar su renovado canal de YouTube en donde encontrarás contenido nuevo y fresco.

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.