3 min to read
Migrando a Angular 15, 16 y 17!
Migrando a Angular 15, 16 y 17!
Buenass como andan? El post de hoy va dedicado a migraciones de angular, compartiendo las novedades, cambios y mejoras de estas tres versiones, como para ir cerrando este 2024. También dejo la docu y guía oficial para migrar y los comandos por acá.
Angular 15
-
Standalone Components (introducción):
Aunque en Angular 16 se hicieron el estándar, en Angular 15 ya se podía empezar a usarlos para crear aplicaciones sin depender de módulos (de modo un poco experimental). Fue el primer paso hacia una forma más simple de trabajar con Angular. Si todavía no viste como funcionan los standalone, te cuento que vienen a reemplazar los modules que armábamos antes, por componentes independientes (standalone) que ya cuentan con sus propios imports y metadata necesaria para funcionar por si solos, haciendo que puedan importarse directamente estos componentes en otros, sin necesidad de crear o pertenecer a algun module para eso. Para mas info y videos, recomiendo pegarle una revisada -
Mejoras en Material Design:
Angular Material recibió actualizaciones para alinearse con las guías de Material Design 3. Se incluyeron nuevos componentes y mejoras visuales. -
Directivas como standalone:
Ahora podemos declarar directivas y pipes como standalone, haciéndolos independientes de NgModules, igual que los componentes.
-
Mejoras en el router:
El router se volvió más poderoso, con soporte mejorado para configuraciones de rutas y manejo dinámico de datos. -
Mejor compatibilidad con TypeScript:
Soporte para TypeScript 4.8, permitiendo aprovechar las características modernas del lenguaje. -
Desempeño optimizado:
Angular 15 incluyó varias mejoras internas para que las aplicaciones sean más rápidas y ligeras.
Angular 16
-
Standalone Components como estándar:
Ya no necesitamos módulos (NgModules) para trabajar. Todo es más directo (y no tan experimental) -
Signals:
Introducción de una nueva forma de manejar datos reactivos que es simple, eficiente y predecible. Si todavía no viste o trabajaste con signals, te recomiendo chusmear por acá -
SSR mejorado (Hydration):
Más eficiencia al combinar el HTML del servidor con el navegador. Esto acelera las apps. -
Router más flexible:
Nuevas APIs para trabajar con rutas dinámicas y mejor manejo de componentes. -
Rendimiento mejorado:
Optimización en cómo se renderizan y actualizan las vistas.
Angular 17
-
Signals integrados en más partes del framework:
Ahora están mejor conectados con otros elementos como los formularios y el router. Por ejemplo, antes teníamos que subscribirnos al observable del control del form para implementar lógica y desuscribirnos para evitar fugas de memoria, ahora, con signals en form de manera nativa, ya no necesitamos preocuparnos por eso ni subscribirnos.
-
Tests más simples y rápidos:
Las APIs de prueba fueron optimizadas para que todo sea más fácil y rápido. -
Actualización en TypeScript:
Soporte para las últimas versiones de TypeScript, con nuevas características. Estamos hablando de typescript 5.x.x y por las dudas comparto también la matrix de versionado -
Directivas simplificadas:
Crear directivas es más rápido, sobre todo para casos básicos. -
CLI más eficiente:
Las herramientas de línea de comandos ahora generan proyectos más rápidos y ligeros.
Storybook
Si contas con Storybook en alguno de tus proyectos, tenemos la versión 8 disponible para implementar con varias mejoras:
📸 Built-in visual testing
⚛️ React Server Component support
🎛️ Upgraded Vue and React control autogeneration
⚡️ Rearchitected Vite support, Vitest testing, and Vite 5 support
🧪 2-4x faster test builds
✨ Refreshed desktop UI
📲 Rebuilt mobile UX
🙅♀️ Removed React dependency for non-React projects
Más info y detalles por acá!
Happy coding!
