Comment utiliser Nx, Esbuild, et Cypress pour améliorer le processus de développement web

Nx est un système de construction de nouvelle génération qui se distingue par son support natif des monorepos et ses puissantes intégrations. Grâce à Nx, il est possible de diviser le code de l’application en bibliothèques et d’utiliser un cache de construction pour ne reconstruire que les parties de l’application qui en ont besoin. Ainsi, une modification mineure ne déclenche pas une reconstruction complète, mais seulement une reconstruction rapide d’une trentaine de secondes et une ré-exécution des tests impactés. Ce système permet également de partager le cache à distance entre les serveurs et les machines de développement, un atout majeur pour les équipes réparties. Nx offre aussi une architecture opinionnée, très utile pour les grandes équipes et les entreprises, ainsi que l’automatisation des mises à jour de dépendances, un travail de maintenance essentiel mais chronophage dans les projets web modernes.

Le processus de création d'une application Nx est simple et accessible, que ce soit pour démarrer un projet à partir de zéro avec la commande suivante :

bash
Copy code
$ npx create-nx-workspace@latest

ou pour migrer une application existante vers Nx en exécutant :

bash
Copy code
$ npx nx@latest init

L’architecture opinionnée d’Nx, bien qu’étant un atout pour des projets de grande envergure, permet également de mieux organiser et automatiser les flux de travail complexes.

Esbuild offre des avantages non seulement pour l’optimisation des temps de construction, mais également pour la compatibilité avec les modules ES, un élément clé pour les applications modernes. Pour migrer vers ce nouveau système de construction, les développeurs peuvent se référer aux guides disponibles dans la documentation officielle d’Angular et d’esbuild. Le support de Vite et de esbuild ouvre de nouvelles perspectives pour les développeurs cherchant à moderniser et accélérer leur processus de développement frontend.

En ce qui concerne l’automatisation des tests, il est impératif de reconnaître les limites des anciens outils comme Karma et Jasmine, qui ne sont plus adaptés aux exigences modernes, notamment pour les tests unitaires. Karma, qui n’a jamais été conçu pour les tests unitaires en mode sans tête, et Protractor, l'outil originel de tests end-to-end (e2e) pour Angular, ont cédé la place à des alternatives plus performantes et mieux adaptées aux nouvelles pratiques de développement. Le passage à Cypress est essentiel, notamment parce qu'il remplace efficacement Protractor. En plus de ses capacités de tests e2e, Cypress permet également de réaliser des tests de composants, une évolution bienvenue pour les applications Angular.

Cependant, des alternatives comme Jest, souvent vue comme un remplacement naturel de Jasmine, présentent des difficultés d’intégration avec les modules ES, un problème qui rend son usage complexe dans les applications hybrides utilisant à la fois des modules CommonJS et ES. Même si Jest est désormais en version préliminaire pour Angular, il est conseillé de privilégier d’autres outils pour éviter les incompatibilités.

Une option plus moderne et performante est Vitest, une solution basée sur Vite et esbuild, qui propose une exécution ultra-rapide des tests unitaires. Vitest représente l’avenir des tests dans un environnement JavaScript moderne, bien qu'il soit recommandé de l’utiliser uniquement avec une configuration de build adaptée à esbuild et Vite. Dans l’optique de performances maximales, Qwik.js pourrait également être une solution à considérer pour les applications nécessitant une optimisation poussée des ressources et une exécution ultra-rapide.

L’intégration des outils comme GitHub Projects dans le flux de travail permet de maintenir un tableau de bord dynamique et visible pour l’équipe, ce qui aide à réduire les risques de désorganisation et à maintenir l’équipe alignée sur les priorités du projet. Le suivi des tâches à travers un backlog, le classement des priorités, et l’affichage du statut des tâches, contribue grandement à améliorer la transparence du projet, ce qui est un principe clé des méthodologies agiles. Ces outils permettent non seulement de suivre l’état d’avancement mais également d’identifier rapidement les obstacles et de prendre des décisions éclairées.

Dans un environnement d'entreprise, la mise en place de systèmes de gestion de projet, de tableaux Kanban et de backlogs est un levier essentiel pour optimiser l'organisation du travail. Ces pratiques permettent une gestion fluide des priorités, mais aussi une communication plus efficace entre les différents acteurs du projet, tout en facilitant une prise de décision rapide. En fin de compte, l’adoption de telles méthodes peut grandement contribuer à la réussite du projet, en réduisant les risques de retard et en améliorant l’efficacité des équipes de développement.

