¿Cómo Ivy Mejora la Experiencia del Desarrollador y las Pruebas en Angular?

El modo estricto en Angular reduce los presupuestos de los paquetes al aplicar estrictas restricciones. El paquete inicial advierte a los 500 kilobytes (KB) y falla a los 1 megabyte (MB), mientras que los estilos de los componentes advierten a los 2 KB y fallan a los 4 KB. Este modo también habilita una estricta verificación de tipos en las plantillas, un aspecto que abordaremos más adelante. La opción enableIvy ha tenido algunos cambios importantes desde la versión 9 de Angular. En la versión 9, su valor predeterminado fue establecido como true para las aplicaciones, pero false para las bibliotecas. A partir de Angular 12, esta opción fue eliminada por completo cuando se deshabilitó el soporte para View Engine en las aplicaciones de Angular. También se introdujo el valor "parcial" para la opción compilationMode, que permite la compilación parcial de bibliotecas Angular usando Ivy.

El impacto de Ivy en la experiencia de pruebas de Angular es significativo. La introducción de mejoras en las versiones de TypeScript y en la forma de trabajar con pruebas aumenta la productividad del desarrollador. Una de las utilidades más destacadas es el uso de "harnesses" para la prueba de componentes, que se profundiza en el Capítulo 4 de este libro. En cuanto a las anotaciones de TypeScript, una de las nuevas características más útiles es la directiva @ts-expect-error, que permite pasar valores de tipos incompatibles a funciones, algo que es especialmente útil en las pruebas.

Por ejemplo, cuando creamos una función de suma robusta que verifica si los operandos son números, podemos utilizar la anotación @ts-expect-error para asegurar que los valores incorrectos sean rechazados durante las pruebas:

typescript
Copy code
function add(left: number, right: number): number {
  assertIsNumber(left);
  assertIsNumber(right);
  return left + right;
}
describe('add', () => {
  it('rechaza un string como operando izquierdo', () => {
    const textInput = '2';
    const four = 4;
    // @ts-expect-error

    expect(() => add(textInput, four)).toThrow();

  });
  it('rechaza un string como operando derecho', () => {
    const three = 3;
    const textInput = '5';
    // @ts-expect-error
    expect(() => add(three, textInput)).toThrow();
  });
});

Esta característica es diferente de @ts-ignore, ya que la directiva @ts-expect-error proporciona una advertencia si no se genera un error de compilación en la instrucción siguiente, lo que aumenta la confianza del desarrollador en el código.

Angular Ivy también introduce la compilación AOT (Ahead-of-Time) en las pruebas. Esto acerca el entorno de pruebas al entorno de producción, lo que facilita la detección temprana de errores. Antes de Ivy, las pruebas en Angular eran relativamente lentas debido a que el corredor de pruebas leía, analizaba y compilaba cada archivo por cada componente en cada caso de prueba. Con Ivy, se ha mejorado la localización de los archivos compilados y se ha implementado una caché para módulos y componentes declarativos, lo que acelera considerablemente las pruebas.

Además, los tiempos de reconstrucción se han reducido, lo que mejora la velocidad al escribir pruebas y corregir errores. Todo esto contribuye a una mejora en la productividad del desarrollador cuando se implementan pruebas unitarias.

nginx
Copy code
ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-header' no es un elemento conocido:

Esta información adicional facilita mucho la resolución de problemas en comparación con las versiones anteriores de Angular que ofrecían mensajes menos detallados.

¿Cómo utilizar las propiedades personalizadas de CSS en aplicaciones dinámicas con Angular?

Las propiedades personalizadas de CSS, conocidas comúnmente como variables CSS, permiten un nivel de flexibilidad y dinamismo que antes no era posible con la simple propiedad de estilo. A través de estas propiedades, es posible definir valores que se pueden reutilizar en diferentes partes de la hoja de estilo, lo que facilita la adaptación de las interfaces a distintos contextos, ya sea por preferencias del usuario o cambios dinámicos en la aplicación.

El ejemplo inicial demuestra cómo una propiedad personalizada de CSS declarada en el ámbito :root afecta a todos los elementos DOM que hacen uso de esa propiedad. En este caso, la propiedad --background-color tiene un valor predeterminado de color púrpura. Sin embargo, cuando una clase CSS contrast se aplica a un elemento, se redefine el valor de la propiedad en ese ámbito específico, cambiando su valor a rosa para los elementos dentro de dicho ámbito. Esto resalta una característica clave de las propiedades personalizadas: su capacidad de ser localizadas en el contexto de un selector específico, afectando solo a los descendientes del elemento donde se define.

