ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.
Hace unos días salía a la luz Angular 12. Esta versión del framework de desarrollo web Front-End podría definirse como una actualización de mantenimiento. No contiene muchos cambios que puedan romper versiones anteriores y empiezan a declarar como obsoletas herramientas antiguas con la intención de promover una nueva forma de hacer las cosas.
Como siempre, antes de entrar en detalle expliquemos qué significa que Angular haya sacado su nueva versión major siguiendo el versionado semántico:
- Versión major: se esperan cambios que puedan romper antiguas versiones y es probable que se requieran ciertos pasos (manuales o automáticos) para actualizar la aplicación.
- Versión minor: se pueden introducir pequeñas novedades, pero siempre con retrocompatibilidad con versiones anteriores.
- Versión patch: básicamente introducen soluciones a bugs conocidos.
Si bien, como se ha dicho al principio, esta versión de Angular no contiene grandes cambios sobre los que haya que hacer migración, ng update nos hará el trabajo más llevadero en ese sentido. Este comando nos permitirá realizar la migración de nuestra aplicación de una versión anterior a esta, sin apenas esfuerzo.
Vamos a ver las principales novedades de Angular 12.
La confirmación de Ivy
Por fin, es en la versión 12 en la que Angular declara como obsoleto "View Engine", el antiguo motor de renderizado de las templates. En esta versión se sustituye por Ivy. Este cambio no implica que tu aplicación vaya a dejar de funcionar (no lo notarás por fuera, aunque sí por dentro), pero sí que nos advierten de que cualquier aplicación que utilice el antiguo motor debería ser migrada con cierta urgencia, ya que en las próximas majors dejarán de darle soporte a través del compilador.
Protractor
Si en su día trabajaste con AngularJS, el precursor de Angular, seguramente te suene esta herramienta. Se centra en el desarrollo de test end to end, y era la herramienta casi de facto a la hora de trabajar en este tipo de test con el antiguo framework. Protactor fue creada por el equipo de AngularJS y, originalmente, Angular salió con Protractor también como herramienta por defecto para la gestión de este tipo de test.
El pasado mes se anunció el fin de su desarrollo (puedes leer un poco más aquí) que coincidirá con la versión 15 de Angular a finales de 2022. Así que, en la versión 12 ya se ha anunciado el cese de su soporte oficialmente desde el framework.
Las razones del cese del desarrollo de Protractor se pueden resumir en que la herramienta ha quedado obsoleta y existen mejores competidores/opciones en el mercado para resolver el mismo problema, como por ejemplo Cypress, que es la herramienta más utilizada hoy en día.
Mejora tu vida trabajando con Angular 12
La nueva versión de Angular introduce nuevas características, muy interesantes, que mejorarán la calidad de vida de cualquier desarrollador que actualice la versión. Empezando por el operador de coalescencia nula, que ahora se puede utilizar en los templates de Angular de la siguiente forma:
{{ date ?? transformDate() }}
Lo que permitirá reducir alguna línea de código para simplificar la lógica de la plantilla y mejorar su lectura.
Se incluyen los validadores min y max para los formularios, y también trae una mejora muy interesante como es la ejecución por defecto de ng build directamente sobre el entorno de producción. En versiones anteriores la ejecución de este comando compilaba tu proyecto usando la configuración del entorno de desarrollo, mientras que para compilar para producción tenías que usar explícitamente ng build --prod. Desde mi punto de vista, este cambio hace mucho más intuitivo el uso de la CLI, ya que ahora puedes usar ng serve para desarrollo y ng build para producción, dependiendo del entorno en el que estés trabajando, simplificando además tus scripts muy probablemente.
Adicionalmente, Angular 12 ha añadido soporte para Webpack 5. Una actualización que introdujeron en Angular 11 pero que por tiempo no pudieron completar y pospusieron hasta esta nueva versión.
Y para terminar, como todas las major, también incrementan la versión de TypeScript soportada hasta la 4.2. Este lenguaje no sigue el versionado semántico, por lo que cualquier cambio en su versión puede significar que incluya algún tipo de incompatibilidad y es por ello que sólo se actualiza en las versiones major.
Mejora en el sistema de internacionalización de mensajes
Como ya he mencionado alguna vez, no soy un gran defensor del sistema de internacionalización implementado por Angular, y suelo recomendar otras opciones. En esta versión 12, Angular intenta corregir alguno de los problemas con la lógica que se usa para generar los identificadores de los diferentes mensajes dentro de la aplicación evitando espacios, por ejemplo. Siguiendo un formato canónico e introduciendo una herramienta de migración para poder transformar el formato de los identificadores antiguos al nuevo formato.
Soporte de Internet Explorer 11
Con esta versión, y siguiendo los pasos del resto de frameworks y librerías, Angular comienza oficialmente a reducir el soporte para Internet Explorer 11. En esta versión se limitarán a mostrar avisos sobre dicho navegador, pero a partir de la siguiente, a finales de año, dejarán definitivamente de darle soporte.
En resumen
Al igual que en la versión anterior, Angular continúa enfocándose sobre todo en traer pequeñas mejoras que sin ser grandes novedades: mejoran la experiencia de desarrollo y estabilizan el framework.
Cambios como el de Protractor pueden llegar a ser problemáticos si no se gestionan correctamente, pero forman parte del ciclo de vida de desarrollo del software y, en mi opinión, es sano que ocurran estas cosas para no acabar heredando una deuda técnica que se pueda convertir en algo ingestionable en el futuro.
En el roadmap oficial de Angular se pueden leer los próximos pasos que Angular tiene en mente para las futuras versiones. Para Angular 13 se esperan cambios importantes, ya que, seguramente, como mínimo actualizarán la versión de RxJS, lo cual suele ser algo que implica ciertas incompatibilidades en las aplicaciones ya existentes. Veremos qué pasa...
Ah, por cierto: por supuesto, el curso de Angular de CampusMVP ya está actualizado a Angular 12, con todos los ejemplos revisados y adaptados, actualizado lo que se ve impactado y demás...
Fecha de publicación: