Le nouveau control flow d'Angular !

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 !