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.
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 (lire aussi : Le salaire des développeurs Angular.js en graphiques).
A lire aussi :
2- Une infrastructure Modèle-Vue-VueModèle pour gagner en productivité
En trois ans, la popularité d'AngularJS a explosé (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).
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.
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.
"Avec Angular, 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- Qu'apporte AngularJS 2 ?
Une collaboration étroite avec Microsoft pour intégrer TypeScript
AngularJS 2.0 est désormais disponible. Cette nouvelle version est une réécriture complète de la première mouture du framework. La migration depuis AngularJS 1.x n'est donc pas aisée. Avec pour objectif de faciliter les développements multiplateformes, AngularJS 2.0 a aussi pour but d'améliorer les performances du framework. Dans cette optique, elle introduit la prise en charge d'Angular Universal (qui gère un pré-rendu de l'application côté serveur) et des Web Workers (qui permettent d'exécuter un code en tâche de fonds).
Autre évolution, AngularJS 2.0 est livrée avec une architecture plus modulaire. Mais aussi avec un nouveau langage de développement basé sur JavaScript : TypeScript. Conçu à l'origine par Microsoft, il ajoute un typage statique riche, ainsi qu'un modèle de classe orienté objets au code. Dans ses dernières versions, TypeScript reprend les points forts d'AtScript, le langage historique sur lequel AngularJS était historiquement basé (notamment ses capacités d'introspection, et les annotations).
Télécharger AngularJS (site du projet)
Astuces du JDN sur AngularJS :
Créer une liste stockant les valeurs pour plusieurs cases à cocher avec AngularJS
Comment exécuter une fonction au chargement de la page avec AngularJS ?
$http.post() n'envoie pas les données, comment faire ?
Quelles différences entre les notions de Service, de Provider et de Factory ?
Comment créer une directive créant un champ d'entrée avec le même ng-model ?
Comment gérer l'upload d'un fichier avec AngularJS ?
Comment valider un formulaire via la touche entrée avec AngularJS ?
Quelle est la meilleure manière pour représenter une grille ou un tableau en AngularJS avec Bootstrap ?
Comment éviter l'erreur $injector:modulerr ?