Comment optimiser la productivité des développeurs grâce aux nouvelles fonctionnalités d'Angular ?

Angular, depuis son évolution vers Ivy, a apporté des améliorations notables qui permettent aux développeurs de gagner en efficacité. Ces changements, en particulier ceux concernant les liaisons de styles, l'héritage des métadonnées et l'optimisation des tailles des bundles via la compilation AOT (Ahead of Time), contribuent à accélérer le développement tout en rendant les applications plus performantes. Mais il est crucial de comprendre non seulement les principes de ces fonctionnalités, mais aussi la manière dont elles interagissent pour obtenir des résultats tangibles.

Un autre changement notable est l'impact des directives NgClass et NgStyle. Ces directives ont désormais un comportement plus prévisible, elles étant considérées comme des équivalents de la règle !important dans CSS, ce qui signifie qu'elles peuvent surcharger toutes les autres liaisons de styles sans égard pour la priorité.

Prenons l'exemple suivant pour illustrer ce comportement. Imaginons que nous ayons un composant et une directive qui définissent des styles pour le même élément DOM. Le résultat sera qu'une seule règle CSS sera appliquée, et la couleur de fond de l'élément sera définie comme étant rose, selon la priorité des liaisons définies par les directives et les composants. L'ordre des priorités, de la plus élevée à la plus basse, est ainsi le suivant :

1. Rose (directive NgStyle)

2. Rouge (liaison au niveau du template)

3. Orange (liaison avec une carte de classes)

4. Jaune (valeur statique)

