Quizás algo más demorada de lo esperado, pero siempre cumpliendo, Angular presenta su versión 15 con novedades interesantes para todos los perfiles de desarrollo.
API Standalone
Se venía mostrando en versiones inestables de desarrollo y ya era un secreto a voces. Por fin, la versión 15 de Angular nos trae la primer versión estable de las API Standalone integradas al framework. A grandes rasgos (porque me gustaría profundizarlo en un posteo propio) este sistema permite la creación de Apps de Angular sin la necesidad de utilizar NgModule, lo cual cambia por completo el ecosistema general de Angular.
Directiva de Imagen
Otra feature presentada en preview durante la versión anterior, aterriza en Angular 15 en su versión estable. Concretamente con esta nueva Directiva de Angular se busca agilizar la carga de imágenes dentro de la plataforma, logrando mejoras del 75% en Lighthouse según nos cuentan (aunque bueno Lighthouse y Angular son de la misma compañía). Lo cierto es que se trata de una directiva también tipo Standalone y que consigue predecir el espacio de uso de la imagen sin necesidad de configurarlo. Algo interesante para empezar a probar.
Componentes MDC
Esta posiblemente sea una de las features favoritas de los devs frontend. Finalmente han refactorizado el código de Angular Material basándose en los estándares de MDC, lo cual permite alinear los componentes de Angular Material con las específicaciones de Material Design (las cuales se están mostrando ya prácticamente como un estándar). Los scripts de migración funcionan muy bien y son automáticos, sin embargo Angular ha optado por mantener los viejos componentes aun en el core como parte del Legacy System. Eso si, si nos interesa utilizar los componentes viejos vamos a tener que cambiar la ruta de importación. Como consejo, dudo que lo mantengan mucho más, yo optaría por ajustar sus aplicaciones por el sistema nuevo.
CDK Listbox
Al conjunto de CDK para construir componentes UI se suma uno nuevo, el Listbox. El constructor provee de directivas para ayudar a construir Listbox interactivos según los estándares de WAI ARIA.
Soporte experimental esbuild
Con el objetivo de mejorar la velocidad de los bundles de javascript, han agregado la posibilidad de utilizar esbuild como soporte experimental de devkit. Solo debe activarse en la configuración.
Mejoras en el CLI
Con el objetivo de reducir la cantidad de archivos generados han hecho una pequeña pero sustencial distribución de los directorios de un proyecto. Han removido los archivos de test.ts, polyfills.ts y environments. Por su parte los polyfills se pueden declarar directamente en el archivo angular.json (lo cual tiene sentido y deja todo el sistema más ordenado).
Mejoras en los Rastreos de Error
A esta altura no será novedad para nadie, con el fin de ayudarnos a detectar errores se ha mejorado nuevamente la información ofrecida por el log de errores. La diferencia esta vez es que la mejora corresponde a una encuesta realizada por Angular donde más del 50% de los desarrolladores reconocen que el principal problema a la hora de debuguear en Angular son los mensajes de error. Muy por encima de otras cosas (también muy complejas) como la estructura modular o las Observables.
En cuanto a las mejoras, las han realizado en colaboración con Chrome DevTools y realmente en las previews han mostrado una verdadera conversión de mensajes de error muy crípticos en auténticas joyas para entender el error dentro del código de Angular en lugar del compilado.
