Élevez votre développement/blogs/perficient

Angular est depuis longtemps un framework de développement Web de premier plan, alimentant d’innombrables sites Web dynamiques grâce à ses fonctionnalités robustes et son architecture évolutive. Cependant, les progrès technologiques récents ont permis à d’autres cadres d’offrir des solutions plus rapides et plus efficaces. Avec la sortie d’Angular 17, le framework répond avec une mise à jour transformatrice, améliorant les performances et la flexibilité. Cet article examinera ces fonctionnalités et leur impact sur le développement Web.

Angulaire 17

Cette dernière version a été publiée en novembre 2023 et a marqué une évolution significative par rapport à ses prédécesseurs, introduisant des changements substantiels et de nouvelles fonctionnalités.

Voici ses principales caractéristiques :

• Syntaxe des modèles de blocs : modifie la structure des modèles angulaires pour un codage plus intuitif pour le développeur.

• Différer : optimisation de la stratégie de chargement pour améliorer les performances des applications.

• Configuration SSR (Server-Side Rendering) : amélioration du référencement (Search Engine Optimization) et des temps de chargement avec des options avancées de rendu côté serveur.

• Vite : Intégration d’un outil d’interprétation plus rapide et plus efficace pour accélérer le développement.

• Signaux : introduction d’une nouvelle façon de gérer les changements d’état dans les applications, pour des interfaces plus réactives.

• Réactivité et sans zone : offre une gestion et des performances améliorées de l’état en réduisant la dépendance à l’égard du mécanisme de zone d’Angular.

Ces mises à jour visent collectivement à affiner l’expérience de développement et à élever les capacités des applications Angular, examinons cela !

Syntaxe du modèle de bloc

Angular a complètement changé la façon dont nous pouvons utiliser les directives de modèle, nous disposons désormais d’une syntaxe plus intuitive et proche de celle de JavaScript pour améliorer l’expérience du développeur et la lisibilité du code.

Bloc @if : bloc conditionnel.

//--file.component.html
public showContent = signal(false);

public toggleContent() {
  this.showContent.update(value => !value)
}

//--file.component.html
<button (click)="toggleContent()">
  Click Me!
</button>

@if(showContent()) {
  <p>Hello World!</p>
} @else {
  <p>*******</p>
}

Bloc @Switch : bloc multiconditionnel.

//--file.component.ts
type Grade="A"|'B'|'F';
public grade= signal<Grade>('A');

//--file.component.html
@switch (grade()) {
  @case ('A'){
    <p>Up to 90, Excellent! 😍</p>
  }
  @case ('B') {
    <p>Up to 80, Great! 😁</p>
  }
  @default {
    <p>Sorry, Try again! 😞</p>
  }
}

Bloc @for et @empty : Bloc itératif et vide par défaut option bloc.

public frameworks2 = signal([]);
//-------------------------------------
<ul>
  @For (framework of frameworks2(); track $index) {
    <li>{{framework}}</li>
  }
  @empty {
    <li>There's no added values!</li>
  }
</ul>

Autre des améliorations de performances sont incluses lors de sa construction. Bien que nous ayons pu percevoir la différence de performances avec Angular 17, nous avons tenté de confirmer ces changements en analysant les temps de création des scripts et du DOM(Modèle objet de document) chargement, en prenant comme base un code qui génère des balises de manière itérative 3000 fois en validant si elles sont affichées en fonction de leur index pair, en trouvant les résultats suivants :

Module commun

<ng-container
  *ngFor="let item of items; let i = index">
  <p *ngIf="i % 2 === 0">
    {{item}}
  </p>
</ng-container>

Nouvel angulaire 17 Directives

@for (item of items; track $index) {
  @if ( $index %2 === 0) {
    <p>{{item}}</p>
  }
}

Script moyen : 180-220 ms
Chargement Dom moyen : 400 ms

Script moyen : 105-110 ms
Chargement Dom moyen : 295 ms

Reporter

Angular offre désormais un nouveau moyen avancé de gérer le chargement paresseux avec le bloc modèle @defer. Ce bloc permet aux développeurs de spécifier les composants qui doivent se charger paresseusement, directement dans le modèle.

Pour pouvoir utiliser cette fonctionnalité, le composant doit être autonomece qui signifie que le composant ne sera pas dans un module.

Cette approche simplifie non seulement la structure des applications Angular, mais améliore également les performances en réduisant le temps de chargement initial. Les composants marqués @defer sont chargés uniquement en cas de besoin, améliorant ainsi l’efficacité de l’application et l’expérience utilisateur. Ce chargement différé sélectif peut optimiser considérablement l’utilisation des ressources et accélérer les vitesses de rendu, en particulier dans les applications complexes comportant de nombreux composants.

Ce mécanisme de chargement paresseux est affiné avec des directives supplémentaires telles que @placeholder, @error et @loading, qui gèrent les états de chargement du composant.

@placeholder : fournit un élément d’affichage temporaire jusqu’au chargement du composant

@error : gère les erreurs de chargement

@loading : indique le processus de chargement.

Un exemple de bloc de report dans le code peut être le suivant :

