shop-cart

Vous lisez actuellement: Angular 7 est arrivé, CLI Prompts, Virtual Scroll, Drag and Drop et encore plus

Angular 7 est arrivé, CLI Prompts, Virtual Scroll, Drag and Drop et encore plus

La version 7.0.0 d’Angular est arrivée!

Cette version majeure s’applique à l’ensemble de l’écosystème, y compris au framework principal, à Angular Material, et au CLI avec une synchronisation des versions majeures. Cette version contient de nouvelles fonctionnalités pour notre flux de travail et a permis plusieurs lancements de partenariats majeurs.

Comment mettre à jour en v7

Vous pouvez visiter update.angular.io pour obtenir des informations détaillées et des conseils sur la mise à jour de vos applications.

Toutefois, grâce au travail effectué dans la version 6, la mise à jour vers la version 7 devrait se résumer à une commande unique pour la plupart des développeurs :

ng update @ angular / cli @ angular / core

Les premiers utilisateurs de la version 7 ont signalé que cette mise à jour est plus rapide que jamais et que la mise à jour de nombreuses applications prend moins de 10 minutes.

CLI back again

La CLI permet désormais de poser des questions aux utilisateurs, lors de l’exécution de commandes courantes (telles que ng new ou ng add), pour les aider à découvrir des fonctionnalités intégrées, telles que le routing ou la prise en charge de SCSS.

Une interface de question ont été ajoutées à Schematics. Ainsi, tous les schémas de packages peuvent en tirer parti en ajoutant une clé x-prompte à une collection Schematics.

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Performance de l’application

En continuant de nous concentrer sur la performance, nous avons analysé les erreurs courantes dans l’écosystème. Nous avons découvert que de nombreux développeurs incluaient le polyfill reflect-metadata dans leur génération de production, or celui-ci n’est nécessaire que pendant le développement.

Pour résoudre ce problème, une partie de la mise à jour vers la version 7 supprimera automatiquement les informations inutiles en prod du fichier polyfills.ts, puis l’inclura en tant qu’étape de construction en mode JIT.

Avec la v7, nous utilisons également par défaut pour les nouveaux projets la gestion des budgets. Les nouvelles applications avertiront l’utilisateur si le build dépasse 2 Mo et affichera une erreur à 5 Mo. Ces budgets sont facilement modifiables dans le fichier angular.json.

Les budgets s’alignent sur les règles définies par Google Data Saver.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Material Design et CDK

Material Design a reçu une mise à jour importante en 2018. Les utilisateurs qui mettent à jour Angular en version 7 doivent s’attendre à des différences visuelles mineures.

La mise à jour inclut de petites modifications que les développeurs doivent connaître.

Vous pouvez désormais tirer parti du Virtual Scroll et du Drag and Drop en important le DragDropModule ou le ScrollingModule.

Virtual Scroll

Le défilement virtuel charge et décharge des éléments du DOM, en n’affichant que les parties visibles d’une liste, ce qui permet de créer des expériences utilisateurs fluide même sur de très grandes listes d’item.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Drag and Drop

La prise en charge du glisser-déposer fait maintenant partie du CDK. Elle inclut le rendu automatique lorsque l’utilisateur déplace des éléments, et des méthodes pour réorganiser des listes (moveItemInArray) ou transférer des éléments entre listes (transferArrayItem).

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}

Accessibilité améliorée sur les champs select

Vous pouvez améliorez l’accessibilité de votre application, en utilisant un élément select natif à l’intérieur d’un champ de formulaire. Les select natifs présentent des avantages en termes de performances, d’accessibilité et de convivialité. Cependant, vous pouvez toujours utiliser Mat-select, qui permet un contrôle total de la présentation des options.

Éléments

Angular Elements prend désormais en charge la projection de contenu sous les normes Web pour les éléments personnalisés.

<my-custom-element>This content can be projected!</my-custom-element>

Partenariats

Angular doit son succès à la communauté. Et nous travaillons en partenariat avec plusieurs projets communautaires lancés récemment.

  • StackBlitz 2.0 prend en charge l’édition multi-volets et le service de snippets
  • @angular/fire – AngularFire a migré sur npm et publié sa première version stable pour Angular
  • NativeScript – Il est maintenant possible d’avoir un projet créé à la fois pour le Web et le mobile utilisant NativeScript
  • StackBlitz – StackBlitz 2.0 a été publié et inclut désormais les snippets Angular, ainsi que d’autres fonctionnalités telles que l’édition par onglets.

Mises à jour de la documentation

Nous travaillons toujours dur pour améliorer nos guides et nos documents de référence. La documentation sur angular.io comprend désormais des documents de référence pour le CLI.

Mises à Jour des dépendances

Nous avons mis à jour nos dépendances sur les grands projets tiers.

  • TypeScript 3.1
  • RxJS 6.3
  • Node 10

Et pour Ivy?

Nous poursuivons les travaux sur une nouvelle initiative appelée Ivy – notre pipeline de rendu de nouvelle génération. Ivy est en cours de développement et ne fait pas partie de la version version 7. Nous sommes entrain de valider la compatibilité avec les applications existantes et annoncerons ue version de test d’Ivy dès qu’il sera prêt, certainement dans les mois à venir.

Crédits

Vous pouvez retrouver l’article original sur le blog d’Angular : https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

A story about

, , , ,

,

Avec

204

Vues


Écrit par

Julien Moulin

Julien est le lead-developer / CTO de blueanchor. Développeur fullstack, il évolue d’abord dans le monde Php/Symfony (chez SensioLabs), puis s’oriente vers Javascript pour performer en Angular. Formateur chez Linkedin learning, il met à profit son savoir auprès des utilisateurs de tout bord, en tentant de faire découvrir le monde du web au plus grand nombre.


Afficher la conversation (0)

Recommander cette page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 People Replies to “Angular 7 est arrivé, CLI Prompts, Virtual Scroll, Drag and Drop et encore plus”