Ajouter un commentaire

Angular v19 : Material 3, meilleur rendu côté client, routage, performances

Par:
francoistonic

mer, 20/11/2024 - 10:56

Angular annonce la v19 du framework. Plus de 2 700 demandes et bugs ont été traités. La v19 promet d'être plus performante (comme à chaque version). Le côté serveur a été une des priorités pour le rendu. Pour soutenir ce bond, Angular annonce un préversion de l'incremental hydration. Une hydration sous Angular se définit ainsi : "L'hydratation est le processus qui restaure le rendu de l'application côté serveur sur le client (=navigateur). Cela inclut des éléments tels que la réutilisation du rendu serveur des structures DOM, de l'état de la persistance, le transfert des données déjà récupérés par le serveur, et d'autres processus." Angular précise que l'Hydration est une amélioration notable des performances sur la partie DOM. Documentation technique : https://angular.dev/guide/hydration

L'incremental hydration permet d'annoter son template en utilisant la syntaxe @defer. D'autres amélioration sont proposées sur l'event replay qui est activé par défaut ou encore l'apparition d'une nouvelle interface, ServerRoute, pour configurer les chemins liés au rendu côté serveur et mieux gérer le prérendu et le rendu :

export const serverRouteConfig: ServerRoute[] = [
{ path: '/login', mode: RenderMode.Server },
{ path: '/dashboard', mode: RenderMode.Client },
{ path: '/**', mode: RenderMode.Prerender },
];

Le ServerRoute indique login pour le serveur et dashboard pour le côté client. La configuration ServerRoute utilise un nouveau fichier. Attention : fonction en préversion uniquement. Autre nouveauté, déjà présente dans la v18 : le rendu côté serveur avec Zoneless. L'idée est de s'affranchir de la notion de zone et donc de la dépendance à zone.js. Autre nouveauté : le support du remplacement à chaud des modules. Cela permet de faire des modifications à la volée et de les mettre en production de suite. 

La partie sécurité a été retravaillée avec les équipes de Google pour générer automatiquement un hash basé sur le Strict Content Security Policy. Cette approche doit limiter les XSS (voir : https://web.dev/articles/strict-csp?hl=fr#choose-hash). Sur la partie design UI, la v19 introduit de nouveaux éléments de Material 3, par exemple la création d'un thème custom :

@use '@angular/material' as mat;

@include mat.core();

$light-theme: mat.define-theme((
color: (
primary: mat.$violet-palette,
tertiary: mat.$orange-palette,
theme-type: light
),
typography: Roboto,
density: 0
));

html {
// Apply the light theme by default
@include mat.core-theme($light-theme);
@include mat.button-theme($light-theme);
@include mat.card-theme($light-theme);
// and 27 more...
...
}

La v19 intègre aussi la notion de glisser-déposer 2 dimensions, dans Angular CDK, pour faciliter le drag & drop de composants en supportant tous les axes. Autre nouveauté : la réorganisation des onglets avec Angular CDK. 

Présentation complète des nouveautés de la V19 : https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

Filtered HTML

Plain text

CAPTCHA
Cette question permet de vérifier que vous n'êtes pas un robot spammeur :-)
 TTTTTT  DDD   U   U  III   AA  
TT D D U U I A A
TT D D U U I AAAA
TT D D U U I A A
TT DDD UUU III A A