Expérience de développement Angular 17 : un guide pratique

La version 17 a beaucoup changé pour Angular. Voici ce que vous devez savoir sur ce que ses améliorations signifient pour les développeurs.

Angular 17 a été incroyable pour de nombreuses raisons. Après des années sans réels changements modernes, les dernières versions semblent continuer à surpasser les précédentes. Angular 17 n’est bien sûr pas différent, et il ne s’agit pas seulement d’un ensemble de fonctionnalités. Le code est plus rapide, la doc est meilleure et on se rapproche de plus en plus de Zoneless Angular. 🤞

Syntaxe du flux de contrôle

Jusqu’à présent, la syntaxe des modèles était une simple syntaxe de type JavaScript.

Conditions

Je ne sais pas pour vous, mais je ne peux toujours pas vous dire comment l’utiliser correctement *ngIf et *ngFor sans les rechercher ni utiliser la complétion de code dans VS Code. Connaissez-vous la bonne façon de faire un if-else ?

<div *ngIf="isTrue; else DoThis">
  <p>Why did I have to create an extra div?</p>
</div>
 
<ng-template #DoThis>
  <p>BTW, you must use ng-template, didn't you know!?</p>
</ng-template>

Ceci n’est qu’une version simple, cela devient vraiment déroutant lorsque vous devez suivre quelque chose. Je déteste devoir créer un div supplémentaire, même si ng-container était un usage secret.

Mais maintenant vous pouvez faire ce qui est parfaitement logique pour n’importe quel programmeur, juste un simple if et else déclaration.

@if (isTrue) {
  <p>Much better! You can do a @Switch as well!</p>
}
@else if (somethingElse) {
  <p>Before you had to nest the ifs! Yuck!</p>
}
@else {
  <p>Obviously inspired by Svelte!</p>
}

Vous pouvez utiliser @switch si vous devez vérifier la même variable pour différentes options.

@switch (rating) {
  @case ('five') {
    <the-best-template />
  }
  @case ('one') {
    <you-did-terrible />
  }
  @default {
    <you-did-just-okay />
  }
}  

Les commutateurs sont utiles dans de nombreux langages de programmation. Cela n’a-t-il pas l’air propre et convivial ?

Boucles

On dirait que nous avons besoin d’un autre div supplémentaire !

<div *ngFor="let item of items; let i = index">
  <p>{{ item }} - {{ i }}</p>
</div>

Ou nous pouvons simplement utiliser ce qui nous semble naturel !

@for (item of items; track $index; let i = $index) {
  <p>{{ item }} - {{ i }}</p>
}
@empty {
  <p>The length of the array is zero, so show this</p>
}

Je suis vraiment excité à l’idée d’utiliser le @empty partie. Il indique à Angular ce qu’il doit afficher lorsque le tableau est vide. Svelte n’a même pas ça. Cela simplifie simplement les choses.

Il s’avère également que l’utilisation de mécanismes de boucle (qui sont plus proches du JavaScript pur) est plus rapide, apparemment jusqu’à 30 Ko de moins. Compte tenu de toutes ces similitudes purement JavaScript, nous obtenons des temps d’exécution près de 90 % plus rapides. Ces changements et boucles de flux de contrôle sont un grand changement bienvenu !

Vues différées

L’un des plus gros problèmes d’Angular est la grande taille d’une application. Vous pouvez charger des routes paresseusement, mais le chargement paresseux d’un composant enfant a été beaucoup plus difficile. Avant, il fallait utiliser un ComponentFactoryResolver ou un ViewContainerRef pour créer un conteneur sur place. Angular continue de simplifier ces processus. Désormais, vous n’avez plus à vous soucier d’aucun de ces modèles compliqués.

@reporter

Correspondant au @if et @for nouvelle syntaxe, Angular a décidé d’utiliser @defer pour les enfants qui chargent paresseux. Il gère tous les états possibles du processus de chargement.

