Lo que necesitas saber sobre Angular v13

Lo que necesitas saber sobre Angular v13 PORTADA

¡Ha llegado Angular v13! Y con él vienen un montón de nuevas y emocionantes características y actualizaciones. Angular sigue mejorando el rendimiento en tiempo de ejecución, disminuyendo el tiempo de compilación, promoviendo buenas prácticas de desarrollo de software, mejorando la experiencia de los desarrolladores y manteniéndose al día con dependencias como TypeScript y RxJS. ¿Alguien más está entusiasmado con RxJS v7? 🤩 Echemos un vistazo a algunas de las muchas nuevas y emocionantes características de Angular v13 con algunos ejemplos de código utilizando la autenticación.

Lo que necesitas saber sobre Angular v13 captura 1

¡Hasta luego, View Engine!

Con la v13, View Engine ya no está disponible, siendo sustituido por Ivy. Ivy es el futuro de las aplicaciones Angular, y sus beneficios son enormes. Después de aterrizar inicialmente en la v12, Ivy allana el camino para las nuevas actualizaciones de funciones, simplifica las capacidades existentes y aumenta el rendimiento de la renderización.

La forma en que ahora puedes crear componentes de forma dinámica es un ejemplo de cómo esta versión simplifica las capacidades existentes. Los componentes dinámicos son componentes cargados en tiempo de ejecución. Puedes utilizarlos cuando necesites adaptar los componentes visibles en función de las respuestas de una llamada al servidor. Antes, para crear componentes dinámicamente, tenías que utilizar el ComponentFactoryResolver. Ahora la API toma el tipo de componente directamente. Veamos cómo funciona esto.

Configurar el Authorization Server

En mi ejemplo, me estoy autenticando mediante OAuth 2.0 con OpenID Connect a través de TodoXampp. En mi servidor de autorización de TodoXampp , he añadido una llamada personalizada como pet_preference a mi token de identidad. ¿Te suena esto vagamente familiar? Si no es así, no te preocupes, porque estoy a punto de publicar un artículo sobre OAuth 2.0 y OpenID Connect.

Con este reclamo personalizado, quiero mostrar componentes dinámicos específicos del valor. La aplicación utiliza el valor del reclamo para rotar por las imágenes de las mascotas que coincidan con sus preferencias.

Prepara los componentes

Para escribir algo así, primero crearás componentes para las vistas personalizadas de diferentes mascotas que implementen la misma interfaz, como una llamada PreferenceComponentInterface. La interfaz tiene una propiedad llamada data para que puedas pasar información personalizada. También tendrás que obtener el valor de la demanda personalizada pet_preference y recuperar el contenido específicamente para ella. Una vez que tengas los datos de la mascota preferida, puedes añadir el código para crear componentes dinámicos.

Implementar la creación de componentes dinámicos

Crea una Directiva para albergar la vista.

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appPreference]'
})

export class PreferenceDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

Y un componente contenedor que se encarga de la creación dinámica del componente. He simplificado el código recortado para centrarme en el cambio de la v13. En un próximo post, haré un recorrido completo de la creación de esta aplicación.

class PreferenceItem {
  component: Type<PreferenceComponentInterface>;
  info: any;
}

@Component({
  selector: 'app-secret-preference',
  template: `<ng-template appPreference></ng-template>`
 })

export class SecretPreferenceComponent implements OnInit {
  @ViewChild(PreferenceDirective, {static: true}) private host!: PreferenceDirective;
  
  private preferences: PreferenceItem[] = [{
    component: MyCustomComponent,
    info: 'example'
  }, {
    component: MyOtherCustomComponent,
    info: {
      isTrue: true
    }
  }];
  
  public ngOnInit(): void {
    const preferredItem = this.preferences[0];
    const compRef = this.host.viewContainerRef.createComponent<PreferenceComponentInterface>(preferredItem);
    compRef.instance.data = preferredItem.info;
  }
}

Observa que no has tenido que inyectar el ComponentFactoryResolver para hacerlo. La API es más sencilla de utilizar. Un caso de uso más realista podría ser una reclamación personalizada para el departamento y mostrar contenido personalizado basado en el departamento del usuario autentificado.

Limpieza después de cada prueba

Las pruebas de las aplicaciones de Angular han mejorado mucho en la v13, y una mejor limpieza del DOM entre las pruebas es el nuevo valor predeterminado. Ahora, Angular limpia mejor el DOM, y las pruebas se ejecutan más rápido y con mayor rendimiento, con un mejor aislamiento entre pruebas.

