Aller au contenu principal

Veille - Oct-Nov 2023

· 5 minutes de lecture
Cyril Hue
Cyril Hue
Front End Engineer

Aujourd'hui je vous fais un petit recap de ma veille des derniers mois.

Je vais principalement vous partager des articles en rapport de près ou de loin avec le front.

On va commencer par les 3 annonces les plus importantes:

  • Angular 17
  • ViteJs 5
  • Typescript 5

Angular 17

Angular 17 est sorti il y a quelques jours, et il apporte son lot de nouveautés.

On notera tout d'abord en plus du nouveau logo, un relooking complet de la doc, avec plus d'interactivité pour l'apprentissage (usage desWebContainers) https://angular.dev

Ensuite un point important est le changement du control flow intégré d'angular. Ce qu'on avait l'habitude de faire avec *ngIf, *ngSwitch, and *ngFor est maintenant remplacé par une nouvelle syntaxe.

On notera principalement un gain significatif sur le type-narrowing, et une rapidité de rendu amélioré.

Le trackBy était souvent absent dans les boucles *ngFor cela pouvait mener à des problèmes de performance. Il est maintenant obligatoire dans cette nouvelle syntaxe.

Une commande de migration est disponible pour migrer votre code vers la nouvelle syntaxe. Aussi les équipes travail avec Jetbrains et Prettier pour supporter la nouvelle syntaxe au mieux.

If statement

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

Devient:

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

Switch statement

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

Devient:

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

For loop

On notera que le trackBy est obligatoire dans cette nouvelle syntaxe ainsi que la présence d'un shortcut optionel @empty pour gérer le cas d'une liste vide.



```html
@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

Performance

Toutes ces nouveautés apportent un gain de performance significatif, on notera:

  • 90% plus rapide au runtime
  • 87% plus rapide au build pour l'hybrid rendering
  • 67% plus rapide au build pour le client rendering

Deferrable views

Angular 17 apporte aussi le concept de deferrable views qui permet de définir des vues qui ne seront pas rendu au premier rendu de la page, mais seulement quand l'utilisateur en a besoin. La syntaxe est assez simple et s'inspire de la nouvelle syntaxe de *ngIf.

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

Il existe d'autre trigger comme on idle, on immediate je vous laisse regarder la doc pour plus d'info ici https://angular.io/guide/defer

Le reste

  • l'hydration sort de la preview
  • nouveau package @angular/ssr
  • deploiement simplifié avec le cloud (firebase)
  • nouveau hooks de cycle de vie afterRender et afterNextRender
  • debug des injections de dépendances dans les devtools https://angular.io/guide/devtools
  • Signal passe en developper preview
  • View transition API en experimental
  • Vite et esbuild est maintenant le defaut pour les nouveaux projets

Vous retrouverez toutes les infos ici dans l'article sur le blog d'Angular ici : https://blog.angular.io/introducing-angular-v17

Vite 5.0

L'autre grosse annonce c'est la sortie de Vite 5.0, qui apporte son lot de nouveautés. D'ailleurs il nous tease la sortie prochaine de Vitest 1.0 roadmap vitest, ou encore l'open source de Rolldown qui approche pour la fin d'année. Vite 5 utilise désormais Rollup 4 ce qui apporte un gain de performance significatif pour le build. Il y a eut un travail fait sur le clean up des API (retrait des API deprecated). Il y a aussi Node.js 18 et 20+ qui sont désormais requis suite à la EOL de node 16.

Ici le lien vers l'annonce officielle: https://vitejs.dev/blog/announcing-vite5 Et voici le lien vers le changelog: Chagelog

Typescript 5.3 Realease Candidate

Plusieurs nouveautés je ne prendrais ici le temps d'en cité que quelques unes. L'import attributes est mis à jour et on peut utiliser le mots clés with. Le Switch (true) narrowing est maintenant disponible. Le Jump to definition est maintenant disponible lors du clic sur les Hints. Il y a aussi de l'optimisation sur les performances en skipant le parsing de la JSDoc.

Il y à encore plein d'autre changement, je vous laisse le lien vers l'annonce officielle: Typescript 5.3 Release Candidate

Un peu de lecture

Pour terminer cette article déja bien long, je vous partage quelques articles que j'ai trouvé intéressant ces derniers mois.

  • Server-Side Rendering (SSR) with Bun and React SSR - Bun + React
  • GitHub - coryhouse/a11y: Repository on accessibility a11y
  • A (more) Modern CSS Reset - Andy Bell CSS Reset
  • React Server Components React Server Components
  • Creating Custom QR Codes - Holly Cummins QR Codes
  • Empty States Empty States
  • Le secret caché des Regex en JavaScript qui rend fou ! - Blog - Code-Garage Regex
  • Storybook 7.5 Storybook 7.5
  • Only use GET and POST | Epic Web Dev by Kent C. Dodds GET and POST
  • GitHub - docusealco/docuseal: Open source DocuSign alternative. Create, fill, and sign digital documents ✍️ Docuseal
  • Quand les langues fictives deviennent mécaniques de jeu – Canard PC Langues fictives
  • 🎉 Introducing UnoCSS Preset Fluid: The Next Step in Responsive Web Design | by Renato | Nov, 2023 | Medium UnoCss Fluid
  • GB BASIC | Tony Wang GB Basic