¿Qué hay de nuevo en Angular 15 (hasta ahora)?

Cuando llamas a tu framework Angular.js, y luego lo renombras a Angular, puedes estar seguro de que algunas personas se confundirán.

Angular ha tenido un camino de furia últimamente con la noticia de que Angular.js está obsoleto y muerto. La gente comprensiblemente lo creyó, pero en realidad Angular está lejos de estar muerto.

La decimocuarta versión del marco de trabajo más parecido a un framework se anota algunas mejoras importantes. Pero hoy nos centraremos en la versión quince que está a la vuelta de la esquina. Su lanzamiento está previsto para el día 8 de noviembre de 2022.

Hito de Ivy: hace que Angular sea ultra rápido

Si no estás familiarizado con la saga Angular, aunque es el mejor framework para centrarse en la experiencia de usuario, durante años sufrió de un mal rendimiento de construcción en comparación con las bibliotecas ligeras como React.

Un esfuerzo asombroso para volver a las pistas giró en torno a la reconstrucción casi completa del motor de renderizado. El nuevo, llamado Ivy fue un proyecto de años. En el camino, Angular tuvo que ser despojado de Hot Module Reload.

Afortunadamente Ivy lo logró y las últimas versiones de Angular ofrecen cómodas compilaciones y reconstrucciones. La recarga de módulos en caliente también es más fácil de habilitar. Desde entonces, Angular 15 marcará un punto de no retorno. Ivy se convertirá en el único motor de renderizado que dará una experiencia excepcional a los desarrolladores.

Mejoras de rendimiento adicionales

Aparte de Ivy y HMR que ya conocemos y amamos, en el proceso de creación de la versión 15 los desarrolladores introdujeron mejoras adicionales de rendimiento.

Hasta ahora, cada plantilla externa se analizaba varias veces para cada diagnóstico de comprobación de tipos informado, lo que suponía un uso exagerado de la memoria. La corrección 47471 introduce una caché para las plantillas que mejora la velocidad y el uso de memoria de la comprobación de tipos. También fue retrocedido a la versión 14.2.

Arreglo de banana in box

Otra característica que me llamó la atención es sobre el banana in box.

Banana in box es un término para describir la sintaxis de la unión de dos vías en la plantilla de Angular. Seguramente lo has visto varias veces, pero no sabías el nombre. Su aspecto es el siguiente:

[(ngModel)]=”model”

Si tu quieres aprender más acerca de esté termino de te dejo para que puedas ir a ver el siguiente video

Los paréntesis con el ngModel forman un plátano, y los corchetes simbolizan una caja donde se almacena el plátano ☺.

Lamentablemente a veces la gente escribe el mismo código en un orden diferente. Ponen paréntesis fuera y la caja dentro, como: ([]) haciendo que Angular se vuelva loco.

El fix informará de este problema y ofrecerá una solución a través de los servicios de lenguaje, es decir, por el IDE, por ejemplo, Visual Studio Code.

Si usted está interesado en la escritura de características similares dev amigable echa un vistazo a la confirmación git. Es bastante interesante de leer. Entre el hecho de que el plátano en la caja ahora se convirtió en un término oficial utilizado en el código fuente de Angular.

Por cierto, si te gusta escribir tus propias reglas para comprobar el código en busca de errores, echa un vistazo a Hinty. Es una extensión de Visual Studio Code sólo para eso. Funciona para todas las tecnologías, sólo tienes que escribir una regla regex y el mensaje que te gustaría ver.

Carga perezosa más fácil

Debería satisfacer a la gente que le gusta el esfuerzo continuo de Angular para escribir menos boilerplate. Por lo general, cuando se carga un componente o hijos en una ruta, hay que seleccionar lo que se va a cargar. Afortunadamente, con la introducción anterior de la exportación por defecto está claro qué componente debe ser cargado. El cambio tiene en cuenta las exportaciones por defecto y sólo carga lo que es necesario:

{
    path: 'lazy', 
    loadComponent: () => import('./lazy-file'), 
    
}

Nombres de salida del enrutador dinámico

@atscott encontró una forma de facilitar el desarrollo de componentes dinámicos. Su commit en la rama de Angular 15 hace que el parámetro nombre sea una entrada en lugar de un atributo.

El resultado práctico es que ahora se puede vincular a una variable, por ejemplo desde un bucle for. Antes no era posible, dificultando la escritura de componentes robustos y elásticos. Este ejemplo de casos de prueba muestra este cambio de juego:

@component ({ 
    standalone: true, 
    template: `
    <div *ngFor ="let outlet of outlets">

    </div>
    `,
    imports: [RouterOutlet, NgForof], 
})

Eso es todo si se trata de los cambios más importantes hasta ahora en la línea de Angular 15. Otros cambios incluidos son

• canParse reemplazado por analyze
• Parámetro hint obligatorio en parse
• Mejora de las advertencias de imagen
• Uso del token DOCUMENT para consultar los enlaces preconectados
  cambiar el nombre de rawSrc -> ngSrc en la directiva NgOptimizedImage
  asegurarse de que se aplica el retardo de la función useAnimation
  soporte de hasInvalidatedResolutions
  Y más
  Como pueden ver hay muchos cambios en Angular 15, y estamos lejos de verlos todos ya que solo es la versión next.5 que fue lanzada el 5/10/2022

Fuente