Comment personnaliser le thème et ajouter des icônes dans une application Angular

Lorsqu’il s’agit de personnaliser votre application Angular, l’ajout d'icônes spécifiques à votre marque est une étape importante. Pour ce faire, vous pouvez commencer par ajouter un fichier SVG dans votre projet. Imaginons que vous souhaitiez ajouter l’icône d’un citron pour représenter votre marque. Il suffit de placer l’image sous src/assets/img/icons et de la nommer lemon.svg.

Ensuite, dans le fichier app.config.ts, il est nécessaire d’ajouter le fournisseur provideHttpClient() pour permettre à l’icône SVG d’être chargée via HTTP. Une fois cette étape réalisée, il faut enregistrer l'icône dans le AppComponent en utilisant la méthode addSvgIcon de MatIconRegistry. Par exemple, le code suivant permet de lier l’icône à son fichier SVG:

typescript
Copy code
import { MatIconRegistry } from '@angular/material/icon';

import { DomSanitizer } from '@angular/platform-browser';
export class AppComponent {
  constructor(
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer
  ) {
    iconRegistry.addSvgIcon(
      'lemon',
      sanitizer.bypassSecurityTrustResourceUrl('assets/img/icons/lemon.svg')
    );
  }
}

typescript
Copy code
import { LEMON_ICON } from './svg.icons';
iconRegistry.addSvgIconLiteral(
  'lemon',
  sanitizer.bypassSecurityTrustHtml(LEMON_ICON)
);

html
Copy code
<mat-toolbar>

  <mat-icon svgIcon="lemon"></mat-icon>

  LemonMart
</mat-toolbar>

Une fois l'icône du citron ajoutée à votre barre d'outils, il est temps de personnaliser d’autres icônes pour compléter le design de votre application. Angular Material fournit une solution prête à l'emploi pour intégrer les icônes Material Design grâce à une police d'icônes que vous pouvez importer directement dans votre fichier index.html. Cette solution fonctionne automatiquement, ce qui simplifie l'intégration. Vous pouvez cependant choisir d'héberger cette police vous-même, mais cela entraînera une perte d’optimisation, car les utilisateurs ayant déjà visité un autre site utilisant cette police n’auront pas à la télécharger à nouveau.

html
Copy code
<mat-toolbar>
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>LemonMart</span>
  <span fxFlex></span>
  <mat-icon>account_circle</mat-icon>
  <mat-icon>lock_open</mat-icon>
</mat-toolbar>

Cette étape permet de structurer une interface de base, mais elle nécessite encore des ajustements pour gérer les états d’authentification de l’utilisateur. En fonction de l’état de connexion de l'utilisateur, il faudra afficher ou masquer les icônes associées au menu, au profil ou à la déconnexion. Nous aborderons cette fonctionnalité dans un chapitre ultérieur de ce livre, plus précisément dans le chapitre consacré à la gestion des API REST et GraphQL.

En résumé, la personnalisation du thème et l’ajout d’icônes dans une application Angular ne se limitent pas à un simple ajout esthétique. Ces étapes contribuent à renforcer l’identité visuelle de l’application, tout en améliorant l’expérience utilisateur. Une fois le design de base configuré, il est essentiel de se concentrer sur la gestion du contenu dynamique et sur l’intégration des modules complémentaires pour garantir une application réactive et fonctionnelle.

Comment optimiser la gestion des propriétés calculées et des formulaires réactifs dans Angular ?

Dans Angular, la gestion des propriétés calculées dans les composants peut parfois entraîner des problèmes de performance, en particulier lorsque ces propriétés sont fréquemment mises à jour dans les templates. Par exemple, prenons le cas de la propriété age, qui est calculée en fonction de la date de naissance de l'utilisateur. Si cette propriété est appelée à plusieurs reprises par le moteur de détection des changements d'Angular, elle peut affecter la performance globale de l'application.

