Comment aborder AngularJS ?

Si vous avez lu les articles publiés sur FrAngular qui détaillent des aspects techniques du framework, c'est que vous avez peut-être déjà dépassé le stade de l’initiation. Néanmoins, pour ceux qui découvrent AngularJS, je vais expliquer comment on peut aborder ce framework dont l’apprentissage risque de s’avérer quelque peu déroutant.

Commencez par JavaScript

JavaScript est certainement le langage le plus mal connu de ses utilisateurs de toute l’histoire de l’informatique. Combien de développeurs qui font du JavaScript ont vraiment pris le temps de l’apprendre ? On y reconnaît une syntaxe familière parce qu’on a déjà fait du Java, du C++, du PHP, enfin quelque chose qui y ressemble de très loin, et du coup en tâtonnant on arrive à écrire du code JavaScript qui fonctionne à peu près. Mais du très mauvais code JavaScript. Je suis passé par là, comme presque tout le monde.

Les concepts de JavaScript - un langage objet sans classes et avec un forte composante fonctionnelle - sont complètement différents des autres langages objets les plus répandus. Il y a plus de ressemblance entre Java, C#, Python, Ruby, et même PHP en version objet, qu’entre n’importe lequel de ces langages et JavaScript.


AngularJS ne requiert pas une très grande expérience de JavaScript, mais pour être à l’aise sur les exemples et le développement d’applications, il faut avoir compris les principaux concepts du langage : les fonctions et le fait qu’elles sont de vrais objets, leur utilisation comme constructeur, le mécanisme de closure, les différentes façons de créer des objets, etc.

On m’a dit au Marseille JUG qu’AngularJS c’est du JavaScript décomplexé. J’ai bien aimé l’expression, car en effet c’est juste du JavaScript, mais du vrai JavaScript qui n’essaie pas de ressembler à un langage objet basé sur des classes. Donc si on aborde le code des applications AngularJS en ayant en tête le paradigme objet de Java, C# ou autre, il y a de quoi être perplexe.

Mieux vaut commencer par un peu de lecture sur JavaScript, dans un bouquin ou avec un tutoriel en ligne. AngularJS est un framework qui bouscule nos habitudes, et s’il faut en même temps comprendre JavaScript, la première marche de l’apprentissage peut être trop haute et rebuter même les plus courageux.

Le passage obligé du tutoriel officiel

Le tutoriel du site officiel est particulièrement bien fait, et il ne faut surtout pas passer à côté. Il permet, en étant guidé pas à pas, de découvrir l’essentiel des fonctionnalités et la façon de développer une application avec AngularJS. Seule la création de ses propres directives (les composants d’AngularJS) n’est pas abordée, à raison car c’est une partie qui demande déjà une certaine compréhension du framework. Commencez par utiliser celles qui existent, avant de vouloir écrire les votres.

En suivant toutes les étapes du tutoriel, grâce à l’utilisation judicieuse de branches Git, on découvre les différents aspects de la création d’une application mono-page, qui incluent les tests unitaires et les scénarios de tests fonctionnels.

Donc commencez l’apprentissage directement par le tutoriel de bout en bout, plutôt que par la documentation. N’essayez pas de lire la doc avant d’avoir fait le tutoriel, beaucoup de notions qui pourraient paraître hermétiques à la lecture seront bien plus compréhensibles si vous les avez déjà rencontrées de façon concrète au travers du tutoriel.

Le guide du développeur, et autres ressources

Les articles du guide du développeur, sur le site officiel, expliquent les différents aspects du framework : les contrôleurs, modules, services, l’injection de dépendances, les directives, etc. Le premier à lire est celui intitulé “Conceptual Overview” qui décrit en détails le fonctionnement d’AngularJS, il peut même être lu avant d’aborder le tutoriel.

Toute la documentation “API Reference” est comme son nom l’indique une doc de référence dans laquelle piocher pour connaître le détail de l’utilisation et du fonctionnement de chaque directive ou service fourni avec le framework. Elle contient de nombreux exemples d’utilisation. Bien sûr, même si elle est déjà volumineuse et très utile, elle reste perfectible, et toutes les questions n’y trouveront pas forcément une réponse. Il y a de nombreux échanges sur des questions techniques dans la mailing list ou sur Stack Overflow. Malgré tout, même s’il ne s’agit pas de la documentation idéale dont rêve tout développeur, peu de frameworks en ont une aussi complète.

En dehors du site officiel, il faut évidemment citer les vidéos de John Lindquist, de courtes séquences où il présente et explique la plupart des aspects du framework.

Oubliez jQuery

Il vaut mieux apprendre AngularJS sans que jQuery soit chargé. AngularJS utilise jQuery s’il est présent, mais il contient en interne une implémentation “jQuery lite” contenant tout ce dont il a besoin, ce qui le rend parfaitement autonome.

Le danger, si jQuery est présent, c’est de prendre les choses à l’envers. On ne peut pas ajouter de l’AngularJS à une application jQuery. C’est un framework très structurant, qui impose sa façon de développer une application web. Pour un développeur habitué à jQuery, ou à d’autres outils de ce type, le plus dur c’est sans doute d’oublier ce qu’il connaît, et de ne pas se raccrocher à ses habitudes.

Le fonctionnement des vues dynamiques d’AngularJS n’a rien à voir avec les manipulations de DOM que beaucoup de développeurs web ont intégré comme un mal nécessaire, au point de finir par trouver naturel de développer ainsi une application. Toutes ces manipulations techniques qui constituent souvent la plus grande partie du code n’ont aucune raison d’être avec AngularJS. Dans une application AngularJS, on ne touche jamais au DOM. On utilise des directives, dont certaines peuvent modifier le DOM de la page web, mais la création de tels composants est la seule exception à la règle. Les contrôleurs et services ne travaillent que sur le modèle de données, ils n’ont même pas accès à la vue. Mélanger du code JavaScript ou jQuery manipulant le DOM dans les templates d’une application AngularJS, c’est une erreur qui est fréquente chez les débutants.

Bien sûr on peut encapsuler un composant jQuery UI dans une directive AngularJS, et dans ce cas il faudra que jQuery soit chargé. Mais si on n’utilise aucune directive de ce genre, alors autant ne pas charger jQuery. L’implémentation interne à AngularJS est suffisante pour écrire ses propres directives, et ça évitera le mauvais réflexe d’utiliser jQuery ailleurs que dans une directive.

Il y a une discussion sur Stack Overflow, intitulée “How do I ‘think in AngularJS’ if I have a jQuery background?”, qui est intéressante à lire sur le sujet. Mais je ne suis pas vraiment d’accord avec le point n°1 de la réponse, on peut très bien faire d’abord le design HTML d'une page web, pour y ajouter ensuite les directives AngularJS.

Persévérez !

Voilà pour ces quelques conseils sur la façon d’aborder AngularJS. C’est un framework qui apporte toute l’architecture nécessaire pour développer la partie cliente d’une application web de façon très efficace. Mais de part son ampleur, il nécessite un réel apprentissage pour dépasser le stade des exemples simples.

On peut rapidement commencer à écrire quelques lignes de jQuery, ou même faire le tour d’un framework minimal comme Backbone.js. Faire le tour d’AngularJS, c’est beaucoup plus long. Après des mois à l’utiliser, vous découvrirez encore de nouvelles possibilités. Ne soyez pas dissuadés par cet apprentissage, le gain de productivité qu’il apporte est tellement énorme que ça vaut vraiment le coup de s’y investir.