Le futur d'Angular : Au-delà de ngZone

La dépendance d'Angular à ngZone a longtemps offert un moyen simple de gérer la détection des changements. Cependant, les performances ont souvent été sacrifiées dans ce processus. Les applications pouvaient être ralenties par des re-rendus inutiles et un manque de contrôle sur les modifications d'état. Ces difficultés ont ouvert la voie aux changements les plus récents.

Les dernières versions d'Angular abordent ces problèmes avec les signaux et la nouvelle syntaxe de contrôle de flux. Les signaux offrent une solution légère pour contrôler l'état et la réactivité, garantissant que les mises à jour n'ont lieu que lorsque cela est nécessaire. De plus, les nouveaux contrôles de flux permettent de réduire la logique dans les templates, d'améliorer le lazy loading et d'augmenter l'efficacité. Ces changements ouvrent progressivement la voie vers un avenir sans zone.

Cette présentation montrera cette renaissance d'Angular et comment elle résout des problèmes réels à travers des démonstrations. Vous repartirez avec une compréhension de l'utilisation des signaux et des contrôles de flux pour créer des applications plus rapides et plus réactives.

Transcript

1. @simon-hock Le futur d'Angular : Au-delà de ngZone @LoMagnette
2. Loïc Magnette @LoMagnette
3. Simon Hock @simon-hock
4. Zone.js @simon-hock @LoMagnette
5. @simon-hock @LoMagnette
6. New control flow @simon-hock @LoMagnette
7. @simon-hock @LoMagnette <ng-container *ngFor="let sheep of sheep$ | async"> <app-sheep-card [sheep]="sheep"/> </ng-container> New control flow
8. @simon-hock @LoMagnette <ng-container *ngFor="let sheep of sheep$ | async"> <app-sheep-card [sheep]="sheep"/> </ng-container> New control flow @for (sheep of sheep$ | async; track sheep.id) { <app-sheep-card [sheep]="sheep"/> }
9. @simon-hock @LoMagnette <div *ngIf="aCondition"> […] </div> New control flow
10. @simon-hock @LoMagnette <div *ngIf="aCondition; else aTemplate"> […] </div> <ng-template #aTemplate> <ng-container *ngIf="anotherCondition"> […] </ng-container> </ng-template> New control flow
11. New control flow @simon-hock @LoMagnette <div *ngIf="aCondition; else aTemplate"> […] </div> <ng-template #aTemplate> <ng-container *ngIf="anotherCondition; else anotherTemplate"> […] </ng-container> </ng-template> <ng-template #anotherTemplate> […] </ng-template>
12. New control flow @simon-hock @LoMagnette <div> @if (aCondition) { […] } </div> <div *ngIf="aCondition; else aTemplate"> […] </div> <ng-template #aTemplate> <ng-container *ngIf="anotherCondition; else anotherTemplate"> […] </ng-container> </ng-template> <ng-template #anotherTemplate> […] </ng-template>
13. @simon-hock New control flow @LoMagnette <div> @if (aCondition) { […] } @else { […] } </div> <div *ngIf="aCondition; else aTemplate"> […] </div> <ng-template #aTemplate> <ng-container *ngIf="anotherCondition; else anotherTemplate"> […] </ng-container> </ng-template> <ng-template #anotherTemplate> […] </ng-template>
14. New control flow @simon-hock @LoMagnette <div> @if (aCondition) { […] } @else if (anotherCondition) { […] } @else { […] } </div> <div *ngIf="aCondition; else aTemplate"> […] </div> <ng-template #aTemplate> <ng-container *ngIf="anotherCondition; else anotherTemplate"> […] </ng-container> </ng-template> <ng-template #anotherTemplate> […] </ng-template>
15. New control flow @simon-hock @LoMagnette <div [ngSwitch]="aValue"> <div *ngSwitchCase="'someValue'"> […] </div> <div *ngSwitchCase="'someOtherValue'"> […] </div> <div *ngSwitchDefault> […] </div> </div> <div> @switch (aValue) { @case ('someValue') { […] } } </div>
16. New control flow @simon-hock @LoMagnette <div [ngSwitch]="aValue"> <div *ngSwitchCase="'someValue'"> […] </div> <div *ngSwitchCase="'someOtherValue'"> […] </div> <div *ngSwitchDefault> […] </div> </div> <div> @switch (aValue) { @case ('someValue') { […] } @case ('someOtherValue') { […] } @default { […] } } </div>
17. New control flow ng g @angular/core:control-flow @LoMagnette
18. New control flow @simon-hock ng g @angular/core:control-flow @LoMagnette
19. @simon-hock Signals @LoMagnette
20. Signals @simon-hock @LoMagnette
21. Signals @simon-hock @LoMagnette
22. @simon-hock @LoMagnette const sheep = signal<Sheep>(aSheep) Signals
23. sheep() Signals @simon-hock @LoMagnette
24. sheep() Signals @simon-hock @LoMagnette
25. sheep() Signals @simon-hock @LoMagnette
26. sheep() Signals @simon-hock @LoMagnette
27. - Signal - Computed - Effect - Input - Output - Query - Model - LinkedSignal Signals @simon-hock @LoMagnette
28. @simon-hock @LoMagnette # Some new optional migrations in v19 # updates @Input $ ng generate @angular/core:signal-input-migration # updates @Output $ ng generate @angular/core:output-migration # updates Query $ ng generate @angular/core:signal-queries-migration Signals
29. Forms @simon-hock @LoMagnette
30. Resource @simon-hock @LoMagnette
31. Zoneless future @simon-hock @LoMagnette
37. Feedback www.oniryx.be @LoMagnette @simon-hock
38. CODE www.oniryx.be @LoMagnette @simon-hock
39. SLIDES www.oniryx.be @LoMagnette @simon-hock