20 Oct 2015

Angular 2 @ Chti JUG

Le 29 septembre 2015 s’est tenue la session Angular 2 du Chti JUG présentée par Emmanuel Demey. L’objectif de ce talk était de présenter les principales nouveautés de la version 2 du fameux framework de développement d’applications web de Google.

Le talk était composé des deux parties :

  • un tour d’horizon des douleurs d’AngularJS (V<2),
  • les réponses apportées par Angular 2 à ces douleurs.

Vous trouverez les slides de cette présentation ici.

 

AngularJS, des fois, ça pique aux yeux

Bien qu’AngularJS ait révolutionné la manière de concevoir et réaliser les applications web en apportant moultes innovations (data-binding bi-directionnel, promesses, injection des dépendances, …); il n’en reste pas moins que certaines fonctionnalités peuvent être difficile à appréhender :

  • syntaxe de création de directives :

Screen Shot 2015-10-12 at 10.46.36

  • syntaxe du data-binding :
  • Screen Shot 2015-10-12 at 10.48.03mais aussi :
    • pas de server-side rendering,
    • pas de gestion des évènements,
    • pas de gestion des attributs HTML.

 

Angular 2 à la rescousse

 

Disclaimer :

Angular 2, c’est pas sec…

Angular 2 est pour le moment en version alpha, donc :

  • il y a peu ou pas de docs,
  • des éléments du framework évoluent et peuvent encore changer avant sa release.

 

… mais c’est prometteur

  • Architecture orientée composants réutilisables,
  • Implémentation du standard Web Component,
  • Un nouveau mécanisme d’injection de dépendances (DI) et de pipes (ex-filtres),
  • Prise en charge des évolutions de l’écosystème Javascript avec la prise en charge de
    • ES6/ES2015 : classes, modules,
    • TypeScript : Type annotation, Meta annotation,
  • Développé en TypeScript (surcouche open source à ES6/ES2015 développée par Microsoft apportant notamment le typage).

 

Le data-binding

Il existe en Angular 2 deux types de data-binding applicables sur toutes les propriétés HTML ou sur des propriétés custom :

  • le data-binding de [propriétés] : d’un composant parent vers un composant enfant,
  • le data-binding d’ (évènements) : d’un composant enfant vers un composant parent.

 

Les composants Angular 2

C’est la ressource de base en Angular 2 : tout est composant ! Une application Angular 2 est donc un arbre de composants.

Les composants sont configurables par l’utilisation de métadonnées. Ils est possible de les développer en utilisant ES5, ES6/ES2015 ou TypeScript.

 

Dépendances entre composants

Pour utiliser un composant enfant dans un autre composant parent :

  • importer le composant enfant à utiliser dans le composant parent,
  • spécifier les dépendances du composant parent dans la propriété directives de l’object @View.

Une alerte est levée si un composant enfant n’est pas utilisé.

 

Angular 2 & Web components

Les web components sont un ensemble de standards :

  • les customs elements pour étendre le HTML avec ses propres balises,
  • les HTML imports pour inclure et réutiliser des documents HTML dans d’autres document HTML,
  • les templates pour déclarer des sous-arbres de HTML et les manipuler pour instancier des fragments de documents,
  • le shadow DOM pour créer des frontières et isoler les différentes parties de l’arbre du DOM tout en leur permettant d’interagir au sein d’un même document.

Il est possible de définir en Angular 2 comment sont encapsulées le template et le style des vues et ainsi d’utiliser le standard shadow DOM, pour se faire, utiliser ViewEncapsulation.Emulated ou ViewEncapsulation.Native.

 

L’injection de dépendances

La DI était déjà présente en AngularJS et a été revue en Angular 2, elle permet d’injecter des dépendances (principalement des singletons) en s’affranchissant de savoir comment est créée cette dépendance et quelles sont ses propres dépendances.

L’injection de dépendances Angular 2 utilise sur un injecteur principal et un injecteur par composant. Il est possible de définir les dépendances en utilisant des annotations ES6/ES2015 ou des types TypeScript. L’injection se fait via le constructeur du composant.

Il est possible d’injecter :

  • des valeurs,
  • des classes,
  • des factories.

Pour des dépendances volatiles (on veut une nouvelle instance à chaque fois que la propriété est injectée), utiliser :

  • l’injection de factory,
  • les child injectors, fonctionnant sur le model du chainage de prototype, ou un injecteur enfant injectera une dépendance si elle ne l’a pas encore été par son injecteur parent.

Cela simplifie le design de l’application, plus besoin de se triturer les méninges pour savoir d’il faut utiliser un service, une factory.

Les pipes (ceci n’est pas un filter)

Comme les filtres d’AngularJS, les pipes d’Angular 2 permettent de manipuler une donnée pour la transformer.

Quelques pipes disponibles dans le framework :

  • Uppercase / lowercase : pour changer la casse,
  • Async : pour récupérer la dernière valeur d’un Observable ou d’une Promise.
  • Number : pour arrondir,
  • LimitTo : pour limiter le nombre d’éléments affichés,
  • Json : pour manipuler des données au format JSON,
  • Date : pour formatter une date.

 

Migrer vers Angular 2… ou au moins s’y préparer

Comme indiqué en introduction, Angular 2, c’est pas sec, donc c’est pas pour la prod. Cependant, il est possible d’anticiper son arrivée et de se faciliter une éventuelle migration en applicant ces principes :

  • Utiliser le style guide de John Papa,
  • Utiliser une approche Component-First,
  • Ne définir q’un seul composant AngularJS par fichier,
  • Utiliser ES6/ES2015,
  • Utiliser la syntaxe ,
  • Utiliser controllerAs & bindToController pour la définition des directives,
  • Utiliser le nouveau router,
  • Créer les services via la méthode service,
  • Valider son code avec le plugin  eslint-plugin-angular,
  • S’inspirer des conseils de ngUpgrade.

 

Demo

Le speaker, Emmanuel Demey, a ensuite fait une demo en live coding de migration d’une application AngularJS vers Angular 2.

Liens utiles

 

Ressenti

 

La forme

Une introduction sympathique au successeur d’AngularJS par un speaker local. Beaucoup de code, aussi bien sur les slides que lors de la demo (normal pour du live coding me direz-vous).

 

Le fond

On voit clairement que dans cette nouvelle mouture, l’équipe d’Angular a pris en compte :

  • les douleurs rencontrées par les développeurs,
  • les tendances qui ont émergées depuis la sortie d’AngularJS (Web Components, ES6/ES2015, TypeScript, …),

ce qui est une bonne chose.

Cependant, une moins bonne chose est la rupture introduite par cette version Angular 2 qui ressemble plus à un nouveau framework qu’à une évolution d’AngularJS. Cette rupture aura des impacts importants en terme de coûts sur :

  • la formation des développeurs AngularJS à Angular 2,
  • la migration des applications existantes.

 

Share