Les nouveautés d’Angular 16

Avant de se lancer

Vous avez la possibilité de suivre notre formation Angular sur 3 jours durant laquelle vous apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.

Si vous avez déjà de l’expérience sur Angular, nous vous proposons notre formation Angular Avancé. Vous apprendrez à résoudre des problèmes d’orchestration sur RxJS, l’amélioration des performances de votre site Web ou développer et gérer des composants Angular.

L’équipe Ambient IT

Signals Angular

La grande nouveauté de cette nouvelle version est les signals Angular. Cela permet de définir des valeurs réactives et d’exprimer des dépendances entre elles. Leurs objectifs sont d’améliorer les performances des applications Angular. Découvrez comment ces signals fonctionnent.

Fonctions Getter

Elle permet d’accéder à la valeur courante et d’enregistrer le signal lu dans un contexte réactif. Chaque signal est représenté par une fonction getter, elles permettent de :

• Indiquer que l’opération principale a été lue
• Rendre les lectures de signal cohérentes entre le code TypeScript et les expressions de modèle
• Indique qu’un accès à la propriété se produit
• Utiliser une fonction légère pour faciliter la lecture des signals

Signaux inscriptibles

La bibliothèque de signals Angular fournit une implémentation par défaut du signal inscriptible qui peut être modifié via les méthodes de modification intégrées :

interface WritableSignal<T> extends Signal<T> {
  /**
   * Directly set the signal to a new value, and notify any dependents.
   *
   * Useful for changing primitive values or replacing data structures when
   * the new value is independent of the old one.
   */
  set(value: T): void;

  /**
   * Update the value of the signal based on its current value, and
   * notify any dependents.
   *
   * Useful for setting a new value that depends on the old value, such as
   * updating an immutable data structure.
   */
  update(updateFn: (value: T) => T): void;

  /**
   * Update the current value by mutating it in-place and notifying any
   * dependents.
   *
   * Useful for making internal changes to the signal's value without changing
   * its identity, such as pushing to an array stored in the signal.
   */
  mutate(mutatorFn: (value: T) => void): void;

  /**
   * Return a non-writable `Signal` which accesses this `WritableSignal` but does not allow
   * mutation.
   */
  asReadonly(): Signal<T>;
}

L’instance d’un signal peut se créer à l’aide de la fonction de création de signal :

function signal<T>(
  initialValue: T,
  options?: {equal?: (a: T, b: T) => boolean}
): WritableSignal<T>;

Par exemple :

// create a writable signal
const counter = signal(0);

// set a new signal value, completely replacing the current one
counter.set(5);

// update signal's value based on the current one
counter.update(currentValue => currentValue + 1);

Séparation lecture/Écriture

La primitive reactive principale est en lecture seule, cela signifie qu’il est possible de propager des valeurs réactives sans donner la possibilité de modifier ces dernières. Cette séparation lecture/écriture encourage les bons modèles architecturaux pour le flux de données dans les applications fondées sur le signal. La mutation de l’état doit se centraliser et se produire à l’aide du propriétaire de cet état au lieu de se produire n’importe où dans l’application.

Signaux calculés

Ils créent des valeurs dérivées basées sur une ou plusieurs valeurs de signal de dépendance. Ils peuvent être fondés sur les valeurs d’autres signaux calculés qui produisent plusieurs couches de calcul dynamique transitif telles que :

const counter = signal(0);

// creating a computed signal
const isEven = computed(() => counter() % 2 === 0);

// computed properties are signals themselves
const color = computed(() => isEven() ? 'red' : 'blue');

La signature du calcul est :

function computed<T>(
  computation: () => T,
  options?: {equal?: (a: T, b: T) => boolean}
): Signal<T>;

La fonction de calcul doit être exemptée d’effets secondaires, elle doit accéder qu’aux valeurs des signaux dépendants d’autres valeurs.

Si vous souhaitez en savoir davantage, nous avons dédié un article sur les signaux Angular spécialement pour cette fonctionnalité.

Retravailler la réactivité

