Discussion :

[Michael Guilloux]

La sortie d’Angular 6.0 est prévue pour le 4 avril prochain
quelles sont les nouveautés attendues pour le framework JavaScript de Google

Conformément au calendrier défini par l’équipe Angular, la version 6.0 du framework JavaScript de Google devrait être disponible le 4 avril prochain, soit dans deux semaines. Déjà sept bêtas ont été publiées et la première release candidate d’Angular 6.0 est prévue normalement pour le 21 mars.

Comme pour les versions 4 et 5, les développeurs de Google travaillent pour rendre Angular plus rapide, plus petit et plus facile à utiliser. Pour atteindre ces objectifs, Angular 6 devrait être livré avec un nouveau moteur de rendu appelé Ivy. « Vous aimez Angular, mais vous souhaitez juste qu'il soit plus petit, plus facile à déboguer, et compilé plus rapidement ? Ce sont nos objectifs avec le nouveau moteur de rendu d'Angular nommé Ivy », expliquait Google le mois dernier. Ce nouveau moteur de rendu, actuellement en version bêta, 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. L'équipe Angular promet en outre que le passage au nouveau moteur de rendu sera fera en douceur.

Dans Angular 6, il faut également noter que l'outil de build Bazel sera proposé comme option aux développeurs. Rappelons que Bazel est un outil open source utilisé par Google en interne pour compiler et générer la plupart de ses applications. L'intérêt de cet outil de build, d'après Google, est qu'il évite de régénérer toute une application pour chaque petite modification de code source. Seuls le bout de code qui a été modifié et le code qui dépend de ce changement sont régénérés par Bazel. Google dit avoir travaillé avec l'équipe Bazel pour en faire une option pour les développeurs Angular afin d'obtenir les mêmes avantages. L'entreprise construit maintenant Angular en utilisant Bazel et d'après Google, il y a des adopteurs précoces qui commencent à utiliser Bazel avec leurs applications Angular.

Dans la prochaine version du framework JavaScript, Angular CLI va apporter de nouvelles fonctionnalités telles que ng update qui permet de mettre automatiquement à jour les dépendances de votre projet et corriger automatiquement les versions. Cette nouvelle fonctionnalité, dans l’interface de ligne de commande Angular, est basée sur Schematics, une technologie sur laquelle est construite Angular CLI. D’après Google, Schematics vous permet de définir des modèles personnalisés et des transformations de code pour une utilisation avec la CLI. Avec Schematics, vous n'avez donc pas à attendre que l'équipe CLI propose des fonctionnalités et vous pouvez créer vos propres transformations de code comme ng update.

Par rapport à la version 5.0 d'Angular, on notera comme nouveauté le Component Dev Kit (CDK) ou kit de développement de composants. 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.

Rappelons qu'Angular 5.0 voulait également faciliter la création d'applications Web progressives, et pour cela a été livré avec une nouvelle implémentation Service Worker personnalisée. Dans Angular 6, l'implémentation Service Worker va bénéficier de plusieurs corrections de bogues et de fonctionnalités additionnelles.

La prochaine version majeure du framework JavaScript de Google va embarquer un nouveau module, Angular Elements, qui devrait permettre de convertir les composants Angular en composants Web pouvant être facilement réutilisés. Comme l'explique Google, ce projet 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ù.

Entre autres nouveautés importantes, on peut encore citer le support de Typescript 2.7 et le support de la bibliothèque pour JavaScript RxJS 6. L'équipe Angular fournira plus de détails sur les nouveautés lors de la sortie officielle de la version 6.0.

Sources : GitHub, Brad Green (de l’équipe Angular), Feuille de route Angular

Et vous ?

Utilisez-vous Angular ? Si oui, quelles versions ?
Que pensez-vous des nouveautés d'Angular 6.0 annoncées ici ?
Quelles autres nouveautés intéressantes avez-vous repérées en dehors de celles répertoriées ici ?

[Michael Guilloux]

Angular : la version 6 du framework JavaScript de Google est enfin disponible
mais sans le nouveau moteur de rendu Ivy

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:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Utilisez-vous Angular ? Si oui, quelles versions ?
Que pensez-vous des nouveautés d'Angular 6.0 annoncées ici ?
Quelles autres nouveautés intéressantes avez-vous repérées en dehors de celles répertoriées ici ?

Voir aussi :

La sortie d'Angular 6.0 est prévue pour le 4 avril prochain, quelles sont les nouveautés attendues pour le framework JavaScript de Google
La version 5.1 du framework JavaScript Angular est disponible, en même temps qu'Angular CLI 1.6 et la première version stable d'Angular Material
AngularJS 1.7 annoncé avec la mise en LTS du framework, période qui va s'achever dans 3 ans et demi !
Angular 5.0 est disponible, la nouvelle version du framework JavaScript de Google veut faciliter la création d'applications Web progressives

[grunk]

Une fois n'est pas coutume , la procédure de mise à jour officielle ne fonctionne pas .

C'est un calvaire à chaque sortie de version majeure ...

[_champy_]

J'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.

[Zefling]

Une fois n'est pas coutume , la procédure de mise à jour officielle ne fonctionne pas .

C'est un calvaire à chaque sortie de version majeure ...

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.

[pterrat]

Je confirme que ça va être très compliqué!

Il y a qu'à voir comment les projets majeurs galère à passer à la version 6.

[Vinsouille]

Pourquoi 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é ?

[RPGamer]

Pourquoi 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é ?

TypeScript 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.