@defer (when BooleanCondition) {
  <app-component-to-load />
}
@loading {
  <p>Loading Component...</p>
}
@placeholder {
  <p>What is displayed before loading begins...</p>
}
@error {
  <p>Whoops!</p>
}

Comme vous pouvez le constater, le @defer Le composant vous permet de charger automatiquement un composant enfant lorsqu’une condition est vraie, d’afficher une flèche de chargement (si nécessaire), d’afficher un espace réservé avant le rendu de l’application et d’afficher une erreur lorsqu’il y en a une.

Non seulement c’est simple, mais le code divisera automatiquement le composant (autonome par défaut), afin que votre JavaScript se charge plus rapidement. C’est tellement plus simple que d’écrire manuellement le code pour faire tout cela, et cela incitera les développeurs Angular à écrire automatiquement un meilleur code. Il existe également des options plus compliquées pour la prélecture ou l’utilisation de on événements au lieu d’un booléen.

Hydratation et améliorations du serveur

Angular 16 a eu des améliorations dans le département d’hydratation, il n’y a donc pas vaciller. Vous deviez également copier manuellement tous les éléments du serveur avec transferState au navigateur. Maintenant, avec le provideClientHydration() et provideServerRendering() fournisseurs, cela se fait automatiquement.

RSS angulaire

Le rendu côté serveur a d’abord été disponible pour Angular via des contributeurs tiers, et bientôt Angular a adopté Angular Universal comme bibliothèque SSR officielle. Alors qu’Angular se concentrait davantage sur l’amélioration du SSR, l’équipe a intégré Angular SSR dans le framework et il est disponible dans le cadre de la CLI avec ng new.

Optimisation moderne

N’oubliez pas qu’Angular a en fait de nouveaux optimisation des images. En restant dans le thème des choses, vous pouvez désormais également utiliser une récupération native en fournissant provideHttpClient(withFetch()). Ces petites améliorations l’aident à effectuer des tâches modernes.

Avenir

Angular semble avoir du pain sur la planche en supprimant ZoneJS dans les prochaines versions, mais Angular propose lentement des options pour tout le monde sur toutes sortes de plates-formes. Je ne peux pas imaginer Angular 20 en quelques années seulement.

Constructeur et benchmarks

Pendant des années, Angular a été ridiculisé comme étant le framework le plus lent. Maintenant le dernier repères prouvez qu’Angular peut être aussi rapide que Svelte ou SolidJS.

L’une des principales raisons de cette accélération est qu’Angular dispose d’un nouveau générateur d’applications ainsi que de la possibilité d’être livré avec Vite. Il s’avère en fait que Vite plus ESBuild équivaut à une amélioration de la vitesse de 87 % avec ng serve et ng build. Yay! J’ai personnellement remarqué les changements dans les temps de construction lorsque j’ai déployer.

Nouveau site et journal

Eh bien, le nouveau logo brille. Mais vous savez ce qui est mieux que le même vieux site de documentation angulaire.io? Le nouveau site de documentation angulaire.dev! Il existe des couleurs modernes, des transitions et une meilleure organisation. Vous pouvez maintenant comprendre ce que vous lisez, avec un but.

Cour de récréation

C’est vrai, Angular a enfin le sien Cour de récréation tout comme les autres frameworks. Et contrairement à Svelte, il utilise TypeScript. 😊

Les documents sont vraiment du beurre sucré, et vous pouvez même apprendre de manière interactive. Tout cela est alimenté par WebContainers. J’aurais aimé que tous les documents Google aient cela. Il y a des transitions sympas et vous aimez vraiment les parcourir. Le terrain de jeu est peut-être le meilleur changement.

Eh bien, et maintenant…

Je suis très enthousiasmé par Angular 18 et je ne peux pas imaginer Angular 19. S’ils continuent à ce rythme et le rendent réellement facile à déployer et à utiliser pour tout le monde, il se peut que cela finisse par être à nouveau le meilleur framework. Voir le feuille de route pour plus.