En esta página:
- Partes
- Identidad con Visión de Futuro
- Documentación de Cara al Futuro
- Flujo de Control Incorporado
- Declaraciones Condicionales
- Bucle for incorporado
- ¡Dale Una Oportunidad!
- Vistas Aplazables
- Experiencia de Renderizado Híbrido Renovada
- La Hidratación Deja de Estar Como Vista Previa Para Desarrolladores
- Nuevo Paquete @angular/ssr
- Implementando Tu Aplicación con SSR
- Nuevos Hooks de Ciclo de Vida
- Vite y esbuild Por Defecto Para Nuevos Proyectos
- Nota (s)
El equipo de Angular anunció en los primeros días de Noviembre de 2023 el lanzamiento de Angular 17.
En su versión 16, nos anunciaron geniales novedades y en esta nueva versión se continúan esas mejoras y también se agregan nuevas funciones.
En este post te compartiré Las Novedades más Destacadas Que Trae Angular 17, vamos con ello.
Partes
- Parte 1
- Parte 2 (Final)
Al igual que en artículos similares, para conocer mejor las novedades, colocaré el nombre de la novedad, un texto descriptivo y una imagen o elemento referencial. Como Angular 17 trae muchas novedades este Post será en 2 partes, para asi poder leer mejor estas nuevas características.
Identidad con Visión de Futuro
El renacimiento de Angular ha ido a todo vapor durante las últimas versiones.
Angular ha ido ganando impulso con mejoras como la reactividad basada en señales o signals, la hidratación, los componentes independientes, la composición directiva y docenas de otras características.
A pesar de la rápida evolución de Angular, su marca no ha podido ponerse al día: ha sido casi idéntica desde los primeros días de AngularJS.
¡Hoy, Angular, probado en batalla por millones de desarrolladores, obtiene una nueva apariencia que refleja su experiencia y rendimiento de desarrollador de cara al futuro!
Documentación de Cara al Futuro
Junto con la nueva imagen, también el equipo desarrollo un nuevo hogar para la documentación de Angular: angular.dev .
Para el nuevo sitio web de documentación, hay una nueva estructura, nuevas guías, contenido mejorado y se creo una plataforma para un viaje de aprendizaje interactivo que te permitirá aprender Angular y Angular CLI a tu propio ritmo, directamente en el navegador.
¡La nueva experiencia de aprendizaje interactivo funciona con WebContainers y te permite utilizar el poder de Angular CLI en cualquier navegador web moderno!
Se lanzo una vista previa beta de angular.dev y se tiene planeado convertirlo en el sitio web predeterminado para Angular en v18.
Puedes obtener más información sobre la nueva apariencia de Angular y angular.dev en Anuncio de angular.dev.
¡Ahora pasemo a profundizar en las funciones de la versión 17 de Angular!
Flujo de Control Incorporado
Para mejorar la experiencia del desarrollador, se ha lanzado una nueva sintaxis de plantilla de bloque que te brinda funciones potentes con API declarativas simples.
Debajo del capó, el compilador Angular transforma la sintaxis en instrucciones JavaScript eficientes que podrían realizar flujo de control, carga diferida y más.
Angular 17 usa la nueva sintaxis de bloque para un flujo de control integrado y optimizado.
Después de realizar estudios de usuarios, se identificó que muchos desarrolladores tienen dificultades con *ngIf, *ngSwitch y *ngFor.
Minko Gechev, quien forma parte del equipo de Angular, menciona que lleva trabajando con Angular desde 2016 y personalmente todavía tiene que buscar la sintaxis de *ngFor y trackBy.
Después de recopilar comentarios de la comunidad, los socios y realizar estudios de investigación de UX, se desarrolló un nuevo flujo de control integrado para Angular.
El flujo de control incorporado permite:
- Sintaxis más ergonómica y más cercana a JavaScript, por lo que es más intuitiva y requiere menos búsquedas de documentación.
- Mejor verificación de tipos gracias a una reducción de tipos más óptima.
- Es un concepto que existe principalmente en el momento de la compilación, lo que reduce el espacio en tiempo de ejecución (haciéndolo “desaparecer”), lo que podría reducir el tamaño de su paquete hasta en 30 kilobytes y mejorar aún más sus puntuaciones de Core Web Vital.
- Está disponible automáticamente en tus plantillas sin importaciones adicionales.
- Mejoras de rendimiento significativas que cubriremos más adelante.
Declaraciones Condicionales
Veamos una comparación lado a lado con *ngIf:
|
1 2 3 4 5 6 7 8 |
<div *ngIf="loggedIn; else anonymousUser"> El usuario ha iniciado sesión </div> <ng-template #anonymousUser> El usuario no ha iniciado sesión </ng-template> |
Con la declaración if incorporada, esta condición se verá así:
|
1 2 3 4 5 6 7 |
@if (loggedIn) { El usuario ha iniciado sesión } @else { El usuario no ha iniciado sesión } |
Poder proporcionar el contenido para @else directamente es una simplificación importante en comparación con la cláusula else de la alternativa heredada *ngIf.
El flujo de control actual también hace que sea trivial tener @else if, lo que históricamente ha sido imposible.
La ergonomía mejorada es aún más visible con *ngSwitch:
|
1 2 3 4 5 6 7 |
<div [ngSwitch]="accessLevel"> <admin-dashboard *ngSwitchCase="admin"/> <moderator-dashboard *ngSwitchCase="moderator"/> <user-dashboard *ngSwitchDefault/> </div> |
que con el flujo de control incorporado se convierte en:
|
1 2 3 4 5 6 7 |
@switch (accessLevel) { @case ('admin') { <admin-dashboard/> } @case ('moderator') { <moderator-dashboard/> } @default { <user-dashboard/> } } |
El nuevo flujo de control permite una delimitación de tipos significativamente mejor en las ramas individuales en @switch, algo que no es posible en *ngSwitch.
Bucle for incorporado
Una de mis actualizaciones favoritas es el bucle for integrado, que además de las mejoras en la experiencia del desarrollador, lleva la velocidad de renderizado de Angular a otro nivel.
Su sintaxis básica es:
|
1 2 3 4 5 6 7 |
@for (user of users; track user.id) { {{ user.name }} } @empty { Lista vacía de usuarios } |
A menudo vemos problemas de rendimiento en las aplicaciones debido a la falta de la función trackBy en *ngFor.
Una diferencia en @for es que la track es obligatoria para garantizar un rendimiento de diferenciación rápido.
Además, es mucho más fácil de usar ya que es solo una expresión en lugar de un método en la clase del componente.
El bucle incorporado @for también tiene un acceso directo para colecciones sin elementos a través de un bloque opcional @empty.
La declaración @for utiliza un nuevo algoritmo de diferenciación y tiene una implementación más óptima en comparación con *ngFor, lo que hace que el tiempo de ejecución sea hasta un 90 % más rápido para los puntos de referencia del framework comunitario.
¡Dale Una Oportunidad!
¡El flujo de control integrado está disponible en la versión 17 en la vista previa para desarrolladores hoy!
Uno de los objetivos del diseño del flujo de control integrado era permitir una migración completamente automatizada.
Para probarlo en tus proyectos existentes, utiliza la siguiente migración:
|
1 2 3 |
ng generate @angular/core:control-flow |
¿Que sigue?
Ya puedes utilizar el flujo de control integrado con el servicio de idiomas más reciente, el equipo de Angular trabaja estrechamente con JetBrains para permitir un mejor soporte en sus productos.
También el equipo de Angular, está en contacto con Sosuke Suzuki de Prettier para garantizar el formato adecuado en las plantillas de Angular.
Todavía existen algunas diferencias entre la forma en que el flujo de control integrado maneja la proyección de contenido en comparación con *ngIf, *ngFor y *ngSwitch, el equipo de Angular trabajará en ellas durante los próximos meses.
Aparte de eso, el equipo de Angular confía en la implementación y estabilidad del flujo de control integrado, por lo que puedes probarlo hoy.
El equipo de Angular menciona que le gustaría mantenerlo en la vista previa para desarrolladores hasta la próxima versión importante para que puedan abrir la puerta a posibles correcciones incompatibles con versiones anteriores en caso de que encuentren oportunidades para mejorar aún más la experiencia del desarrollador.
Vistas Aplazables
¡Ahora hablemos del futuro de la carga diferida!
Aprovechando la nueva sintaxis de bloques, se ha desarrollado un mecanismo nuevo y poderoso que puedes usar para hacer que tus aplicaciones sean más rápidas.
Al comienzo de este artículo, mencioné que las vistas diferidas llevan el rendimiento y la experiencia del desarrollador al siguiente nivel porque permiten una carga diferida declarativa y potente con una ergonomía sin precedentes.
Supongamos que tienes un blog y te gustaría cargar de forma diferida la lista de comentarios de los usuarios.
Actualmente, tendrías que usarl ViewContainerRef y al mismo tiempo administrar toda la complejidad de las limpiezas, administrar los errores de carga, mostrar un marcador de posición, etc.
Ocuparse de varios casos extremos puede resultar en un código no trivial, que será difícil de probar y depurar.
Las nuevas vistas diferibles te permiten cargar de forma diferida la lista de comentarios y todas sus dependencias transitivas con una sola línea de código declarativo:
|
1 2 3 4 5 |
@defer { <comment-list /> } |
La parte más increíble es que todo esto sucede a través de una transformación en tiempo de compilación: Angular abstrae toda la complejidad al encontrar componentes, directivas y pipes utilizadas dentro de un bloque @defer, generando importaciones dinámicas y gestionando el proceso de carga y cambio entre estados.
Comenzar a cargar lentamente un componente cuando un determinado elemento DOM ingresa a la ventana gráfica implica mucha más lógica no trivial y la API IntersectionObserver.
¡Angular hace que el uso de IntersectionObservers sea tan simple como agregar un activador de vista aplazable!
|
1 2 3 4 5 6 7 8 |
@defer (on viewport) { <comment-list /> } @placeholder { <!-- Un contenido de marcador de posición para mostrar hasta que se carguen los comentarios --> <img src="comments-placeholder.png"> } |
En el ejemplo anterior, Angular primero representa el contenido del bloque de marcador de posición.
Cuando se vuelve visible en la ventana gráfica, comienza la carga del componente <comment-list/>.
Una vez que se completa la carga, Angular elimina el marcador de posición y renderiza el componente.
También hay bloques para estados de carga y error:
|
1 2 3 4 5 6 7 8 9 10 11 |
@defer (on viewport) { <comment-list/> } @loading { Loading… } @error { Loading failed :( } @placeholder { <img src="comments-placeholder.png"> } |
¡Eso es todo! Hay un montón de complejidad bajo el capó que Angular administra por ti.
Las vistas aplazables ofrecen algunos factores desencadenantes más:
- on idle — carga el bloque de forma perezosa cuando el navegador no esté haciendo ningún trabajo pesado.
- on immediate — comienza a cargar de forma diferida automáticamente, sin bloquear el navegador.
- on timer(<time>) — retrasa la carga con un temporizador.
- on viewport y on viewport(<ref>) — la ventana gráfica también permite especificar una referencia para un elemento de anclaje. Cuando el elemento de anclaje sea visible, Angular cargará el componente de forma perezosa y lo renderizará.
- on interaction y on interaction(<ref>) — permite iniciar la carga diferida cuando el usuario interactúa con un elemento en particular.
- on hover y on hover(<ref>) — activa la carga diferida cuando el usuario pasa el cursor sobre un elemento.
- when <expr> — permite especificar tu propia condición mediante una expresión que devuelve una promesa.
|
1 2 3 4 5 |
@defer (on viewport; prefetch on idle) { <comment-list /> } |
¡Las vistas aplazables están disponibles en la vista previa para desarrolladores en la versión 17! Obten más información en esta guía.
¿Que sigue?
Las vistas aplazables están listas para usar y te recomendamos encarecidamente que las pruebes.
La razón por la que se encuentran en la vista previa para desarrolladores, es para que el equipo de Angular pueda recopilar más comentarios e introducir cambios en la superficie de la API hasta que sean bloqueados para seguir el control de versiones semántico como el resto del framework.
Actualmente, la representación del lado del servidor mostrará el marcador de posición especificado.
Una vez que el framework carga la aplicación y la hidrata, las vistas diferibles funcionarán como se describió anteriormente.
Como siguiente paso, el equipo de Angular explorará la representación del contenido dentro del bloque de aplazamiento en el servidor y habilitarán la hidratación parcial en el cliente.
En este escenario, el cliente no descargará el código para la vista diferida hasta que el activador lo solicite.
En este punto, Angular descargará el JavaScript asociado e hidratará solo esta parte de la vista.
También habrá mucha interoperabilidad interesante con las señales o signals, ¡así que esten atentos!
Experiencia de Renderizado Híbrido Renovada
En Angular 17, se acerca el renderizado del lado del servidor (SSR) y la generación de sitios estáticos (SSG o prerenderizado) a los desarrolladores con un mensaje en el comando ng new:
Este es un cambio que el equipo de Angular quería realizar desde hace bastante tiempo.
Alternativamente, puedes habilitar SSR en nuevos proyectos con el siguiente comando:
|
1 2 3 |
ng new my-app --ssr |
La Hidratación Deja de Estar Como Vista Previa Para Desarrolladores
Durante los últimos 6 meses miles de aplicaciones adoptaron la hidratación.
¡En Angular 17, la hidratación ya no está en la vista previa para desarrolladores y está habilitada de forma predeterminada en todas las aplicaciones nuevas que utilizan renderizado del lado del servidor!
Nuevo Paquete @angular/ssr
¡Se movió el repositorio de Angular Universal al repositorio de Angular CLI y se hizo que la renderización del lado del servidor sea una parte aún más integral del conjunto de herramientas de Angular!
En Angular 17, para agregar soporte de renderizado híbrido a tu aplicación existente, ejecuta el siguiente comando:
|
1 2 3 |
ng add @angular/ssr |
El comando anterior generará el punto de entrada del servidor, agregará capacidades de compilación SSR y SSG y habilitará la hidratación de forma predeterminada.
@angular/ssr proporciona una funcionalidad equivalente a @nguniversal/express-engine que se encuentra actualmente en modo de mantenimiento.
Si estás utilizando el motor express, Angular CLI actualizará automáticamente tu código a @angular/ssr.
Virgin Media O2 observó un aumento del 112 % en las ventas después de pasar a la última solución de renderizado Angular Hybrid desde su plataforma heredada.
Con una reducción promedio en el cambio de diseño acumulativo del 99,4% al usar NgOptimizedImage junto con Angular SSR con DOM Hydration.
Implementando Tu Aplicación con SSR
Para mejorar aún más la experiencia de los desarrolladores, el equipo de Angular trabaja estrechamente con proveedores de nube para permitir una implementación fluida en sus plataformas.
Firebase ahora reconocerá e implementará automáticamente tu aplicación Angular con una configuración casi nula, con la vista previa anticipada de su nueva CLI compatible con el framework Angular.
|
1 2 3 4 5 |
firebase experiments:enable webframeworks firebase init hosting firebase deploy |
La CLI compatible con Angular reconoce el uso de SSR, i18n, optimización de imágenes y más, lo que le permite ofrecer aplicaciones web de alto rendimiento en una infraestructura rentable y sin servidor.
Para aquellos con monorepos Angular complejos o que simplemente prefieren herramientas nativas, AngularFire permite la implementación en Firebase con el comando ng deploy:
|
1 2 3 4 |
ng add @angular/fire ng deploy |
Para permitir la implementación para los workers perimetrales, se habilitó la compatibilidad con el módulo ECMAScript en la representación del lado del servidor de Angular, se introdujo un backend de recuperación HttpClient y se trabajó con CloudFlare para agilizar el proceso.
Nuevos Hooks de Ciclo de Vida
Para mejorar el rendimiento de SSR y SSG de Angular, a largo plazo, se tiene planeado alejarse de la emulación DOM y las manipulaciones directas de DOM.
Al mismo tiempo, durante el ciclo de vida de la mayoría de las aplicaciones, estas necesitan interactuar con elementos para crear instancias de bibliotecas de terceros, medir el tamaño de los elementos, etc.
Para permitir esto, se desarrolló un conjunto de nuevos ganchos o hooks de ciclo de vida:
- afterRender — registra una devolución de llamada para ser invocada cada vez que la aplicación termine de renderizarse.
- afterNextRender — registra una devolución de llamada para ser invocada la próxima vez que la aplicación termine de renderizarse.
Sólo el navegador invocará estos enlaces, lo que le permite conectar una lógica DOM personalizada de forma segura directamente dentro de tus componentes.
Por ejemplo, si deseas crear una instancia de una biblioteca de gráficos, puedes utilizar afterNextRender:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@Component({ selector: 'my-chart-cmp', template: `<div #chart>{{ ... }}</div>`, }) export class MyChartCmp { @ViewChild('chart') chartRef: ElementRef; chart: MyChart|null; constructor() { afterNextRender(() => { this.chart = new MyChart(this.chartRef.nativeElement); }, {phase: AfterRenderPhase.Write}); } } |
Cada enlace admite un valor de fase (por ejemplo, lectura, escritura) que Angular utilizará para programar devoluciones de llamadas para reducir la alteración del diseño y mejorar el rendimiento.
Vite y esbuild Por Defecto Para Nuevos Proyectos
¡No se habría podido habilitar SSR en Angular desde el principio sin los cambios fundamentales que se hicieron en el proceso de compilación de Angular CLI!
En la versión 16, se presento una vista previa para desarrolladores de la experiencia de compilación impulsada por esbuild plus Vite.
Desde entonces, muchos desarrolladores experimentaron con él y algunos socios empresariales de Angular informaron una mejora del 67% en el tiempo de compilación en algunas de sus aplicaciones.
¡En Angular 17 se agregó un nuevo creador de aplicaciones que deja de estar como vista previa para desarrolladores y está habilitado de forma predeterminada para todas las aplicaciones nuevas!
Además, se actualizó el proceso de compilación cuando se utiliza el renderizado híbrido.
Con SSR y SSG puedes observar una mejora de velocidad de hasta un 87 % con el comando ng build y un bucle de edición y actualización un 80 % más rápido para archivos al ejecutar el comando ng serve.
En una futura versión menor, se agregarán esquemas para migrar automáticamente proyectos existentes utilizando renderizado híbrido (renderizado del lado del cliente con SSG o SSR).
Si deseas probar el nuevo creador de aplicaciones hoy, consulta esta guía en la documentación de Angular.
Bueno, hasta aquí llegamos con esta 1ra parte, en donde hemos visto un primer grupo de nuevas características que trae Angular 17.
Ten Paciencia, lo que quiero es que conozcas bien estas nuevas características y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota (s)
- En la siguiente parte y última veremos el segundo grupo de nuevas características que trae Angular 17.
- 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.