Angular 2 bien plus qu'un simple framework ?

La release candidate d’Angular 2 a été annoncée début mai à ng-conf par les équipes de Google. Si vous vous intéressez à cette nouvelle mouture du framework, vous pouvez revivre cette conférence en suivant la chaine Youtube dédiée.

Une nouvelle version d’Angular

Angular 1 a été pensé en essayant de proposer un framework qui simplifie la vie des développeurs (injection de dépendances, tests, double data binding, extensibilité….).

Angular 2 voit plus grand et le but est de proposer une véritable plateforme. L’objectif de la réécriture est de reprendre ce qui a marché dans la première version et d’offrir une solution plus simple, plus légère, plus universelle, mais aussi plus rapide aux développeurs. Angular 2 se base sur les dernières nouveautés du Web qui débarquent dans nos navigateurs

• les Web Components et la possibilité de créer des composants réutilisables 
• les Web Workers qui permettent d’exécuter du code Javascript dans un thread séparé 
• les Services Workers plus généralement qui permettent de gérer les problématiques de cache, de perte ou de mauvaise connexions… 
• évolution du langage Javascript et de la VM exécutant ce code 
• … 

L’avenir dira si Google a réussi son pari mais les premiers tests du framework sont prometteurs.

Quoi de neuf docteur ?

L’injection de dépendance reste au coeur du framework. Ce mécanisme permet de découpler les différentes parties de l’application et simplifie grandement la mise en place des tests. Avec Angular 2 cette injection a été revue et il est maintenant possible de faire du Lazy Loading. Un élément ne sera pas forcément chargé au lancement de l’application mais seulement au moment où vous en avez besoin. Si vous créez des applications d’entreprise assez conséquente cette possibilité peut vite devenir pratique.

Un gros effort a été fait également pour essayer de simplifier le code. Vous avez la possibilité d’écrire votre application en Javascript standard, en Dart ou en TypeScript. Ces améliorations sont surtout vraies si vous utilisez le langage TypeScript. TypeScript est un langage créé par Microsoft. Il peut être vu comme une surcouche de Javascript avec des choses qui vont être normalisées et d’autres pas.

Il y a 2 raisons pour vous d’utiliser TypeScript. La première est l’utilisation des types. C’est optionnel, mais les types vous aident à faire moins d’erreur. Les IDE sont ainsi capable d’analyser votre code et de vous remonter les erreurs de type plus facilement. Les types et les interfaces améliorent aussi l’autocomplétion.

Le deuxième intérêt de TypeScript est la mise en place des decorators. Si vous avez fait du Java, nous pouvons les rapprocher des annotations. Les décorateurs permettent de simplifier le code à écrire en permettant de déléguer la génération du code répétitif à un compilateur.

Voici par exemple comment générer un composant Angular 2 de manière déclarative avec les décorateurs.

@Component({
 moduleId: module.id,
 selector: 'hero',
 templateUrl: 'hero.component.html',
 styleUrls: ['hero.component.css']
})
export class HeroComponent {
}

Nous utilisons le décorateur Component et précisons via des propriétés , le template HTML, la feuille de style associée…

Amélioration des performances

D’après les benchmarks Angular 2 est aujourd’hui 5 fois plus rapides que la version 1 grâce à plusieurs améliorations.

La première est liée au compilateur Angular. Il permet de convertir vos scripts et template de page en Javascript optimisé. Comme vous le savez le code Javascript est exécuté sur une VM et cette VM peut apporter certaines améliorations ou optimisations suivant la structuration de votre code.

Ce processus de compilation offline a permis également de réduire la taille de la librairie Angular 2. Aujourd’hui elle pèse 45 Ko alors que Angular 1 fait 56 Ko (avant optimisation la taille était 3 fois plus grosse). D’après la keynote de Dan Green à ng-conf le but est encore d’aller plus loin.

Le lazy loading mis en place au niveau de l’injecteur de dépendance et la totale réécritue du routeur pour prendre en compte ce chargement au besoin ont également permis de gagner en performance.


Dans un navigateur Internet votre code JavaScript n’est exécuté que sur un seul thread. Les web workers permettent de déporter des traitements annexes sur d’autres threads et de réserver le thread principal pour les interactions avec l’utilisateur. Aujourd’hui nous utilisons peu ces webworkers car nous n’avons pas accès au DOM. Angular 2 répond à cette problématique et permet de déporter la plupart de votre code dans un webworker juste en changeant une ligne dans la configuration du bootstrap.

Une autre optimisation a été faite au niveau du databinding et de la détection du dirty checking. Dans Angular 1, le framework déclare un watcher sur chacun des objets ou propriétés liés au modèle. Chaque changement effectué sur votre modèle ou dans le template associé entraîne une inspection de tous les objets observés pour voir s’ils sont impactés. Si un changement est trouvé Angular reparcourt les éléments pour vérifier que ce nouveau changement n’impacte pas autre chose (voir $digest()). 