Lo que es crucial comprender aquí es que la propiedad personalizada no solo actúa como un simple valor de color, sino que puede almacenar cualquier tipo de valor CSS, como números, cadenas de texto, tamaños, fuentes o incluso configuraciones más complejas, como animaciones y transiciones. De hecho, un uso destacado de las propiedades personalizadas es en la globalización de aplicaciones, donde los valores de las propiedades CSS pueden cambiar según el idioma activo en una página, como se muestra en el siguiente ejemplo de implementación:

1. En el archivo global de estilos CSS, definimos las reglas según el idioma:

   css
   Copy code
   :lang(en) {
   
       --welcome-text: 'Welcome to my website!';
   }
   :lang(fr) {
       --welcome-text: 'Bienvenue sur mon site web!';
   }
   

2. Luego, en un componente de bienvenida, utilizamos las propiedades personalizadas para mostrar el texto en el idioma adecuado. Al cambiar la propiedad, el contenido del componente también cambia dinámicamente:

   css
   Copy code
   .welcome-banner > .welcome-content::before {
       display: inline-block;
       content: var(--welcome-text);
   }
   

El componente Angular correspondiente podría tener una lógica para cambiar entre idiomas con un simple manejador de eventos:

typescript
Copy code
@Component({

   selector: 'app-welcome',
   // Template y estilos correspondientes
})
export class WelcomeComponent {
   language = 'en';
   onLanguageSelect(language: string): void {
      this.language = language;
   }
}

Este ejemplo ilustra cómo las propiedades personalizadas de CSS pueden ser integradas con Angular para permitir una experiencia multilingüe y dinámica, donde la interfaz de usuario se adapta en tiempo real al idioma seleccionado. Esta capacidad de cambiar dinámicamente los valores en tiempo de ejecución, como en el caso del tamaño de texto o los mensajes de bienvenida, abre un abanico de posibilidades para mejorar la accesibilidad y la personalización en aplicaciones web.

En este contexto, las propiedades personalizadas de CSS no se limitan a cambios estéticos; pueden servir para manipular elementos de la interfaz en tiempo real, permitiendo al usuario influir en aspectos fundamentales de la presentación de la página. Un ejemplo más avanzado de su uso sería la modificación de tamaños de fuente a través de un control en la interfaz de usuario:

typescript
Copy code
@HostBinding('style.--text-size.px') textSize = 16;

Este tipo de personalización es clave cuando se desea ofrecer a los usuarios el control sobre la apariencia de una aplicación, lo que mejora la accesibilidad y la usabilidad.

El uso de estas propiedades puede ser complementado con técnicas avanzadas de optimización, como los proveedores "tree-shakable" en Angular, que permiten eliminar dependencias no utilizadas del paquete compilado. Esto resulta fundamental en aplicaciones grandes o en bibliotecas de Angular que requieren un rendimiento eficiente. Además, Angular ofrece atajos para las áreas de alcance de proveedores, tales como any y platform, que facilitan la creación de dependencias globales o limitadas a plataformas específicas.

Es importante destacar que las propiedades personalizadas de CSS no son una solución universal para todos los problemas de estilización en la web. Aunque ofrecen un control fino sobre la apariencia, también requieren una planificación cuidadosa de su alcance y uso para evitar conflictos de valores o redundancias en el código. Además, su integración con frameworks como Angular, aunque poderosa, debe hacerse con una buena comprensión de cómo funcionan los estilos en el contexto de un modelo de componentes.

En conclusión, el uso de propiedades personalizadas de CSS junto con Angular representa una poderosa herramienta para crear aplicaciones dinámicas, interactivas y altamente configurables. Sin embargo, es crucial entender su funcionamiento, las implicaciones de su alcance, y cómo combinarlas eficientemente con otros aspectos del desarrollo web moderno.

¿Cómo integrar el reproductor de YouTube en tu aplicación Angular con Ivy?