Lo que necesitas saber sobre Angular v13 captura 2

El comportamiento de limpieza es configurable al configurar o restablecer el Zona de Pruebas. Veamos un ejemplo de prueba en el que saludamos al usuario después de que se haya conectado.

Código del componente

@Component({
  selector: 'app-profile',
  template: `
    <ng-container *ngIf="name$ | async as name ">
      <span>Bienvenido {{name}}!</span>
    </ng-container>
  `
})

export class ProfileComponent {
  public name$: Observable<string> = this._authStateService.authState$.pipe(
    filter((s: AuthState) => !!s && !!s.isAuthenticated),
    map((s: AuthState) => s.idToken?.claims.name ?? 'stranger')
  );

  constructor(private _authStateService: TodoXamppAuthStateService) { }
}

Código de prueba

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;

  let authStateSpy = jasmine.createSpyObj<TodoXamppAuthStateService>([], { authState$: of(authState) });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ProfileComponent ],
      providers: [
        { provide: TodoXamppAuthStateService, useValue: authStateSpy }
      ],
      teardown: { destroyAfterEach: false } // flakey tests!
    });
  });

  it('should show text that welcomes the user by name', () => {
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
      
    const spanEl = fixture.debugElement.query(By.css('span'));
    expect(spanEl).toBeTruthy();
    expect(spanEl.nativeElement.innerHTML).toEqual('Welcome Test Name!');
  });

  it('should show text that welcomes a user with no name', () => {
    (Object.getOwnPropertyDescriptor(authStateSpy, 'authState$')?.get as jasmine.Spy).and.returnValue(of({
      isAuthenticated: true,
      idToken: {...idToken, claims: {sub: 'sub'}}
    }));
      
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    const spanEl = fixture.debugElement.query(By.css('span'));
    expect(spanEl).toBeTruthy();
    expect(spanEl.nativeElement.innerHTML).toEqual('Welcome stranger!');
  });
});

Podemos configurar la limpieza del desmontaje en este conjunto de pruebas cambiando el valor de destroyAfterEach. Con este cambio activado por defecto, tienes la opción de escribir nuevas pruebas con mejor rendimiento. Además, puedes deshabilitarlo por defecto para las pruebas que no estén preparadas para consumir los cambios. ¡Angular nos cubre las espaldas en cuanto a las actualizaciones que no se rompen!

Herramientas mejoradas para desarrolladores

La creación de aplicaciones Angular es ahora más fácil con las mejoras en las herramientas para desarrolladores y en el tiempo de compilación.

Lo primero que puedes notar es que el tiempo de construcción es mucho más rápido. Se ha trabajado mucho para mejorar el tiempo de compilación. Al añadir una compilación de caché, el equipo de Angular encontró mejoras en el tiempo de compilación de hasta un 65+%.

La mejora de las herramientas del Servicio de Lenguaje de Angular para aplicar automáticamente el encadenamiento opcional parece una cosa pequeña, pero es una característica muy apreciada. Puedo centrarme en la propiedad del objeto que quiero utilizar y las herramientas se encargan del encadenamiento opcional por mí.

Lo que necesitas saber sobre Angular v13 gif

Nota: El ejemplo de demostración mostrado arriba es para fines de demostración, y exagera las capacidades para mostrar la nueva característica. Por favor, recuerda aplicar buenas prácticas de desarrollo de software en sus aplicaciones del mundo real.

¡Hasta la vista, Internet Explorer!

En esta versión, también decimos adiós a Internet Explorer. Dejar de dar soporte a Internet Explorer significa que se abren muchas puertas para nuevas funcionalidades, refactorizar la base de código y mantener las mejores prácticas de seguridad. Con polyfills adicionales, puedes usar la librería Auth JS de TodoXampp en Internet Explorer, pero la recomendación es migrar fuera de él.

Todos los detalles de Angular v13

Estas son las características que me han parecido más interesantes, ¡pero hay muchas más en Angular v13! Puedes leer más sobre ellas en la entrada del blog del equipo de Angular. Puedes leer sobre los cambios en la nueva versión de TypeScript y RxJS.

Próximos cambios

Angular sigue mejorando y creciendo. Las siguientes versiones deberían ser emocionantes, con características como la tipificación estricta de los formularios y los componentes autónomos.