À l'occasion de la sortie de cette nouvelle version d'Angular a eu lieu un live avec une partie de la Core Team (live qu'on a regardé en groupe avec quelques devs à Nantes), on a aussi organisé le lendemain une soirée table ronde pour marquer la sortie en parlant en français des nouveautés !

Renaissance d'Angular !

Si vous avez suivi le live (ou pris le temps de le regarder après coup), vous savez que cette version est aussi marquée par un changement de logo (ça fait déjà quelque temps que je parle de la "3ème ère d'Angular", on est en plein dedans !) et une nouvelle doc angular.dev. Le nouveau logo est plus moderne et tranche encore un peu plus avec le logo d'AngularJS, la nouvelle doc est une reprise à zéro de la doc qu'on connait tous avec pas mal de changements : thème dark (choix automatique à partir de la préférence du navigateur ou au choix manuel), ré-écriture de la documentation, nouveau tutoriel interactif, playground, etc.

Bien sûr, on parle de renaissance mais comme on a été habitué depuis la version 2 : il n'est pas question de breaking change ! On est face à une version comme les autres qu'on pourra utiliser sans rien casser. Juste des nouvelles briques sont posées pour construire le futur d'Angular, avec de nouvelles recommandations pour construire plus simplement nos applications.

Release des Signals

Très attendu, en developer preview sur la version précédente, nous pouvons maintenant utiliser les Signals sans risque ! Pas de gros changement par rapport à la version 16. Une seule fonction des Signals n'a pas été basculé en release (et reste en developer preview) : effect(). Il reste un débat dans la core team sur un point du fonctionnement de cette fonction, qui n'est de toutes façons pas nécessaire à l'utilisation des Signals.

Sans pour autant jeter tous vos composants actuels, il est donc maintenant recommandé de passer par les Signals pour manipuler l'état de vos composants à partir de maintenant !

C'est un tournant majeur pour Angular. En effet cette brique marque le premier vrai grand pas vers la fin de Zone.js, qui sera entièrement remplacé par les Signals à long terme offrant au passage de bien meilleurs performances grace à la finesse de la réactivité qui en découle, évitant toute la mécanique de détection de changement !

Standalone et esbuild par défaut !

Jusqu'à 87% de temps en moins pour exécuter un ng build, jusqu'à 80% pour un refresh sur un ng serve. Je sais pas vous mais moi j'attendais ça depuis longtemps ! Si le nouveau builder était disponible uniquement en developer preview en version 16, en version 17 tous les nouveaux projets démarreront avec ce builder et plus le builder legacy avec webpack.

Vous pouvez évidemment migrer vers ce dernier si vous le souhaitez ! Attention toute fois à prendre en compte que vous devrez aussi migrer vos configurations webpack custom si vous en avez. Elles ne seront en effet pas compatible avec esbuild.

Au passage, les composants standalone sont maintenant le choix par défaut pour la création de nouveau composant !

Nouveau control flow

Il n'y avait rien de vraiment concret jusqu'à il y a quelques mois, mais on va pouvoir dire au revoir aux *ngIf, *ngFor et *ngSwitch ! Enfin presque ! Pour cette version 17, le nouveau Control Flow est en developer preview et il reste encore quelques limitations (par exemple on ne peut pas créer d'alias sur une variable avec le nouveau control flow comme on le faisait en faisant *ngIf="foo$ | async as foo").

Pour vous montrer la nouvelle syntaxe, je vais très simplement "voler" un exemple de Cédric Exbrayat (Ninja Squad) :

<h1>Ninja Squad</h1>
@if (condition) {
  <ul>
    @for (user of users; track user.id) {
      <li>{{ user.name }}</li>
    }
  </ul>
}

Je pense que c'est clair pour tout le monde : on a enfin un vrai control flow facile à prendre en main dans Angular ! J'ai pris un exemple simple montrant le @if et @for, mais il y a comme on peut l'attendre : @else, @else if, @switch, @case, @default et @empty (pour un for sur une liste vide).

Note : ce nouveau Control Flow implique pas mal de changement de syntaxe, et l'outillage n'est pas tout à fait prêt. Je peux citer l'exemple de prettier qui a merger le premier support du nouveau control flow quelques jours après la sortie de la version 17. Donc ne vous étonnez pas si vous avez quelques soucis de formattage pour l'instant !

Fine grained Lazy loading !

Si depuis très longtemps on peut faire du lazy loading au niveau du routeur, il était compliqué de faire du lazy loading au niveau d'un composant. La version 17 introduit (en developer preview) l'instruction @defer qui va permettre d'automatiquement générer un chunk à la compilation et choisir quand ce chunk sera chargé, avec moyen de faire un affichage spécifique avant le chargement, pendant le chargement et en cas d'erreur.

Je ne vous fais par attendre, et je re-vole un exemple de Cédric Exbrayat :

@defer (when show) {
  <ns-chart />
}
@placeholder {
  <div>Something until the loading starts</div>
}
@loading {
  <div>Loading...</div>
}
@error {
  <div>Something went wrong</div>
}

À noter qu'on a tout un panel d'option pour définir le timing de chargement : immediate, idle (quand le navigateur ne fait rien), hover, interaction, viewport (quand la zone du composant entre dans le viewport, donc typiquement au scroll). Avec tout un panel aussi de condition personnalisé via le when.

Personnellement, je suis très hype par cette fonctionnalité ! Il va falloir l'utiliser avec parcimonie pour ne pas faire n'importe quoi mais c'est très puissant tout en étant très simple à mettre en place !

Conclusion

Je passe sur tous les petits changements de cette version, car je préfère me concentrer sur les gros changements ! Est-ce que vous êtes aussi hyper que moi en voyant tout ça ? Personnellement je suis pressé de voir ce que nous réserve la version 18 !

Sources :

Crédit photo : https://unsplash.com/photos/text-MG95DUIsQlM