Un nouveau modèle de réactivité a été introduit avec des améliorations significatives aux performances ainsi qu’à l’expérience des développeurs. Le modèle est rétrocompatible et interopérable avec le système actuel, ainsi, il permet plusieurs choses :

• Une réactivité fine qui permettra de vérifier les changements uniquement dans les composants concernés
• Fournir des propriétés calculées sans la pénalité de devoir recalculer à chaque cycle de détection de changement
• Des performances d’exécution améliorées en réduisant le nombre de calculs lors de la détection des modifications
• Rendre Zone.js facultatif avec l’utilisation des signals pour notifier le framework d’un changement de modèle
• Permettre une meilleure interopérabilité avec RxJS en décrivant un plan pour introduire des entrées réactives

Rendu côté serveur et hydratation améliorés

Rendu côté serveur

Des mises à jour ont été effectuées comme les schémas ng.add qui permettent d’ajouter un rendu côté serveur aux projets avec une API autonomes. Une nouvelle fonctionnalité fait son apparition, l’introduction de la prise en charge d’une politique de sécurité du contenu plus stricte.

Hydratation

Angular ne restitue plus l’application à partir de zéro depuis la nouvelle hydratation non destructive de l’application complète. Cela garantit plusieurs avantages :

• Intégration facile avec des applications existantes en quelques lignes de code
• Adoption incrémentielle de l’hydratation avec le ngSkipHydration attribut dans les modèles pour les composants effectuant une manipulation du DOM
• Meilleur Web Core Vitals dans certains scénarios
• Une architecture qui permet un chargement de code fin à l’aide des primitives
• Aucun scintillement de contenu sur une page pour les utilisateurs finaux

La documentation officielle vous fournira plus de détails sur l’hydratationon.

Amélioration des outils pour les composants autonomes

Afin d’aider les développeurs à migrer leurs applications vers des API autonomes, des schémas de migration et un guide de migration autonome ont été développées. Dans le répertoire de projet, il faut exécuter la commande suivante :

ng génère @angular/core:standalone

Le code sera converti par les schémas qui vont supprimer NgModules et les classes inutiles pour modifier le bootstrap du projet et l’utilisation des API autonomes.

Vous pouvez créer de nouveaux projets autonomes avec la commande :

nouveau --standalone

Vous obtiendrez une sortie de fichier simple et les générateurs du projet vous fourniront des composants, des directives et des tuyaux autonomes.

Il est notamment possible de configurer Zone.js à l’aide de la nouvelle bootstrapApplication API. Cela s’exécute via une nouvelle option provideZoneChangeDirection :

bootstrapApplication ( App , { 
  fournisseurs : [ provideZoneChangeDetection ({ eventCoalescing : true })] 
});

Progression des outils de développement

Désormais dans cette nouvelle version d’Angular, le système de construction est basé sur esbuild pour les développeurs. Esbuild améliore les versions de développement et de production. Dans ng serve c’est Vite qui est utilisé pour le serveur de développement. De plus, il est important de souligner que Vite est uniquement utilisé pour le serveur de développement. Le compilateur Angular maintient un graphique de dépendance entre les composants. C’est la raison pour laquelle, il est nécessaire que le modèle de compilation soit différent de Vite.

Vous avez la possibilité d’essayer Vite et Esbuild avec la commande :

... 
"architecte" :  { 
  "build" :  {                      /* Ajouter le suffixe esbuild */ 
    "builder" :  "@angular-devkit/build-angular:browser-esbuild" ,
 ...

Amélioration de l’expérience des développeurs

Auparavant, il n’était pas possible d’obtenir une erreur de compilation si aucune valeur n’était spécifiée pour une entrée spécifique. La modification n’ajoutait aucune surcharge lors de l’exécution, car le compilateur Angular effectue la vérification durant la construction. Cette fonctionnalité a été grandement réclamée par les développeurs, désormais, cette fonctionnalité est disponible.

Pour cela, il suffit d’exécuter la commande suivante :

@Component (...) 
export  class  App { 
  @Input ({ required : true }) title : string = '' ; 
}