Angular 2 implémente les web components. Lorsqu’un changement est détecté le framework parcours l’arbre de composants. Il ne fait qu’un seul parcours car les interactions entre noeuds ne se font que dans un sens. Nous n’avons plus de boucle et les performances sont donc bien meilleures.

Une autre nouveauté pour améliorer les performances est liée à Angular Universal. On fait faire de plus en plus de traitements Javascript à nos applications, mais les devices (notamment les mobiles) ne suivent pas toujours au niveau des performances. Pour améliorer les performances (rapidité mais aussi au niveau SEO), vous pouvez avec Angular Universal faire du pre rendering soit à la compilation (via Grunt, Gulp, Webpack….) ou du re-rendering via un serveur pour le moment NodeJs ou ASP.net. Demain vous pourrez aussi développer des application isomorphiques en Java, Php, Python...


Amélioration de la productivité

Angular 2 a été pensé pour être plus simple. Dans la version 1 il existe 43 directives pour gérer le binding et les interactions utilisateurs. Dans la version 2 vous n’en avez que 2. 

Pour aider les développeurs au quotidien un plugin Chrome a été mis à disposition. Il se nomme Augury et il permet d’analyser en temps réel votre application. Vous pouvez consulter et modifier à tout moment l’état de votre application.

Lorsque Angular 1 a été lancé la documentation était vraiment minimale et il a fallu attendre des mois pour qu’elles soient mises en place. Très peu savent qu’il existe un guide des bonnes pratiques construit de manière communautaire et gérer par John Papa.

Pour Angular 2 l’erreur ne sera pas reproduite et dès le lancement vous pourrez accéder à une documentation complète. Vous pouvez déjà consulter le site web, le tutoriel, le guide de bonnes pratiques….

Comme les règles ont été pensées dès le départ Codelyzer permet d’analyser votre code et vous fait des recommandations pour l’améliorer, comme Lint peut le faire pour du code JavaScript. Cet outil sera très certainement intégré dans les IDE.

Si on regarde le cycle de vie d’une application Angular 2 nous avons les étapes suivantes

Vous pouvez toujours utiliser vos scripts Grunt ou Gulp pour gérer votre projet mais Angular s’est inspiré du client utilisé par la communauté Ember.js, pour proposer le projet angular-cli

Pour l'installer lancez la commande suivante  (disponible via npm)

npm install -g angular-cli

Grâce à cet outil vous pouvez générer en 2 lignes un exemple d’application et packager l’application pour la tester dans un nvaigateur

ng new PROJECT_NAME 

cd PROJECT_NAME 

ng serve


Versalité

J’ai repris ce terme de la keynote de Brad Green car je ne le connaissais pas. La versatilité exprime l'affinité d'un terminal, mobile ou fixe, vis-à-vis des différents réseaux auxquels on peut le connecter : filaires, cellulaires et sans-fil. Plus un terminal possède de possibilités de passage d'un réseau à l'autre, plus il sera versatile.

Ces problématiques sont importantes quand vous développez une application pour mobile. La connexion n’est jamais parfaite très longtemps. Les services workers apportent plusieurs solutions pour faciliter la vie des utilisateurs mais ce n’est pas simple de commencer. Pour vous aider, l’équipe Angular a décidé de sortir un mobile ToolKit. Ce dernier fonctionne sur toutes les plateformes mobiles (Android, IOS et Windows)

Dans la même idée vous pouvez aussi utiliser Ionic pour créer des applications hybrides fonctionnant sur tous les navigateurs. Native Script va plus loin et permet de développer en Angular 2 des applications natives pour mobile


Migrer vers Angular 2

En tant qu’utilisateur de Angular 1 (pour mon compte et celui de mes clients) je me suis posé la question : est ce qu’une migration est possible ? La réponse est oui mais elle risque d’être longue et fastidieuse et donc pas forcément opportune pour une société. Elle sera d’autant plus dure si vous utilisez une version ancienne du framework sans appliquer les guides de bonnes pratiques et le découpage de votre code….

Ce n’est pas le but de mon article mais si vous voulez plus d’informations vous pouvez suivre le guide de migration mis à disposition dans la documentation Angular.


En conclusion
Cet article d’introduction est long et il est temps de s’arrêter ici pour le moment. Je crois beaucoup en cette nouvelle mouture du framework car elle me paraît armée pour répondre aux problématiques du web d’aujourd’hui et de demain.

Si vous voulez commencer vous avez différentes ressources pour le faire

• un site web assez complet, celui d’Angular 2 
• la vidéo dans laquelle John Papa déroule le tutoriel à ng-conf 
• le bouquin écrit par Ninja Squad. Je l’ai relu et je dois dire qu’ils ont fait un super boulot