Angular 9 es la release más importante de Angular de los últimos años. La comunidad llevaba tiempo esperando esta versión, por todo lo que se espera de ella, y la verdad, es que parece que va a estar a la altura.

Pero vamos por partes… ¿qué novedades trae Angular 9 que la hacen tan interesante?

Angular IVY

Ivy es el nuevo pipeline de compilación y renderizado de Angular. Es una reescritura desde cero del motor de renderizado, y trae varios beneficios bajo el brazo:

• Bundles más pequeños: Gracias a esta nueva implementación, ahora al compilar tu aplicación Angular no solo te beneficiarás de three-shaking en tu código, sino también en toda la librería de Angular. Todo aquello que no uses de la librería Angular, no se incluirá en el bundle final.

• Compilación AOT en desarrollo: Por defecto (incluso en el servidor de desarrollo), Ivy utiliza el compilador Ahead Of Time (AOT). Esto significa que el proceso de build hace más pasos (que antes hacía el navegador en tiempo de ejecución), y que el código que incluye el bundle está más optimizado para su ejecución, con lo que tarda menos en cargarse.

• Reducción del tiempo de compilación: Además, ahora tu aplicación debería tardar menos en compilar. win-win total.

• Build errors más descriptivos: Antes de Ivy, entender porqué fallaba el proceso de build podía ser complicado en ciertas situaciones. Ahora el feedback que te proporcionan los errores de build aporta una información más relevante para ayudarte a encontrar la causa del error.

• Más herramientas de debugging: El servidor de desarrollo de Angular expone el objeto ng, de forma que desde el inspector del navegador puedes acceder a las instancias de tus componentes y directivas o lanzar el ciclo de detección de cambios de forma manual, por ejemplo. Puedes ver todas las opciones aquí.

• Lazy loading de componentes: Ivy facilita el import dinámico no solo de librerías, sino también de componentes a nivel individual. Cargar un componente en tiempo de ejecución (incluido el código necesario para ejecutarlo), puede ser tan simple como esto:

import { LazyComponent } from './lazy/lazy.component';

@Component({
  template: `
    <button (click)="loadLazyComponent()">Load lazy component</button>
    <ng-container *ngIf="lazyComp">
       <ng-template [ngComponentOutlet]="lazyComp | async"></ng-template>
    </ng-container>
  `
})
export class AppComponent {
  lazyComp: Promise<Type<LazyComponent>>;

  loadLazyComponent() {
    if (!this.lazyComp) {
      this.lazyComp = import(`./lazy/lazy.component`)
                       .then(({ LazyComponent }) => LazyComponent);
    }
  }
}

Como ves, aquí tienes un botón, y al apretarlo, lo que haces es descargarte el fragmento de javascript que necesita mi componente LazyComponent, y se lo asignas al dato miembro lazyComp. A partir de aquí, el resto sigue lo que harías en versiones anteriores de Angular. Ese componente se carga de forma dinámica en el template mediante la directiva ngComponentOutlet.

Binding a variables CSS

Igual no te has enterado, pero ya hace un tiempo que CSS permite el uso de variables, (o CSS custom properties).
Pues bien, con Angular 9, no solo puedes usarlas, sino que puedes hacer bindings desde el template. Personalmente, es una de las características que más me están gustando de Angular 9

¿Que como se hace? Pues fácil, así:

<div [style.--main-border-color]="'#CCC'">
  <p style="border: 1px solid var(--main-border-color)">hi</p>
</div>

Obviamente, donde asigno el string '#CCC' a la variable CSS --main-border-color, podría asignar también el valor de una propiedad del componente. Es un binding normal y corriente de Angular.

Más opciones de providedIn para la inyección de servicios

El decorador @Injectable con el que decoras los servicios, acepta el metadato providedIn, en el que le indicas a que nivel de inyección quieres proporcionar la dependencia. Las opciones son estas:

• root: Esta opción ya existía anteriormente, y generalmente indica que el servicio se inyecta a nivel de aplicación.
• platform: Pensado para arquitecturas micro-frontend. Es un singleton especial que se inyecta a nivel de página y es compartido por todas las aplicaciones Angular de la página.
• any: Proporciona una instancia única en cada módulo en que se inyecta el token.

Typescript 3.7

Angular 9 se actualiza a la versión 3.7 de Typescript, y me encanta.

¿Por qué? Pues porque, entre otras cosas, trae las siguientes PEDAZO de novedades:

• Optional chaining: También conocido como safe operator o el operador Elvis (por su forma ?.).
  Básicamente te permite acceder a propiedades anidadas con la tranquilidad de que TS interrumpirá el acceso si se encuentra con un null o undefined (sin lanzar un error). Funciona así:

// Antes, para acceder a foo.bar.baz y evitar un error si foo o foo.bar es undefined.
if (foo && foo.bar && foo.bar.baz) {
 // ... 
 } 
 // Ahora con el optional chaining operator
 if (foo?.bar?.baz) {
 // ...
 }

• Nullish coalescing: Este operador (??) permite usar un valor por defecto en caso de encontrarse con un null o undefined en procesos de asignación. Por ejemplo:

// ANTES, para asignar foo a x, o bar() en caso de que foo no exista
let x = (foo !== null && foo !== undefined) ? foo : bar();

// Ahora con el nullish coalescing operator
let x = foo ?? bar();

Otros beneficios para el desarrollador

Además de todo eso, la experiencia del desarrollador debería verse mejorada por otros detalles:

• Testing más rápido: Ahora, al ejecutar tus tests, solo se recompila el código que realmente se ha modificado, con lo que consiguen reducir el tiempo de testing.

• Component harnesses: Esta nueva herramienta para testear componentes, permite abstraerse de los detalles de implementación de un componente concreto. Es algo que está implementado en Angular Material, y puedes leer más sobre el tema aquí.

Todo esto, por supuesto, manteniendo una amplia compatibilidad con versiones anteriores de Angular.

Reflexiones personales

Seguro que me he dejado alguna novedad por el camino, pero aquí está lo más relevante desde mi punto de vista.

Más allá de las mejoras que trae Ivy, que deberían mejorar mucho el rendimiento de las páginas Angular y la experiencia de desarrollo, la verdad es que hay 4 cosas que me encantan de Angular 9:

• el lazy-loading de componentes
• el binding a variables CSS
• el optional chaining operator
• y el nullish coalescing operator

Especialmente los 2 últimos me encantan. Creo que van a agilizar mucho la escritura y legibilidad de código.
¿Y tú? ¿Qué es lo que encuentras más destacable?

¿Te ha gustado este artículo? No te cortes, déjame un comentario y ayúdame a compartirlo 😉