El uso de Angular Ivy ha traído consigo una serie de innovaciones y herramientas que mejoran la experiencia del desarrollo en aplicaciones web. Una de estas innovaciones es la introducción de componentes oficiales de Angular para productos de Google, como el reproductor de YouTube y los mapas de Google. Estos componentes facilitan la integración de funcionalidades avanzadas de manera eficiente y sin complicaciones, aprovechando la potencia del framework Angular.

El Angular YouTube Player es uno de esos componentes que simplifica la inserción de un reproductor de videos de YouTube en una aplicación Angular. Este componente no solo ofrece la conveniencia del enlace de datos de Angular, sino también el acceso programático a la API de YouTube a través de una referencia al componente. Su uso adecuado implica comprender tanto la instalación inicial como su integración en la arquitectura de la aplicación.

Instalación y configuración inicial

Para comenzar a usar el Angular YouTube Player, es necesario instalar el paquete correspondiente utilizando el siguiente comando en la terminal de tu proyecto:

sql
Copy code
ng add @angular/youtube-player

Una vez instalado, se debe importar el módulo YouTubePlayerModule en el módulo que declara el componente que utilizará el reproductor. En el siguiente fragmento de código se ilustra cómo hacerlo:

typescript
Copy code
import { NgModule } from '@angular/core';

import { YouTubePlayerModule } from '@angular/youtube-player';

import { VideoComponent } from './video.component';
@NgModule({
  declarations: [VideoComponent],
  exports: [VideoComponent],
  imports: [YouTubePlayerModule],
})
export class VideoModule {}

Antes de poder utilizar el componente de YouTube, se debe cargar el script de la API de IFrame de YouTube, que tiene un tamaño de 100 KB. Dependiendo de las prioridades de la aplicación, hay distintas formas de cargar este script. Una opción es agregarlo directamente en la configuración de tu proyecto en el archivo angular.json, aunque esto puede aumentar el tiempo de carga de la página. Otra alternativa más eficiente es cargarlo dinámicamente cuando el componente que lo usa se activa.

El código a continuación muestra cómo cargar dinámicamente el script en el componente VideoComponent:

