Angular : la version 6.0.0 du framework JavaScript de Google est enfin disponible
Mais sans le nouveau moteur de rendu Ivy
Le 2018-05-09 13:45:31, par Michael Guilloux, Chroniqueur Actualités
Attendue depuis le 4 avril conformément au calendrier annoncé par Google, la version 6.0.0 d'Angular est enfin disponible. Il s'agit d'une version majeure qui se concentre moins sur le framework sous-jacent, et plus sur la chaîne d'outils. L'équipe Angular a également profité pour synchroniser les versions majeures des packages du framework (@angular/core, @angular/common, @angular/compiler, etc.), de la CLI Angular et Angular Material/CDK. Tous ont été publiés sous la version 6.0.0 pour refléter la compatibilité entre ces différents composants de l'écosystème Angular.
Dans cette version, l'interface en ligne de commande Angular CLI va bénéficier d'un certain nombre de fonctionnalités intéressantes. C'est le cas par exemple de ng update et ng add. ng update <package> est une nouvelle commande CLI qui analyse votre package.json et utilise sa connaissance d'Angular pour recommander des mises à jour à votre application. Elle vous aidera à adopter la bonne version des dépendances et à synchroniser vos dépendances. Elle vous permet donc de mettre automatiquement à jour les dépendances de votre projet et corriger automatiquement les versions. L'équipe Angular estime toutefois que ng update ne remplace pas votre gestionnaire de paquets, mais utilise npm ou yarn sous le capot pour gérer les dépendances.
ng add <package> est une autre nouvelle commande CLI qui facilite l'ajout de nouvelles fonctionnalités à votre projet. Elle utilisera aussi votre gestionnaire de paquets pour télécharger de nouvelles dépendances et invoquer un script d'installation qui peut mettre à jour votre projet avec des changements de configuration, ajouter des dépendances supplémentaires (par exemple polyfills) ou un code d'initialisation spécifique au package.
Il est également important de souligner qu'Angular CLI v6 prend désormais en charge les espaces de travail contenant plusieurs projets, tels que plusieurs applications ou bibliothèques. Les projets CLI utiliseront maintenant angular.json au lieu de .angular-cli.json pour la construction et la configuration de projet. Chaque espace de travail CLI a des projets, chaque projet a des cibles et chaque cible peut avoir des configurations:
L'une des fonctionnalités les plus demandées pour la CLI a été le support pour la construction de bibliothèques. Pour répondre au besoin des développeurs, l'équipe Angular a introduit la commande CLI ng generate library <name>. Cette commande crée un projet de bibliothèque dans votre espace de travail CLI et le configure pour le test et la construction de bibliothèques.
En dehors de la CLI, l'une des nouveautés annoncées lors de la sortie de la release candidate d'Angular 6.0.0 est Angular Elements. Il s'agit d'un nouveau module qui devrait permettre de convertir les composants Angular en composants Web pouvant être facilement réutilisés. Comme l'a expliqué Google, Angular Elements cible donc les développeurs qui veulent permettre à d'autres personnes d'intégrer leurs composants Angular, voire des applications complètes, dans d'autres applications. Angular Elements va leur permettre de publier des composants Angular en tant que composants Web pouvant être utilisés n'importe où.
En parlant de composants Angular, notons qu'il y a des nouveautés pour Angular Material et le kit de développement de composants Angular (Component Dev Kit ou CDK). Rappelons que comme Angular Material, le CDK a été livré en version stable dans Angular 5.1. Google offre un ensemble complet de composants accessibles, performants et riches en fonctionnalités dans la bibliothèque Angular Material. Mais pour ceux qui n'utilisent pas Angular Material ou qui veulent une longueur d'avance dans la construction d'autres composants qui ne sont pas offerts dans la bibliothèque, Google offre également le CDK. Le kit de développement de composants fournit les fonctions de base que Google a utilisées pour construire Angular Material, afin de vous permettre de créer maintenant vos propres composants d'interface utilisateur, sans avoir à réinventer la roue.
Dans cette version, le plus grand ajout pour Angular Material et CDK est le nouveau composant d'arborescence pour l'affichage des données hiérarchiques. Mais en plus de cela, on notera, entre autres, un nouveau composant de badge, qui permet d'afficher de petites informations telles que le nombre d'éléments non lus, comme pour les notifications. Ci-dessous un aperçu des badges :
Toujours au niveau d'Angular Material, on peut citer les composants Starter material-nav (section de navigation latérale), material-dashboard (tableau de bord) et material-table (tableau de données). Une fois que vous exécutez ng add @angular/material pour ajouter un composant à une application existante, vous pourrez également générer les nouveaux composants Starter ou de démarrage.
Pour générer un composant comprenant une barre d'outils avec le nom de l'application et une section de navigation latérale, exécutez :
ng generate @angular/material:material-nav --name=my-nav.
Le résultat sera le suivant :
Pour générer un composant de tableau de bord contenant une liste de cartes dynamiques, exécutez :
ng generate @angular/material:material-dashboard --name=my-dashboard.
Le résultat sera le suivant :
En exécutant ng generate @angular/material:material-table --name=my-table, vous pouvez aussi générer un composant de tableau de données qui est préconfiguré avec une source de données. Le résultat sera le suivant :
Entre autres nouveautés dans Angular 6.0.0, on notera le support de la bibliothèque pour RxJS 6. Angular a en effet été mis à jour pour utiliser la version v6 de RxJS. RxJS v6 apporte plusieurs changements majeurs, avec un package de compatibilité descendante rxjs-compat qui permettra à vos applications de continuer de fonctionner.
Il faut en outre préciser que Google a décidé d'étendre son support à long terme à toutes les versions majeures. Le géant de l'Internet avait précédemment annoncé que seules les versions 4 et 6 seraient des versions LTS. Mais afin de faciliter la mise à jour d'une version majeure à une autre et de donner plus de temps aux projets plus importants pour planifier leurs mises à jour, Google a décidé d'appliquer le support à long terme à toutes les versions majeures à partir de la version 4. Chaque version majeure sera prise en charge pendant 18 mois avec environ 6 mois de développement actif suivis de 12 mois de corrections de bogues critiques et de correctifs de sécurité.
Pour ceux qui ont pris connaissance des nouveautés annoncées dans la RC d'Angular 6.0.0 en mars, vous noterez l'absence de nouveau moteur de rendu Ivy, présenté à la ng-conf au mois de février. Ce nouveau moteur de rendu est axé sur l'amélioration de la vitesse et accélère la compilation. Ivy va également réduire la taille du code et permettre une flexibilité accrue. D'après Google, il permettra donc de rendre Angular plus rapide, plus petit et plus facile à utiliser. Si l'on s'attendait à ce qu'il débarque dans cette version, ce ne sera finalement pas le cas. Visiblement, il n'est pas encore prêt à être livré. En février, il était encore en version bêta et Google explique qu'il est actuellement activement en développement. Pour cela, il ne fait pas partie de la version 6.0 d'Angular. Google prévoit toutefois d'annoncer une préversion optionnelle du moteur Ivy dès qu'il sera prêt dans les prochains mois. L'équipe Angular promet en outre que le passage au nouveau moteur de rendu sera fera en douceur.
Source : Blog Angular
Et vous ?
Voir aussi :
Dans cette version, l'interface en ligne de commande Angular CLI va bénéficier d'un certain nombre de fonctionnalités intéressantes. C'est le cas par exemple de ng update et ng add. ng update <package> est une nouvelle commande CLI qui analyse votre package.json et utilise sa connaissance d'Angular pour recommander des mises à jour à votre application. Elle vous aidera à adopter la bonne version des dépendances et à synchroniser vos dépendances. Elle vous permet donc de mettre automatiquement à jour les dépendances de votre projet et corriger automatiquement les versions. L'équipe Angular estime toutefois que ng update ne remplace pas votre gestionnaire de paquets, mais utilise npm ou yarn sous le capot pour gérer les dépendances.
ng add <package> est une autre nouvelle commande CLI qui facilite l'ajout de nouvelles fonctionnalités à votre projet. Elle utilisera aussi votre gestionnaire de paquets pour télécharger de nouvelles dépendances et invoquer un script d'installation qui peut mettre à jour votre projet avec des changements de configuration, ajouter des dépendances supplémentaires (par exemple polyfills) ou un code d'initialisation spécifique au package.
Il est également important de souligner qu'Angular CLI v6 prend désormais en charge les espaces de travail contenant plusieurs projets, tels que plusieurs applications ou bibliothèques. Les projets CLI utiliseront maintenant angular.json au lieu de .angular-cli.json pour la construction et la configuration de projet. Chaque espace de travail CLI a des projets, chaque projet a des cibles et chaque cible peut avoir des configurations:
| Code HTML : |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
} |
L'une des fonctionnalités les plus demandées pour la CLI a été le support pour la construction de bibliothèques. Pour répondre au besoin des développeurs, l'équipe Angular a introduit la commande CLI ng generate library <name>. Cette commande crée un projet de bibliothèque dans votre espace de travail CLI et le configure pour le test et la construction de bibliothèques.
En dehors de la CLI, l'une des nouveautés annoncées lors de la sortie de la release candidate d'Angular 6.0.0 est Angular Elements. Il s'agit d'un nouveau module qui devrait permettre de convertir les composants Angular en composants Web pouvant être facilement réutilisés. Comme l'a expliqué Google, Angular Elements cible donc les développeurs qui veulent permettre à d'autres personnes d'intégrer leurs composants Angular, voire des applications complètes, dans d'autres applications. Angular Elements va leur permettre de publier des composants Angular en tant que composants Web pouvant être utilisés n'importe où.
En parlant de composants Angular, notons qu'il y a des nouveautés pour Angular Material et le kit de développement de composants Angular (Component Dev Kit ou CDK). Rappelons que comme Angular Material, le CDK a été livré en version stable dans Angular 5.1. Google offre un ensemble complet de composants accessibles, performants et riches en fonctionnalités dans la bibliothèque Angular Material. Mais pour ceux qui n'utilisent pas Angular Material ou qui veulent une longueur d'avance dans la construction d'autres composants qui ne sont pas offerts dans la bibliothèque, Google offre également le CDK. Le kit de développement de composants fournit les fonctions de base que Google a utilisées pour construire Angular Material, afin de vous permettre de créer maintenant vos propres composants d'interface utilisateur, sans avoir à réinventer la roue.
Dans cette version, le plus grand ajout pour Angular Material et CDK est le nouveau composant d'arborescence pour l'affichage des données hiérarchiques. Mais en plus de cela, on notera, entre autres, un nouveau composant de badge, qui permet d'afficher de petites informations telles que le nombre d'éléments non lus, comme pour les notifications. Ci-dessous un aperçu des badges :
Toujours au niveau d'Angular Material, on peut citer les composants Starter material-nav (section de navigation latérale), material-dashboard (tableau de bord) et material-table (tableau de données). Une fois que vous exécutez ng add @angular/material pour ajouter un composant à une application existante, vous pourrez également générer les nouveaux composants Starter ou de démarrage.
Pour générer un composant comprenant une barre d'outils avec le nom de l'application et une section de navigation latérale, exécutez :
ng generate @angular/material:material-nav --name=my-nav.
Le résultat sera le suivant :
Pour générer un composant de tableau de bord contenant une liste de cartes dynamiques, exécutez :
ng generate @angular/material:material-dashboard --name=my-dashboard.
Le résultat sera le suivant :
En exécutant ng generate @angular/material:material-table --name=my-table, vous pouvez aussi générer un composant de tableau de données qui est préconfiguré avec une source de données. Le résultat sera le suivant :
Entre autres nouveautés dans Angular 6.0.0, on notera le support de la bibliothèque pour RxJS 6. Angular a en effet été mis à jour pour utiliser la version v6 de RxJS. RxJS v6 apporte plusieurs changements majeurs, avec un package de compatibilité descendante rxjs-compat qui permettra à vos applications de continuer de fonctionner.
Il faut en outre préciser que Google a décidé d'étendre son support à long terme à toutes les versions majeures. Le géant de l'Internet avait précédemment annoncé que seules les versions 4 et 6 seraient des versions LTS. Mais afin de faciliter la mise à jour d'une version majeure à une autre et de donner plus de temps aux projets plus importants pour planifier leurs mises à jour, Google a décidé d'appliquer le support à long terme à toutes les versions majeures à partir de la version 4. Chaque version majeure sera prise en charge pendant 18 mois avec environ 6 mois de développement actif suivis de 12 mois de corrections de bogues critiques et de correctifs de sécurité.
Pour ceux qui ont pris connaissance des nouveautés annoncées dans la RC d'Angular 6.0.0 en mars, vous noterez l'absence de nouveau moteur de rendu Ivy, présenté à la ng-conf au mois de février. Ce nouveau moteur de rendu est axé sur l'amélioration de la vitesse et accélère la compilation. Ivy va également réduire la taille du code et permettre une flexibilité accrue. D'après Google, il permettra donc de rendre Angular plus rapide, plus petit et plus facile à utiliser. Si l'on s'attendait à ce qu'il débarque dans cette version, ce ne sera finalement pas le cas. Visiblement, il n'est pas encore prêt à être livré. En février, il était encore en version bêta et Google explique qu'il est actuellement activement en développement. Pour cela, il ne fait pas partie de la version 6.0 d'Angular. Google prévoit toutefois d'annoncer une préversion optionnelle du moteur Ivy dès qu'il sera prêt dans les prochains mois. L'équipe Angular promet en outre que le passage au nouveau moteur de rendu sera fera en douceur.
Source : Blog Angular
Et vous ?
Voir aussi :
-
grunkModérateurUne fois n'est pas coutume , la procédure de mise à jour officielle ne fonctionne pas .
C'est un calvaire à chaque sortie de version majeure ...le 09/05/2018 à 16:27 -
_champy_Membre régulierJ'aime bien Angular mais il faut bien avouer que tu as raison, c'est la lutte pour migrer de version majeur à chaque fois.
Perso je n'ai plus de paquet npm global, trop galère pour gérer des applications avec différentes version angular, du coup toutes les dépendances sont dans le projet en devDepedencies et les commande routé dans le package.json.le 09/05/2018 à 19:18 -
ZeflingExpert confirméDe la 4 vers la 5, c'est passé assez facilement sur nos projets. Mais j'ai bien peur que pour cette version ça ne soit pas du tout le cas. Il faudra que je teste ça quand j'aurais le temps.le 10/05/2018 à 14:15
-
pterratMembre habituéJe confirme que ça va être très compliqué!
Il y a qu'à voir comment les projets majeurs galère à passer à la version 6.le 10/05/2018 à 20:39 -
VinsouilleNouveau Candidat au ClubPourquoi avoir réécrit l'angularJS en un deuxième langage (à savoir, l'angular) alors qu'ils auraient pu simplement modifié l'angularJS pour ajouté les fonctionnalité souhaité ?le 28/11/2018 à 20:52
-
RPGamerMembre avertiTypeScript offre beaucoup plus, un typage statique, un bon support dans les IDE (gain de productivité), des interfaces/classes dignent de ce nom, des décorateurs, etc.le 30/12/2019 à 22:12