<section class="col-start-1">
  @defer (on interaction) { 
    <app-heavy-loaders-slow cssClass="bg-blue-500 h-20"> 
    </app-heavy-loaders-slow>

  } @loading { 
    <div class="w-full h-20 bg-yellow-100"> 
      Loading component (loading) 
    </div> 

  } @placeholder { 
    <div class="w-full h-20 bg-purple-100"> 
      Click the div (placeholder) 
    </div> 

  } @error { 
    <div class="w-full h-20 bg-red-100"> 
      An error happened 
    </div> 
  }
</section>

Faire une performance comparative au chargement un composant lourd, une personne peut voir une nette différence sur les Core Web Vitals lors de l’interaction avec une page qui se charge paresseusement ce genre de composants contre moichargement des composants lors du chargement de la page.

Performance sans délai

Performance avec report

RSS

Angular 17 vous permet de créer une nouvelle application avec Server-Side Rendering (SSR) dès le départ, éliminant ainsi le besoin d’installer séparément le package Angular Universal. Auparavant, Angular Universal nécessitait un double bundle pour restituer le code HTML, ce qui entraînait des problèmes de référencement, de performances et d’expérience utilisateur. Angular 17 rationalise cela en implémentant SSR par défaut, en créant simultanément des bundles serveur et client et en évitant le problème du double regroupement.

Cette amélioration stimule le référencement et améliore les métriques Core Web Vitals telles que First Contentful Paint (FCP) et Largest Contentful Paint (LCP). Il améliore également l’expérience utilisateur globale en fournissant le contenu plus rapidement et de manière plus cohérente du serveur au client, ce qui est particulièrement avantageux pour les utilisateurs disposant de connexions Internet plus lentes. En incluant le modèle HTML directement dans la réponse initiale du serveur en attendant le chargement du JavaScript, Angular 17 garantit que les utilisateurs voient plus rapidement un contenu significatif. Cette approche simplifie le processus de développement et rationalise le rendu, permettant une gestion plus efficace du contenu dynamique. En conséquence, les sites Web deviennent plus interactifs et réactifs dès le chargement initial, augmentant ainsi l’engagement et la satisfaction des utilisateurs.

Vite

L’utilisation de Vite dans Angular CLI (Command Line Interface) se fait actuellement uniquement dans la capacité d’un serveur de développement.

Le processus actuel du serveur de développement utilise le nouveau système de build pour générer une build de développement de l’application en mémoire et transmet les résultats à Vite pour servir l’application.

L’utilisation de Vite, tout comme le serveur de développement basé sur Webpack, est encapsulée dans le générateur de serveur de développement Angular CLI et ne peut actuellement pas être directement configurée.

Signaux

Les signaux dans Angular 17 apportent une amélioration majeure à la façon dont l’état et la réactivité sont gérés. Les développeurs peuvent désormais surveiller et réagir plus précisément aux changements d’état, ce qui rend les mises à jour de l’interface utilisateur (interface utilisateur) plus rapides et plus rationalisées. Les « signaux » exploitent une approche de programmation réactive pour simplifier la structure du code et réduire le code redondant typique dans la gestion d’états complexes. Cette amélioration de l’efficacité signifie que le système n’est mis à jour que lorsque cela est absolument nécessaire, ce qui réduit la complexité et améliore les performances. Par conséquent, « Signals » dans Angular 17 oriente le cadre vers des applications Web plus agiles, puissantes et faciles à entretenir, améliorant ainsi le processus de développement et l’engagement des utilisateurs.

Avec Signals, une personne peut contrôler quand une seule partie d’une application doit être mise à jour, déclenchant non pas des mises à jour sur l’ensemble de l’arborescence des composants, mais sur un seul composant. Cela présente l’avantage de permettre une réactivité basée sur les composants sur n’importe quelle application basée sur Angular.

Il y a des points importants à retenir. La première est que les signaux angulaires peuvent fonctionner avec RXJS, et ils ne doivent pas nécessairement s’exclure, car RXJS offre un environnement riche pour une réactivité avancée. La seconde est que les signaux angulaires ne sont pas encore pris en charge par défaut et qu’une personne doit être assez prudente lors de la mise en œuvre pour vérifier que les ZoneJ angulaires ne sont pas utilisés sans préavis.

Réactivité et sans zone

Dans les processus de détection de changement, Angular a recherché une approche du concept de réactivité à grain fin qui permet d’obtenir qu’à chaque fois, les performances de ce processus diminuent avec le temps.

Zoneless est une fonctionnalité des versions précédentes d’Angular 17 qui appliquait le processus de détection en considérant l’ensemble de l’arborescence des composants, mais même les versions les plus récentes ont utilisé la méthode On Push qui essaie de garder à l’esprit uniquement les composants qui changent pour les entrées et les sorties. .

Désormais, avec l’utilisation de signaux dans Angular 17, il cherche à réduire beaucoup plus le processus de détection de changement se rapprochant d’une expression plus minimale au sein des composants et correspondant uniquement au changement du signal.

Conclusion

Avec les nouvelles fonctionnalités d’Angular 17, il offre les capacités nécessaires pour suivre le rythme d’autres frameworks de développement front-end tels que Vue ou React, car il a réussi à réduire les coûts de performances et la complexité du développement.