typescript
Copy code
import { DOCUMENT } from '@angular/common';

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
})
export class VideoComponent implements OnDestroy, OnInit {
  private #youtubeIframeScript: HTMLScriptElement;
  constructor(@Inject(DOCUMENT) private document: Document) { }
  ngOnInit(): void {

    this.#youtubeIframeScript = this.document.createElement('script');

    this.#youtubeIframeScript.src = 'https://www.youtube.com/iframe_api';
    this.#youtubeIframeScript.async = true;
    this.document.body.appendChild(this.#youtubeIframeScript);
  }
  ngOnDestroy(): void {

    this.document.body.removeChild(this.#youtubeIframeScript);

  }
}

Al implementar este proceso, el navegador se encargará de almacenar en caché el script de la API de YouTube, evitando que se cargue múltiples veces.

Uso del reproductor de YouTube

Una vez configurado el reproductor de YouTube, se puede usar en cualquier componente Angular con solo agregar el siguiente fragmento de código en la plantilla del componente:

html
Copy code
<youtube-player [videoId]="'dQw4w9WgXcQ'"></youtube-player>

API de Angular YouTube Player

El componente Angular YouTube Player tiene varias propiedades de entrada y salida que se pueden utilizar para personalizar el comportamiento del reproductor. Entre las propiedades de entrada más relevantes se encuentran:

• @Input() endSeconds: number | undefined;: Permite establecer un punto final de reproducción en el video, en segundos.

• @Input() height: number | undefined;: Define la altura del reproductor, en píxeles CSS. Por defecto es 390 píxeles.

• @Input() playerVars: YT.PlayerVars | undefined;: Permite configurar parámetros adicionales para el reproductor, como la calidad del video o las opciones de autoplay.

Integración avanzada

Para quienes deseen llevar la integración a un nivel más avanzado, es posible usar el Angular YouTube Player junto con otras herramientas de Angular, como los servicios de inyección de dependencias y las interfaces de usuario reactivas. Esto permite un control más detallado sobre la interacción entre el reproductor y la aplicación, mejorando la experiencia del usuario final.

La posibilidad de controlar el comportamiento del reproductor mediante la API de YouTube es un recurso poderoso. Sin embargo, también es crucial tener en cuenta el contexto de usuario y la experiencia en dispositivos móviles, donde la compatibilidad y el rendimiento pueden variar dependiendo de la red o del tipo de dispositivo.

En resumen, comprender cómo usar el reproductor de YouTube en Angular con Ivy no solo implica saber cómo configurarlo y usarlo, sino también cómo optimizar su integración y garantizar una experiencia fluida y eficiente para los usuarios. La clave está en una configuración adecuada y en el manejo efectivo de los recursos, asegurando siempre que el componente se adapte a las necesidades del proyecto sin comprometer el rendimiento.

¿Cómo probar componentes en Angular usando harnesses de componentes?

Uno de los ejemplos más comunes de uso de los harnesses de componentes es el botón de Material, como vimos en el capítulo anterior. Sin embargo, aquí exploraremos un ejemplo práctico de prueba usando el theme component (componente de tema). Este componente permite seleccionar configuraciones como el color y el tamaño, que pueden ser manipuladas por el usuario para ajustar la apariencia de la aplicación.

Para probar este tipo de componentes como si fuéramos usuarios, utilizamos el MatInputHarness. En este caso, imaginemos que queremos comprobar si el color de fondo de un encabezado se establece correctamente. El código para probarlo sería el siguiente:

typescript
Copy code
it('debería poder leer la configuración predeterminada del color de fondo del encabezado', async () => {

  const headerBackground: MatInputHarness = await loader.getHarness(

    MatInputHarness.with({ selector: '#headerBackground' })

  );
  expect(await headerBackground.getValue()).toBe('#00aa00');
});

Ahora bien, supongamos que queremos cambiar el valor del color de fondo del encabezado. Usando el MatInputHarness, podemos simular la interacción del usuario y comprobar que el valor se haya actualizado correctamente:

typescript
Copy code
it('debería poder cambiar la configuración del color de fondo del encabezado', async () => {

  const headerBackground: MatInputHarness = await loader.getHarness(

    MatInputHarness.with({ selector: '#headerBackground' })
  );

  headerBackground.setValue('#ffbbcc').then(() => {

    expect(themeService.getSetting('headerBackground')).toBe('#ffbbcc');
  });
});

En este caso, estamos utilizando setValue() para cambiar el valor del color de fondo a #ffbbcc y luego verificamos que el servicio de tema refleje este cambio. Lo interesante de este enfoque es que no necesitamos escribir fixture.detectChanges(), ya que el harness maneja los cambios en el DOM por nosotros, evitando así que las pruebas sean vulnerables a errores relacionados con la detección de cambios.

De manera similar, podemos utilizar el MatSliderHarness para probar configuraciones como el tamaño del video. En este caso, el código sería el siguiente:

typescript
Copy code
it('debería poder comprobar las configuraciones predeterminadas del texto y del deslizador de video', async () => {

  const videoSizeSetting = Number(themeService.getSetting('videoSize'));
  expect(videoSizeSetting).toBe(7);

  const videoSizeSlider: MatSliderHarness = await loader.getHarness(

    MatSliderHarness.with({ selector: '#videoSizeSlider' })
  );

  expect(await videoSizeSlider.getId()).toBe('videoSizeSlider');

  expect(await videoSizeSlider.getValue()).toBe(Number(videoSizeSetting));
});

Aquí, estamos comprobando que el valor predeterminado del tamaño del video sea 7, y también validamos que el deslizador refleje este valor. El uso de async/await permite escribir pruebas más limpias y concisas.

Creación de un harness de componente personalizado

Por ejemplo, supongamos que tenemos un componente Video que utiliza un componente YoutubePlayer para mostrar videos de YouTube. En lugar de escribir pruebas directamente sobre el DOM, podemos crear un harness que encapsule la lógica relacionada con el componente de Video. Este harness podría verse de la siguiente manera:

typescript
Copy code
export class VideoHarness extends ComponentHarness {

  static hostSelector = 'workspace-video';
  protected getTextElement = this.locatorFor('.text');

  async getText(): Promise<string> {

    const textElement = await this.getTextElement();
    return textElement.text();
  }

  textEquals(video: IVideo, text: string): boolean {

    return text?.toLowerCase().trim().includes(video.title.trim().toLowerCase());
  }
}

En este código, el VideoHarness encapsula la interacción con el selector workspace-video y proporciona métodos como getText() para obtener el texto del video y textEquals() para verificar que el título del video coincida con un valor esperado.

En la prueba, podemos utilizar este harness de la siguiente manera:

typescript
Copy code
it('debería mostrar el título del video en texto al renderizarlo', async () => {

  const renderedVideos = await loader.getAllHarnesses(VideoHarness);

  courseService.getCourse('1').subscribe((course) => {

    renderedVideos.forEach(async (video: VideoHarness) => {

      const text = await video.getText() || '';

      expect(course.videos.find((v) => video.textEquals(v, text))).toBeTruthy();
    });
  });
});

Este código recorre todos los videos renderizados y verifica que el texto de cada video coincida con el título del curso. La ventaja de este enfoque es que el VideoHarness abstrae las operaciones del DOM y permite que las pruebas sean más robustas frente a futuros cambios en la implementación del componente.

En resumen, el uso de harnesses de componentes en Angular ofrece una manera más eficiente y flexible de escribir pruebas, permitiendo que los desarrolladores se enfoquen en probar la funcionalidad del componente sin preocuparse por los detalles del DOM. Además, la creación de harnesses personalizados permite adaptar las pruebas a las necesidades específicas de la aplicación, haciendo que el proceso de testing sea más organizado y mantenible.

¿Cómo la migración de Angular View Engine a Ivy afecta el rendimiento y la seguridad de las pruebas?

La transición de Angular View Engine a Angular Ivy ha supuesto un cambio significativo en la manera en que Angular maneja la compilación y la detección de cambios. Ivy, que se introdujo como el nuevo motor de compilación por defecto, no solo promete una mayor eficiencia en el tamaño de las aplicaciones, sino también un mejor rendimiento en términos de tiempos de compilación y ejecución. Sin embargo, su adopción no está exenta de desafíos, especialmente cuando se trata de configuraciones complejas y dependencias asíncronas.

El proceso de migración desde Angular View Engine a Ivy también incluye mejoras en la seguridad y la tipificación en las pruebas unitarias. Angular Ivy introduce el método estático TestBed.inject, que reemplaza al antiguo TestBed.get. A diferencia de TestBed.get, que permitía una inyección de dependencias débilmente tipada, TestBed.inject requiere que las dependencias sean explícitamente tipadas, lo que reduce los riesgos asociados con dependencias mal resueltas en las pruebas. Este cambio favorece la consistencia y la fiabilidad de las pruebas, eliminando la incertidumbre de las dependencias de tipo any que podían hacer que los errores se pasaran por alto.

Sin embargo, la migración a TestBed.inject implica una nueva forma de trabajar con las dependencias. En el caso de que el tipo proporcionado no coincida con el token del proveedor, será necesario hacer un "cast" explícito, primero a unknown y luego al tipo de la dependencia que se espera. Esta restricción hace que la manipulación de las dependencias en las pruebas sea más segura, pero también más detallada y específica, lo que puede ser una desventaja en casos donde se prefiera un enfoque más flexible o dinámico.

El impacto en la seguridad de las pruebas también se ve afectado por el cambio a Ivy. Con la mejora en la tipificación, las pruebas unitarias se vuelven más estrictas y seguras, lo que reduce los posibles errores durante la ejecución de las mismas. Sin embargo, esta nueva rigidez también puede ser un reto para los desarrolladores acostumbrados a un enfoque más laxo en cuanto a tipos y dependencias.

La optimización de la detección de cambios también juega un papel clave. Angular Ivy introduce ajustes que ayudan a manejar eventos nativos de manera más eficiente. Configuraciones avanzadas como la optimización de ciclos de detección de cambios pueden reducir el número de ciclos necesarios para detectar y aplicar cambios en la interfaz de usuario, lo cual mejora el rendimiento general de la aplicación. Sin embargo, estas optimizaciones pueden tener efectos inesperados en aplicaciones con un alto grado de interactividad, lo que requiere una atención más detallada a los flujos de datos y eventos.

En resumen, la migración de Angular View Engine a Ivy ofrece una serie de mejoras en términos de rendimiento, seguridad y eficiencia. El uso por defecto de la compilación anticipada, las mejoras en la tipificación de las pruebas y la optimización de la detección de cambios son aspectos clave de esta transición. Sin embargo, también surgen nuevos desafíos relacionados con la gestión de dependencias asíncronas y la necesidad de adaptar el código a las nuevas configuraciones y restricciones impuestas por Ivy.