Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Angular 9: Lo más destacado

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();
OFERTA
Curso

Bundle Angular PRO

Todo lo que siempre has deseado saber, explicado con claridad: la forma más eficaz de ponerte al día con Angular y RxJS
Idioma: Español
20% DTO79 €

 

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 😉

Published inAngular

9 Comments

  1. Pablo Coronel Pablo Coronel

    Gracias Erique, muy útil la información y clara. Particularmente para mi, estaba esperando algo como esto para angular:

    • el optional chaining operator
    • y el nullish coalescing operator

    pero claro, todas me parecieron geniales.

    Saludos!!

  2. Diego Diego

    Buen aporte Enrique, te hago una pregunta: El Optional Chaining luego de compilar sigue quedando como tal o lo resuelve como Javascript Vanilla? Esto te lo consulto porque muy pocos navegadores lo soportan.
    Saludos

    • Enrique Oriol Enrique Oriol

      No no, se genera el vanilla JS necesario.
      No solo pasa con el optional chaining.TS te avanza varias características que aún están en desarrollo según el estandar JS, para que las puedas disfrutar hoy en día. El compilador de TS se encarga de convertir las cool features que tu estás usando, en código JS normal y corriente (y que funciona, claro)

      • Diego Diego

        Genial!. Muchas gracias por la respuesta.
        Saludos

  3. J J

    Muy interesante la información Enrique, recién encuentro tu contenido y me parece excelente.Una duda que usaste para crear tu blog? me encuentro creando mi pagina personal y me seria de gran ayuda tu recomendación

  4. Alex Carrasco Salvador Alex Carrasco Salvador

    Excelente post para entender todas las novedades que trae Angular 9 🙂

  5. JABC JABC

    Interesante, Gracias por el post y por mantenernos al dia con estas tecnologias web.

  6. Jonathan Jonathan

    Muy buena info Enrque!, gracias por compartir, fíjate que estoy haciendo mi pagina personal y voy a agregar un blog me ayudaría mucho saber que usaste para hacer el tuyo ya que veo que tienes este y otro que esta con wordpress, que me recomiendas?

    • Enrique Oriol Enrique Oriol

      Te diría que no te compliques desarrollando y uses algo que ya exista, ya sea WordPress, Medium, GhostJS o lo que te apetezca.

      En mi caso el contenido viene de WordPress, aunque por diversión me monté un frontal alternativo con Angular. ¿El resultado?, fué divertido, pero he invertido un montón de horas que podría haber dedicado a escribir o hacer cursos, que es lo que de verdad me motiva 😉

Deja un comentario