Peu de nouveautés dans cette nouvelle mouture d'Angular. Le "peu" en question est néanmoins intéressant : dans la v7 d'Angular apparaissent le drag and drop et le virtual scrolling. Mais avant de détailler ces deux fonctionnalités, intéressons-nous aux enrichissements d'Angular CLI.
Angular CLI : de nouvelles options
Désormais, la v7 d'Angular CLI ne se contente plus de générer un projet lorsque vous tapez un bon vieux "ng new", par exemple "ng new my-new-app", mais vous propose des options qui vous permettent :
d'implémenter le routage
de choisir entre CSS, SASS, SCSS, LESS
de customiser la CLI elle-même grâce à un fichier "schematic.json"
Vos applications Angular plus performantes
Le framework lui-même ainsi que les applications que vous créerez continuent leur cure d'amaigrissement. Et ce notamment en excluant le polyfill "reflect-metadata" qui était inclus dans vos builds de production.
Angular.json s'enrichie également d'une section "budget", qui vous permet de définir à partir de quelle taille de build vous recevrez un avertissement (2 Mo) et à partir de quelle taille vous recevrez une erreur (5 Mo). Les valeurs par défaut sont configurables dans angular.json :
"configurations": {
"production": {
// ...
"budgets": [ // ici
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
inscrivez vous à la newsletter de meanjs.fr
Dépendences mises à jour
Angular 7 utilise TypeScript 3.1 et RxJS 6.3.
Pour afficher votre version de TypeScript
npm list | grep typescript
A noter qu'étant sous Windows, j'ai installé via le Store de Window une version de Linux qui me permet de lancer le bash depuis la console de VS Code en tapant
bash
ce qui donne
PS F:\angular7\ng-brainstorm> bash
sam@DESKTOP-DJHMAHP:/mnt/f/angular7/ng-brainstorm$ npm list | grep typescript
│ │ ├── typescript@3.1.3
Drag & drop
J'ai toujours énormement apprécié l'expérience utilisateur que procure le drag and drop. Imaginez une application permettant par exemple de créer deux équipes puis d'affecter un joueur dans l'équipe A ou l'équipe B.
Pareillement, une application permettant d'organiser des tâches en glissant une tâche sur la colonne "à faire aujourd'hui", "en cours" ou "terminé" procure également une expérience utilisateur intuitive.
Avec la v7 D'Angular Material, implémenter le drag and drop devient un jeu d'enfant. Qu'il s'agisse de déplacer un élément dans une même colonne ou de le déplacer dans une autre colonne, les événements exposés permettent de facilement gérer le nouvel ordre ou le déplacement entre différentes parties d'une page.
Brider le déplacement horizontalement ou verticalement ou choisir quelle partie de l'item à déplacer l'utilisateur devra cibler avec sa souris ou son doigt est également facilement configurable. Les animations sont également facilement personnalisables.
Virtual scroll
Devoir faire défiler de longues listes (de titres de musiques, de communes etc ...) de façon fluide est chose courante. Grâce au virtual scroll, vous pourrez facilement loader dynamiquement du contenu. Ainsi, à mesure que les éléments d'une liste doivent être affichés, ils sont virtuellement ajoutés au DOM.
Concrètement, il vous suffira de placer votre longue liste dans un component de type "cdk-virtual-scroll-viewport" pour bénéficier de performances accrues.
Ivy toujours en beta
Le renderer Ivy n'est pas encore de la partie avec cette v7 d'Angular. Le développement d'Ivy est en effet loin d'être achevé.
Ivy ? C'est le nouveau renderer d'Angular qui doit permettre des améliorations de performances, une diminution de la taille de vos applications Angular et une plus grande flexibilité.
Vous pouvez suivre les progrès de l'équipe qui travaille sur Ivy sur https://github.com/angular/angular/issues/21706
Mise à jour d'Angular 6 vers Angular 7
Une ligne de commande suffit
ng update @angular/cli @angular/core
Celle d'Angular Material tout aussi simple
ng update @angular/material
Les autres scénari sont détaillés par le site d'update https://update.angular.io/ en choisissant la version de votre application dans le menu déroulant de gauche. Mais vous recevrez un avertissement qui vous découragera de sauter directement des versions majeures (passer par exemple d'Angular 5 à 7).
Pensez à partager cette news :)
Pour rester informer des dernières actu JavaScript, inscrivez vous à la newsletter.