5. Bleu (propriété de style d'une directive hôte)

6. Violet (style statique d'une directive hôte)

7. Gris (propriété de style d'un composant hôte)

8. Vert (style statique d'un composant hôte)

Une autre amélioration substantielle concerne l'héritage des métadonnées dans les directives et les composants. Avant Ivy, l'héritage des métadonnées d'un composant ou d'une directive était un concept flou, ce qui compliquait la gestion de la logique partagée entre les composants. Aujourd'hui, Angular a clarifié ce processus en permettant à un composant de partager son comportement à travers l'héritage, notamment en héritant de métadonnées comme les propriétés Input et Output, les liaisons HostBinding, ou encore les requêtes ViewChild et ContentChild. Ces métadonnées sont désormais partagées de manière explicite et prévisible, ce qui réduit la taille des bundles et accélère la compilation.

Prenons l'exemple d'un composant de recherche de base qui gère les événements de saisie pour effectuer des recherches avec un délai de 150 millisecondes. Ce composant peut être étendu par un autre composant, comme un composant de boîte de recherche, qui héritera des fonctionnalités de recherche tout en pouvant ajouter ses propres styles spécifiques. Cette approche permet de créer des composants plus modulaires et réutilisables, tout en évitant la duplication du code.

Le code suivant montre un exemple de base d'un composant de recherche de base :

typescript
Copy code
@Component({

  selector: 'app-base-search',
  template: '',
})
export class BaseSearchComponent {
  @Input() placeholder = 'Search...';
  @Output() search = this.#search.pipe(debounceTime(150), distinctUntilChanged());
  onSearch(inputEvent: Event): void {

    const query = (inputEvent.target as HTMLInputElement)?.value;

    if (query == null) {
      return;
    }
    this.#search.next(query);
  }
}

Ensuite, un composant de boîte de recherche pourrait être défini ainsi :

typescript
Copy code
@Component({
  selector: 'app-search-box',
  styleUrls: ['./base-search.scss'],
  template: ` <input (input)="onSearch($event)" [placeholder]="placeholder" /> `,
})

export class SearchBoxComponent extends BaseSearchComponent {}

Dans ce cas, le SearchBoxComponent hérite des fonctionnalités de recherche de BaseSearchComponent et peut ajouter des styles supplémentaires via le fichier base-search.scss. Cette approche réduit le code redondant et améliore la maintenabilité des applications.

Au-delà de ces optimisations techniques, il est important de comprendre que l'amélioration de l'expérience de développement ne se limite pas à la performance ou à l'organisation du code. L'adoption de ces nouvelles pratiques permet aux développeurs de se concentrer sur des tâches à plus forte valeur ajoutée, telles que l'amélioration de l'expérience utilisateur ou l'intégration de nouvelles fonctionnalités. En utilisant Ivy et en exploitant les derniers outils et configurations d'Angular, les développeurs peuvent transformer leur manière de coder, en la rendant plus efficace, plus prévisible et plus agréable.

Enfin, bien que les améliorations de la productivité et de la performance soient évidentes, il est essentiel de comprendre que l'utilisation de ces nouvelles fonctionnalités nécessite une bonne maîtrise des outils de configuration, des principes d'héritage et des priorités de liaison de styles. De plus, les bonnes pratiques d'optimisation doivent être appliquées en fonction des spécificités du projet, afin de maximiser l'impact de ces évolutions sur la qualité globale de l'application.

Comment optimiser la prise en charge régionale grâce à des API de mondialisation améliorées dans Angular

Dans le développement d’applications Angular, la prise en charge des différentes régions et localisations est un élément crucial pour garantir une expérience utilisateur cohérente et accessible. À cet égard, Angular propose une série d’outils permettant de gérer efficacement la directionnalité et d’adapter les composants en fonction des préférences culturelles et linguistiques de l’utilisateur. Ce chapitre explore l’optimisation de cette prise en charge à travers l’utilisation des API de mondialisation et des techniques modernes pour manipuler les attributs HTML en fonction de la langue ou de la direction de lecture.

Voici un exemple de code qui montre comment ce processus fonctionne dans Angular :

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

import { HostDirectionService } from './shared/ui/host-direction.service';

@Component({
  selector: 'app-root',
  template: '',
  viewProviders: [HostDirectionService],
})
export class AppComponent {
  constructor(hostDirection: HostDirectionService) {}
}

Le service HostDirectionService est responsable de l’application de la direction sur l'élément hôte du composant. Ce service utilise l'API Renderer2 pour appliquer dynamiquement la valeur de l’attribut dir à l'élément hôte, ce qui permet une gestion fluide de la direction en fonction du paramètre régional de l’application.

typescript
Copy code
import { Direction } from '@angular/cdk/bidi';
import { getLocaleDirection } from '@angular/common';
import { ElementRef, Injectable, OnDestroy, Renderer2 } from '@angular/core';

import { Observable, Subject } from 'rxjs';

import { map, takeUntil } from 'rxjs/operators';
@Injectable()
export class HostDirectionService implements OnDestroy {
  #destroy = new Subject();
  #direction$: Observable = this.localeState.locale$.pipe(
    map((locale) => getLocaleDirection(locale))
  );
  constructor(
    private localeState: LocaleStateService,
    private host: ElementRef,
    private renderer: Renderer2
  ) {
    this.#direction$
      .pipe(takeUntil(this.#destroy))

      .subscribe((direction) => this.setHostDirection(direction));

  }
  ngOnDestroy(): void {
    this.#destroy.next();
    this.#destroy.complete();
  }
  private setHostDirection(direction: Direction): void {
    this.renderer.setAttribute(this.host.nativeElement, 'dir', direction);
  }
}

Une autre approche innovante consiste à tirer parti de la logique de directionnalité pour charger des images de manière paresseuse (lazy load) en fonction de la direction de la locale. Par exemple, si l’application utilise une langue de droite à gauche, nous pouvons charger une version différente des images, spécifiquement adaptées à ce format de lecture. Cela peut être réalisé à l’aide de directives structurées dans Angular, qui conditionnellement insèrent ou retirent des éléments en fonction de la direction courante, comme illustré dans l'exemple suivant :

typescript
Copy code
import { Directive, Input, OnInit, OnDestroy } from '@angular/core';

import { LocaleStateService } from '../../locale/data-access/locale-state.service';

const directionQueryPattern = /^\(dir: (?ltr|rtl)\)$/;
@Directive({
  exportAs: 'bidiMedia',
  selector: '[media]',
})
export class BidiMediaDirective implements OnInit, OnDestroy {
  #appDirection$ = this.localeState.locale$.pipe(
    map((locale) => getLocaleDirection(locale))
  );
  #queryDirection = new Subject();
  #queryDirection$ = this.#queryDirection.pipe(distinctUntilChanged());

  @Input() set media(query: string) {

    if (!this.isDirection(query)) {
      throw new Error(`Invalid direction media query "${query}".`);
    }

    this.#queryDirection.next(this.queryToDirection(query));

  }
  constructor(private localeState: LocaleStateService) {}
  ngOnInit(): void {
    this.attachElementOnDirectionMatch();
  }
  ngOnDestroy(): void {
    this.#queryDirection.complete();
  }
  private attachElementOnDirectionMatch(): void {
    const directionMatch$ = this.#queryDirection$.pipe(
      filter((queryDirection) => queryDirection === this.#appDirection$)
    );

    directionMatch$.subscribe(() => this.attachElement());

  }
  private isDirection(query: string): boolean {
    return directionQueryPattern.test(query);
  }

  private queryToDirection(query: string): string {

    return query.match(directionQueryPattern)[1];
  }
}

Ainsi, l’application peut adapter son contenu à la direction locale de l’utilisateur en utilisant des requêtes similaires aux media queries CSS. Ces techniques peuvent être combinées pour offrir une expérience utilisateur fluide et localisée, garantissant une adaptation parfaite aux différentes langues et cultures.