Prenons un exemple concret : la fonction qui calcule l'âge de l'utilisateur en utilisant getFullYear() sur deux dates, l'une représentant l'année actuelle et l'autre la date de naissance. Cette méthode n'est pas idéale en termes de performance car chaque fois que la détection des changements se déclenche (ce qui peut se produire jusqu'à 60 fois par seconde), Angular recalculera l'âge. Cela peut provoquer une surcharge inutile, en particulier dans des applications complexes où plusieurs autres éléments sont également mis à jour simultanément.

Une manière de résoudre ce problème consiste à utiliser des "pipes pures" personnalisées. Les pipes pures permettent de s'assurer qu'Angular ne recalculera la propriété age que lorsque l'une de ses valeurs dépendantes (comme la date de naissance) change réellement. Cela améliore la performance en limitant le nombre de calculs effectués.

Pour aller plus loin, une autre solution consiste à utiliser les signaux calculés (computed signals) qui sont une fonctionnalité relativement récente d'Angular. Ces signaux sont des entités en lecture seule qui dérivent leur valeur d'autres signaux, ce qui permet d'optimiser encore davantage la gestion des dépendances. Dans cet exemple, au lieu de recalculer constamment l'âge, nous pouvons créer un signal dateOfBirth et un signal age, de manière à ce que l'âge soit recalculé uniquement lorsque la date de naissance change, et non à chaque cycle de détection des changements.

Voici un exemple de code pour cette approche :

javascript
Copy code
now = new Date();

dateOfBirth = signal(this.formGroup.get('dateOfBirth')?.value || this.now);
age = computed(() => this.now.getFullYear() - this.dateOfBirth().getFullYear());

Dans ce cas, l'âge sera mis à jour uniquement si la date de naissance est modifiée, ce qui est beaucoup plus efficace que le calcul à chaque cycle de détection des changements. Cette méthode repose sur l'usage de signaux, une approche qui marque un changement majeur dans le cadre d'Angular et qui nécessite parfois des ajustements, notamment dans le contexte des formulaires réactifs.

Un aspect important à considérer ici est l'intégration de cette approche avec les formulaires réactifs d'Angular. Bien que les signaux et les propriétés calculées soient puissantes, elles ne peuvent pas être utilisées directement dans des composants réactifs comme FormGroup sans certaines adaptations. En l'absence de composants basés sur des signaux et de la prise en charge de FormGroup, les signaux tels que dateOfBirth et age ne peuvent pas être facilement intégrés dans les formulaires réactifs, ce qui nécessite de bien comprendre les limites de ces fonctionnalités.

Un autre point essentiel à prendre en compte lors de l’utilisation de propriétés calculées et de pipes dans Angular est la validation des données. Par exemple, lorsque vous validez une date de naissance, il peut être nécessaire de limiter la plage des dates autorisées, par exemple, en n'acceptant que les dates situées dans les cent dernières années. Ce genre de validation peut être effectué en définissant une propriété minDate et en l'utilisant pour configurer les attributs min et max dans les templates.

Par exemple, pour valider une date de naissance dans une plage de 100 ans, vous pourriez utiliser :

javascript
Copy code
minDate = new Date(this.now.getFullYear() - 100, this.now.getMonth(), this.now.getDate());

Ensuite, cette propriété pourrait être appliquée directement dans le formulaire, où la plage de dates valide serait respectée et l'âge calculé en conséquence. Cela permet non seulement d'améliorer l'expérience utilisateur, mais aussi de garantir que les données saisies sont conformes aux contraintes de l'application.

Une autre fonctionnalité intéressante à explorer dans le cadre des formulaires réactifs est la prise en charge de la saisie de plusieurs numéros de téléphone. Cela peut être géré à l'aide de tableaux dynamiques dans Angular. Le FormArray permet de créer des formulaires dynamiques où chaque élément de l'array est un groupe de contrôles (FormGroup). Cela est particulièrement utile lorsque l'utilisateur doit saisir plusieurs informations similaires, comme plusieurs numéros de téléphone.

Voici un exemple de création et d'ajout dynamique de numéros de téléphone dans un formulaire réactif :

javascript
Copy code
phones: this.formBuilder.array(this.buildPhoneArray(user?.phones || [])),

La méthode buildPhoneArray initialise le tableau des numéros de téléphone, tandis que la méthode addPhone permet d'ajouter un nouveau champ de saisie au tableau. Ces fonctions permettent une gestion souple des formulaires et assurent que l'interface utilisateur peut s'adapter à des besoins variés.

L'implémentation dans le template de la gestion des numéros de téléphone pourrait ressembler à ceci :

html
Copy code
<form [formGroup]="formGroup">

  <div formArrayName="phones">
    <div *ngFor="let phone of phonesArray.controls; let i = index">
      <div [formGroupName]="i">
        <input formControlName="type" />
        <input formControlName="digits" />
        <button (click)="removePhone(i)">Remove</button>
      </div>
    </div>
  </div>
</form>

Cet exemple montre comment il est possible d'ajouter dynamiquement des champs de saisie pour les numéros de téléphone tout en maintenant une gestion efficace du formulaire.

Les solutions comme les pipes pures, les signaux calculés et l'utilisation avancée de FormArray offrent des outils puissants pour optimiser les performances et la flexibilité des formulaires dans Angular. Cependant, leur mise en œuvre nécessite une bonne compréhension des concepts sous-jacents d'Angular, notamment la détection des changements, les formulaires réactifs et la gestion des dépendances dans les propriétés calculées.

Comment gérer l'état dans Angular : SignalStore, Akita, Elf et les bibliothèques alternatives

SignalStore est un système de gestion d'état robuste qui combine les meilleures caractéristiques de NgRx/Store et NgRx/ComponentStore. Cette solution est particulièrement utile lorsqu'on souhaite avoir une gestion centralisée des états tout en permettant des interactions locales spécifiques à un composant. SignalStore permet de structurer l'état de manière claire, en intégrant les signaux (signals) qui permettent de réagir efficacement aux changements d'état, tout en offrant une interface minimaliste mais puissante pour gérer la logique métier associée.

SignalState, une fonctionnalité dérivée de SignalStore, fournit une approche encore plus allégée pour la gestion d'état dans les composants Angular. Elle permet de gérer de petites portions d'état de manière concise, réduisant ainsi la nécessité de gérer des propriétés complexes dans les services. Cette approche permet de se concentrer directement sur l'état des composants, en éliminant la surcharge liée à l'implémentation de solutions plus complexes. SignalState est un excellent choix pour les applications qui nécessitent une gestion d'état simple et réactive au sein des composants individuels.

Une autre bibliothèque importante dans l'écosystème Angular est Akita. Akita se distingue par son approche inspirée des concepts Flux, Redux et RxJS, en combinant ces idées dans un modèle de gestion de données observables. Ce système favorise l'immuabilité des données et le flux continu des informations, tout en réduisant le code répétitif souvent associé à d'autres solutions. L'un des principaux avantages d'Akita est sa courbe d'apprentissage modérée et sa structure claire, ce qui le rend accessible aux développeurs de tous niveaux. L'utilisation d'Akita simplifie également l'implémentation de la gestion des entités et du suivi de l'historique des données, ce qui peut être très utile pour des applications complexes nécessitant une gestion avancée de l'état.

En plus de ces bibliothèques, il est essentiel de comprendre l’importance de l’intégration avec les API et la gestion des requêtes HTTP dans Angular. Lorsque l’on utilise des bibliothèques comme NgRx Data, il peut être nécessaire de configurer un proxy pour acheminer correctement les requêtes API vers le serveur approprié durant le développement. Cette configuration permet de contourner les problèmes liés à la séparation des ports pour les applications frontend et backend en développement, facilitant ainsi l’interaction entre les différentes couches de l’application.

Un autre aspect crucial dans la gestion de l'état au sein des applications Angular est la gestion des éléments d'interface utilisateur pendant les chargements de données, comme les spinners de chargement. L'utilisation de solutions globales pour afficher un spinner lors de requêtes API peut être une solution pratique pour des applications simples, mais elle peut rapidement devenir intrusive dans des applications plus complexes. À cet égard, une gestion plus fine avec des spinners locaux peut offrir une expérience utilisateur plus fluide. En combinant SignalState et NgRx, il est possible de gérer l'affichage du spinner de manière globale sans pour autant perturber l’expérience utilisateur en cas de multiples appels API simultanés.

La configuration de ces outils et l’adoption d’une approche réactive permettent de répondre aux besoins complexes des applications modernes. Chaque bibliothèque — qu’il s’agisse de SignalStore, Akita ou Elf — a ses propres avantages et inconvénients, mais elles partagent un objectif commun : simplifier la gestion de l’état et améliorer la réactivité des applications Angular. Dans le contexte d'une application Angular bien architecturée, ces outils permettent une gestion de l’état à la fois souple, performante et facile à maintenir, offrant ainsi aux développeurs un large éventail de solutions pour répondre à des besoins diversifiés.