Nous avons choisi AngularJS 2.0 … pour l’instant !

Nous travaillons avec le CMS Drupal depuis longtemps déjà mais certains projets demandent des fonctionnalités plus avancées côté front-end. Nous avions déjà réalisé une comparaison des différents frameworks et librairies JavaScript pour découpler Drupal... Aujourd'hui, le choix est fait. Nous pouvons vous expliquer pourquoi nous avons choisi d’intégrer AngularJS 2.0 dans nos choix techniques. 

Quel framework JavaScript choisir ?

Les frameworks Javascript fournissent des bagages conceptuels conséquents qui permettent de coder plus rapidement et plus efficacement, d’où leur succès grandissant. Comme Drupal est difficilement "customisable" côté front-end, les frameworks Javascript sont devenus des outils efficaces pour accompagner le theming, concevoir des "Single Page Application" rapidement... en bref pour répondre à des besoins front-end plus approfondis. Parmi tous ces frameworks, lequel choisir ? C’est bien une question que tous les développeurs se posent lorsque l’on voit l’immense écosystème Javascript : clairement on ne sait plus où donner de la tête. Que ce soit des frameworks, des librairies ou même des langages de programmation, il y a tellement de nouvelles technologies qu’il est épuisant de trouver la meilleure solution et surtout la plus pratique à mettre en place. Même si Javascript est souvent pointé du doigt pour la complexité de son langage et ses nombreux outils (utiles ou non), trois challengers sortent du lot :

• AngularJS : C’est un framework créé et maintenu par Google. Il est MVC côté client et propose le binding bi-directionnel entre la vue et le modèle, la vue est mise à jour lorsqu’une donnée est modifiée. Il a bien mené la danse au début mais l’arrivée de la librairie ReactJS lui a très vite fait de l’ombre puisqu’elle est orientée composants et facilite grandement le développement. L'évolution AngularJS 2.0 a consisté à rectifier le tir en proposant à son tour les composants. 
• ReactJS : C’est une librairie utilisée par Facebook qui propose des composants réutilisables. Il y a aussi React Native, une librairie orientée applications mobiles qui lui confère une polyvalence appréciable. Le problème dans React est qu’elle impose l’utilisation d’un langage spécifique pour la partie HTML même si cela permet d’avoir une performance d’affichage considérable.
• EmberJS : C’est le plus vieux des trois. C’est également un framework MCV côté client, qui a été créé par un des contributeurs majeurs du langage Ruby (Ruby on Rails). Il impose une structure et une manière de procéder avec pour récompense une grande rapidité de prototypage.

Ces outils se valent si on les maîtrise - comme toujours mon capitaine - mais le problème réside dans l’investissement en formation, indispensable à leur diffusion dans une équipe. Certains frameworks étant plus complexes à appréhender,  ils induisent forcément une courbe d’apprentissage plus conséquente. Ainsi, pour allier la performance à la simplicité d’usage, notre choix s’est porté sur AngularJS 2.0.

Ce qu’offre AngularJS 2.0

La version 2.0 a reçu des avis très mitigés par les utilisateurs d’AngularJS puisqu’elle propose d’importants changements qui ne plaisent pas à tout le monde. Cet accueil se justifie sur plusieurs points :

• Le refus d’investir encore son temps dans l’apprentissage des concepts de la version 2.0, puisque AngularJS 2.0 propose une refonte complète du framework en supprimant le data-binding bi-directionnel et en intégrant un nouveau langage : le TypeScript ;
• La perte de temps dans la migration d’applications d’AngularJS 1.0 à AngularJS 2.0 ;
• L’incompatibilité de la version 1.0 avec la version 2.0 ;

Le mécontentement compréhensible - qui ne nous concerne pas à notre niveau car nous n’avions pas adopté la version 1.0 - En découvrant AngularJS 2.0, nous nous sommes penchés sur les nouveautés intéressantes du framework :

• L'orientation composants : tout comme ReactJS, AngularJS 2.0 utilise des composants et c’est l’innovation majeure de cette nouvelle version. Un composant est un élément réutilisable d’une application, incluant une classe Javascript qui est le contrôleur et des annotations (sélecteurs, templates et dépendances) permettant de définir sa configuration. Les composants sont très intéressants puisque ce sont des briques réutilisables et facilement testables sur d’autres applications.
• Un nouveau langage : TypeScript, langage de développement basé sur un sur-ensemble Javascript. Il est également composé d’annotations de type, de classes et de modules d’EcmaScript6. L’avantage de ce langage est qu’il permet de faciliter le développement d’applications grâce au typage statique et à la programmation orientée objet. Ce langage n’est pas imposé, il est possible de rester sur du JavaScript simple.
• Un nouveau module pour les formulaires : AngularJS 2.0 intègre le module Forms qui permet de mieux gérer les formulaires.

Nous avons choisi ce framework compte tenu de ses nombreux avantages : il est plus performant que la version antérieure, il est simple d’usage grâce à son interface intuitive, les composants permettent de réutiliser le code facilement et le langage TypeScript est une alternative intéressante pour coder proprement et « balayer » la complexité de JavaScript.