Blog

AngularJS, énième framework JavaScript ou pierre angulaire des applications web ?

Thierry Chatel • 15 mars 2012

Vous n'avez probablement pas entendu parler du framework AngularJS. C'est normal, il est tout récent, la version finale n'est pas encore sortie, et la première release candidate ne date que d'hier. Mais vous allez beaucoup en entendre parler, car c'est le framework qui va changer le monde, la solution à quasiment tous les problèmes, excepté qu'il ne guérit pas le cancer et qu'il ne ramènera pas votre copine qui s'est barrée.

Plus sérieusement, AngularJS c'est un framework qui sert à écrire en JavaScript et HTML la partie cliente d'une application web. Sa particularité, c'est qu'il fait du binding entre la vue, au format HTML, et les données qu'elle est censée afficher. Comme n'importe quel moteur de génération de page web à partir d'un template ? En fait, non. Quand on génère une page web, elle va refléter l'état des données au moment de la génération, mais si on veut que la page affichée évolue en fonction des actions de l'utilisateur, il va falloir gérer des tas d'événements et faire plein de manipulations du DOM. C'est certes plus facile à écrire en jQuery qu'en JavaScript de base, mais ça reste fastidieux.

Mapping bidirectionnel

Avec AngularJS, il n'y a plus ni événements ni manipulations du DOM. Si, c'est possible, parce que le mapping est bidirectionnel. La vue n'est pas générée en fonction des données au moment d'afficher la page web, elle est constamment mise à jour par AngularJS pour refléter en permanence l'état des données. Tout ce que le développeur a à faire, c'est modifier les données, et la vue est automatiquement mise à jour. Non seulement il reste beaucoup moins de code JavaScript, puisque tout ce qui concerne la gestion des événements et les manipulations du DOM a disparu, mais en plus on a une parfaite séparation entre le code JavaScript de la couche de présentation et la vue elle-même.

On a un contrôleur d'un côté, sans aucune référence à la vue. Du coup il devient parfaitement testable unitairement. Avec AngularJS on peut écrire la partie cliente d'une application web en TDD, les tests ne s'arrêtent plus là où commence la présentation. Le framework intègre tout ce qu'il faut pour écrire les tests unitaires des contrôleurs, mais aussi pour réaliser des tests fonctionnels dans le navigateur.

Templates déclaratifs en HTML

Et la vue, c'est un simple fichier HTML qui sert de template déclaratif, dans lequel on ajoute à certains éléments des attributs servant d'indication de binding, pour spécifier qu'un champ de saisie est lié à une donnée du modèle, ou qu'un ligne d'une table HTML doit être répétée pour tous les éléments d'un tableau JavaScript. Il suffit de créer une page HTML en dur, puis de lui ajouter ces attributs de binding pour indiquer quelles données la vue doit présenter.

Faire un client web qui affiche et manipule des données, en gros du CRUD un peu sophistiqué comme c'est le cas de la quasi totalité des application web, devient très efficace avec AngularJS, et le code à écrire est incroyablement concis. Mais je n'ai pas parlé de ses nombreux autres atouts, comme la possibilité de segmenter son code JavaScript en modules et services en laissant le framework faire l'injection des dépendances. Ni de la possibilité de créer des "widgets". Ni des services fournis en standard, comme celui qui gère le routage et les paramètres de l'URL, ou celui qui permet de récupérer en une ligne de JavaScript des entités renvoyées au format JSON par un web service.

AngularJS pour quelle architecture ?

Là où AngularJS est optimal, c'est précisément pour faire un client web qui communique en échangeant des données au format JSON avec des web services. On peut donc très facilement imaginer une architecture où le serveur est complètement déchargé de la présentation, et ne fournit que des services implémentant toute la logique métier. Il y a deux gros avantages à ce type d'architecture. Le premier c'est que le même serveur peut être utilisé par des clients totalement différents, comme un client AngularJS dans un navigateur web, et une application native sur un smartphone ou une tablette. Les services et toute la logique métier sont centralisés, seule la couche de présentation va être déclinée en fonction du type de plate-forme. Le second avantage, c'est que le client web écrit avec AngularJS peut facilement fonctionner en mode déconnecté, car il n'y a aucune génération de page côté serveur. On peut gérer un stockage local et synchroniser avec les données du serveur quand celui-ci est accessible.

C'est le genre d'architecture qui est destiné à prendre de l'ampleur. Bien sûr on verra encore souvent de la génération de pages HTML côté serveur, et les frameworks web en Java, PHP ou autre ne vont pas disparaître, mais il sera de plus en plus courant de déporter toute la couche de présentation sur le client, car c'est l'architecture la plus simple pour gérer des technologies clientes variées qui peuvent fonctionner en mode déconnecté. Et dans ce cadre, AngularJS est d'une efficacité redoutable.

Présentation d'AngularJS le 28 mars à Montpellier

Je ferai une présentation du framework AngularJS lors de la prochaine soirée du groupe RIA de NOVAE LR, à Cap Omega. L'annonce est ici :

http://www.novaelr.org/actualites/atelier-ria-1515

Derniers billets

11 juin 2012

Avenir des applications web RIA

Ou la percée des frameworks clients JavaScript dans le développement d'applications web.

5 avril 2012

Exemples d'utilisation du framework AngularJS

Voici les fichiers des exemples que j'ai montrés lors de ma présentation du framework AngularJS à Montpellier.

15 mars 2012

AngularJS, énième framework JavaScript ou pierre angulaire des applications web ?

Un nouveau framework qui révolutionne l'écriture de clients web, et destiné à connaître un gros succès.

6 septembre 2011

Informatisation des processus et facteur humain

Ou quels sont les inconvénients du déterminisme induit par l'informatisation, et comment les éviter au maximum ?

26 août 2011

Ergonomie des applications web et productivité

Quelles fonctionnalités plus ou moins courantes sur internet peuvent être adoptées avec succès dans des applications de gestion, pour permettre un travail plus efficace ?

11 août 2011

Réutilisation et recyclage

Que peut-on apprendre de la navette spatiale américaine à propos de la réutilisation de code en informatique ?

Flux

Atom