AngularJS : le framework JavaScript de Google au crible

AngularJS : le framework JavaScript de Google au crible


 Télécharger AngularJS (site du projet)


1- AngularJS est devenu la référence des infrastructures JavaScript côté client
 
Sur le terrain des infrastructures JavaScript, historiquement très nombreuses, plusieurs solutions commencent à s'imposer. Sur la partie serveur, Node.js a de plus en plus clairement remporté la bataille. Dernière preuve de cet engouement : Groupon et LinkedIn ont récemment annoncé la migration d'une partie de leur couche applicative serveur, initialement sous Ruby on Rail, vers Node.js. 


angularjs
Site du projet AngularJS de Google © Capture JDN

Mais qu'en est-il des infrastructures JavaScript côté client ? Sur ce terrain, quatre solutions s'affrontent : AngularJS, Knockout.js, Ember.js, ainsi que BackBone. Sachant que ce dernier affiche une position à part, puisqu'il est conçu pour fournir une ossature objets à un code. Il peut donc être utilisé avec les trois autres. Alors qu'AngularJS est porté par Google, Knockout.js et Ember.js (de son côté basé sur un assemblage d'autres projets) sont tous deux issus d'initiatives open source plus communautaires.
D'après les premiers indicateurs dont nous disposons autour de la valorisation de l'expertise Angular en termes de salaire, il semble qu'elle commence à être assez élevée en France. Selon une étude d'Urban Linker parue en 2014, les profils de développeur affichant une expérience Angular font partie de ceux qui peuvent prétendre aux niveaux de salaire les plus élevés sur le terrain du développement Web.

2- Une infrastructure Modèle-Vue-VueModèle pour gagner en productivité
Depuis environ deux ans, AngularJS ne cesse de monter en popularité (cf. le graphique Google Trend ci-dessous). Mais qu'apporte AngularJS ? "C'est une infrastructure MVVM ou Modèle-Vue-VueModèle conçue pour construire des Web Apps, et moins des sites web", explique Damien Benoit, lead développeur chez CCM Benchmark (éditeur du JDN). Google parle même d'infrastructure MVW (pour Model-View-Whatever). 
AngularJS pose des problèmes pour le référencement Google
Le principe du MVVM est simple : les données que le client saisies engendrent une mise à jour du contrôleur qui met à jour par ricochet la vue. Et pas besoin de template temporaire de pré génération. AngularJS utilise directement la vue HTML d'origine pour répercuter ces mises à jour. Avec ce dispositif, "l'objectif est d'offrir une solution pour développer plus vite", résume Damien Benoit. 


frameworkjs client
Courbe d'AngularJS dans Google Tendance. A noter : le frémissement d'une tendance en faveur de React JS, l'infrastructure JavaScript orientée interface utilisateur de Facebook. © Capture

3- Ce qui fait sa force : un projet porté par Google
Reste que Knockout.js et Ember.js reposent sur le même principe qu'AngularJS. Alors qu'est-ce qui fait qu'Angular recueille autant d'engouement ? "Le fait que Google porte ce projet explique cette popularité. De fait, AngularJS bénéficie de la force marketing de Google, et de ses compétences", analyse Damien Benoit. Un investissement qui permettrait au framework JavaScript de faire la différence sur plusieurs points. 
Un data-binding bidirectionnel mieux optimisé
D'abord, selon Jean Guillaume Dujardin et Pierre Vaidie de The Coding Machine, AngularJS offrirait un approche MVVM mieux optimisée. "Ce dispositif de data-binding bidirectionnel permet à un input de la page de s'afficher dans un autre endroit de la page, et donc facilite la vie des développeurs. En simplifiant le codage, il réduit aussi le risque de bugs", rappellent les deux experts (lire leur document de synthèse sur le sujet). "Mais cette manipulation du DOM est aussi proposée par les autres frameworks JavaScript", pondère Damien Benoit.

4- Autre point fort : les directives
Autre point fort, souvent évoqué, et rappelé par Jean Guillaume Dujardin et Pierre Vaidie : le Declarative binding. "Les directives permettent de développer des attributs et des éléments HTML spécifiques de manière à manipuler proprement le DOM", constate-t-on chez The Coding Machine. Facilitant l'ajout ou la modification de composants, ces directives permettent de définir des attributs, une liste particulière avec une image par exemple, ou de piloter des comportements, un événement par exemple. A la différence de l'approche composant d'Angular, "d'autres frameworks, comme Knockout.js, passent par un attribut de node, ce qui peut être un peu plus verbeux. Quant à Ember.js, il est orienté templating, ce qui peut être encore un peu plus complexe", reconnait Damien Benoit.
"Ce qui nous permet de dire qu'Angular va exploser : les directives peuvent se partager", résume-t-on chez The Coding Machine. Et Damien Benoit d'ajouter : "AngularJS s'intègre aussi mieux avec Polymer, en reprenant son approche orientée composants."

5- Une feuille de route riche, avec la contribution de Microsoft
Une collaboration étroite avec Microsoft pour intégrer TypeScript
En attendant, Google déroule sa feuille de route. En mai 2015, le groupe dévoilait AngularJS 1.4 - qui introduit notamment un refactoring complet de la couche d'animation (voir le blog du projet). Désormais, AngularJS 2.0 est en ligne de mire, et devrait même sortir sous peu. La nouvelle version a pour but d'améliorer les performances du framework, simplifier les API et le test, et proposer une gestion du templating plus robuste (lire le post officiel). Avec elle, AngularJS s'adosse désormais à polyfill (la couche d'abstraction du navigateur de Polymer), et devient ainsi compatible avec les Web Components. Il prend aussi en charge ECMAScript 6 (EC6). 
En mars 2015, l'équipe du projet a aussi annoncé travailler en collaboration étroite avec Microsoft. En ligne de mire : aboutir à une convergence d'AtScript, le sur-ensemble de JavaScript implémenté dans AngularJS, avec le langage TypeScript de Microsoft. TypeScript est lui aussi un sur-ensemble de JavaScript. Il ajoute un typage riche et un modèle de classe orienté objets au code dans l'optique de faciliter les développements. Quant à AtScript, il apporte à TypeScript des capacités d'introspection ainsi que les annotations - qui permettent d'ajouter des métadonnées aux déclarations de classe, utiles notamment pour les injections de dépendance ou les directives de compilation. Lancée dans la foulée de cette annonce, TypeScript 1.5 intègre d'ailleurs ces éléments.


Alors que la compatibilité d'AngularJS 2 avec les versions précédentes du langage n'était déjà plus au programme, le nouveau projet d'intégration de TypeScript devrait rendre la question encore plus épineuse. Les implémentations d'AngularJS en JavaScript pur, ainsi qu'en Dart (le langage de script maison de Google) sont conservées. 


 Télécharger AngularJS (site du projet) 


Powred By DCI Websolutions
Share on Google Plus

About Mbarki Chadi

Chef de projet Web/Cloud SS, Fondateur DCI Websolutions (Agence de développement Web,Applicatif et Mobile).
Sous Traiter vos projets Web | Devenir partenaire DCI et réduisez vos coûts et délais
    Blogger Comment
    Facebook Comment

2 commentaires: