Le nouveau control flow d'Angular !

A l'issue de la ng-conf 2023, une RFC a été ouverte présentant une nouvelle façon d'interagir sur le control flow.

Dans cet article, nous allons revenir sur cette RFC et les avantages de cette nouvelle API.

C'est quoi une RFC ?

De manière plus générale, une RFC (Request For Comments) est un document qui décrit une proposition, une idée ou une norme dans un domaine spécifique. Les RFC sont souvent utilisées pour faciliter la communication et la collaboration entre les experts d'un domaine et pour établir des normes et des pratiques communes. Les RFC sont souvent considérées comme des documents de référence dans leur domaine respectif.

Les directives structurelles

En Angular, une directive structurelle est une directive qui permet de modifier la structure du DOM (Document Object Model) en fonction des données fournies par le composant.

Ce sont des instructions qui permettent de manipuler les éléments HTML en ajoutant, supprimant ou modifiant des éléments en fonction des conditions définies dans le code.

Les plus courantes en Angular sont *ngIf, *ngFor et *ngSwitch.

• *ngIf permet d'afficher ou de masquer un élément HTML en fonction d'une condition.
• *ngFor permet de répéter un élément HTML pour chaque élément d'un tableau ou d'une liste.
• *ngSwitch permet de basculer entre plusieurs éléments HTML en fonction d'une valeur donnée.

Mais ça, c'était avant.

Disclaimer: tout ce qui va suivre est en WIP, selon les décisions suites à la RFC, les APIs peuvent changer.

Pourquoi changer le control flow... maintenant ?

Récement, une autre RFC avait fait du bruit : les signals. Ils nous donne la possibilité de faire des applications Angular sans zone.js. Sauf que les directives structurelles actuelles sont basées... sur zone.js.

Pour remédier à cela, plusieurs possibilités ont été étudié :

• Impacter les directives actuelles en assurant une retro-compatibilité (très lourd et dangereux à faire)
• Créer des directives uniquement compatibles avec les signals (scission encore plus forte entre zone.js et signal)
• Améliorer le control flow actuel en améliorant la DX

Seul le dernier point a été retenu. Les deux façons de faire vont donc cohabiter... pour le moment.

Une meilleure DX donc ?

La nouvelle syntaxe de control flow a plusieurs objectifs majeurs :

1. Syntaxiquement similaire à la syntaxe du control flow en JavaScript. (quand vous écrivez un if par exemple);
2. Syntaxiquement distincte de la syntaxe HTML;
3. Fonctionne sur plusieurs modèles (if-elseif-else, switch-case-default)
4. Syntaxe flexible permettant une personnalisation pour chaque cas d'utilisation (if vs for vs switch).
5. Il doit être possible de migrer automatiquement pratiquement toutes les utilisations de control flow existants vers la nouvelle syntaxe.

Exemple : Control flow avec if / else

{#if cond.expr}
  Main case was true!
{:else if other.expr}
  Extra case was true!
{:else}
  False case!
{/if}

Exemple : Control flow avec switch

{#switch cond.kind}
  {:case x}
    X case
  {:case y}
    Y case
  {:case z}
    Z case
  {:default}
    No case matched
{/switch}

Point d'attention : pas besoin de break dans ce type de switch !

Exemple : Control flow avec for

{#for item of items; track item.id}
  {{ item }}
{:empty}
  There were no items in the list.
{/for}

Conclusion

2023 est vraiment une très bonne année pour Angular.

Le framework lève enfin la tête et n'hésite pas à s'inspirer des bonnes idées des concurrents (coucou Svelte).

Cette nouvelle syntaxe du control flow cache en fait une meilleure prise en charge de la réactivité ce qui est une excellente nouvelle. La DX est améliorée ainsi que la lisibilité du block.

Angular souhaite encore une fois nous pousser vers les signals et nous faire sortir (enfin) de zone.js.

J'ai hâte de pouvoir tester !