AngularJS : les dessous techniques du framework JavaScript
AngularJS est un framework JavaScript open source, développé par Google, permettant de faciliter la création de SPA (site web monopage ou single-page application en anglais). Son rôle est de fournir tous les mécanismes techniques nécessaires à la création de ce type d'application de nouvelle génération et d'apporter une structure permettant de développer une application robuste et organisée.
Organisation de l'application
- MV* (MVC/MVVM)
Le premier apport se situe donc au niveau de la structure de l'application, AngularJS s'appuyant sur le pattern MVC, Model-View-Controller.
Ce pattern préconise d'organiser une application en trois parties : modèle, vue et contrôleur.
Dans ce pattern, le modèle est composé des données à afficher mais ne possède aucune logique. Il s'agit simplement d'un conteneur.
La vue est, quant à elle, chargée d'afficher les données du modèle pour générer la page qui sera visible par les utilisateurs. Elle a aussi pour rôle de transmettre les actions effectuées au contrôleur, comme le clic sur un bouton ou la sélection d'un élément d'une liste.
Le contrôleur est l'élément central de ce pattern puisqu'il est responsable de créer le modèle, en allant contacter une API Web ou en allant requêter une base de données par exemple, puis de le transmettre à la vue. Son rôle est également de répondre aux actions utilisations, transmises par la vue, pour effectuer le traitement attendu.
L'avantage de ce pattern est de séparer l'application en différents éléments ayant des responsabilités distinctes et définies. Cela permet d'avoir un code plus structuré et donc plus clair, d'apporter une meilleure maintenabilité et de donner la possibilité aux développeurs de tester unitairement les contrôleurs.
AngularJS s'inspire également du pattern MVVM, Model-View-ViewModel qui définit une organisation assez similaire au pattern MVC, pour sa notion de binding. Le binding permet de synchroniser une donnée du modèle et son affichage dans la vue, de manière à ce qu'une modification du modèle déclenche automatiquement une mise à jour de la vue, et inversement.
Comme l'utilisation des patterns MVC et MVVM n'est pas suffisante pour organiser une application entière, ces patterns ne visant généralement que les couches UI, AngularJS introduit d'autres notions, comme les services, dont le rôle est d'encapsuler des fonctionnalités métiers et techniques, ou comme les modules, permettant de regrouper des éléments pouvant être réutilisés dans plusieurs applications AngularJS.
- IoC
Enfin, afin de décharger le développeur de la gestion du cycle de vie des différents objets AngularJS, contrôleurs, modèles et services par exemple, le pattern IoC, Inversion of Control, est utilisé.
Ce pattern définit qu'un composant applicatif ne doit pas être responsable de la récupération de ses dépendances mais uniquement de leurs déclarations, un composant tiers étant responsable de les résoudre.
Dans une application AngularJS, cela veut dire que le développeur n'aura pas à instancier les éléments d'une application ni leurs dépendances. AngularJS se chargera automatiquement de gérer le cycle de vie des différents éléments ainsi que leurs dépendances.
- Tests unitaires et end-to-end
La séparation des responsabilités induite par l'utilisation du pattern MVC implique qu'il est possible de tester son application. AngularJS propose deux types de tests.
Les tests unitaires permettent de tester un élément de l'application, un contrôleur ou un service par exemple, de manière unitaire, c'est-à-dire sans tester les dépendances via un mécanisme de mock.
Les tests end-to-end permettent quant à eux de tester une fonctionnalité de l'application de bout en bout, c'est-à-dire depuis l'exécution du contrôleur, en passant par les services dont il dépend, jusqu'aux ressources externes utilisées, comme une API Web par exemple.
Mécanismes techniques
Comme il a été vu précédemment, la réalisation d'une application web de type SPA présente plusieurs enjeux techniques, le web n'ayant pas été pensé pour créer des applications. Pour cela, AngularJS apporte un ensemble de mécanismes nécessaires à la mise en place d'une SPA.
- Template de vue
Les templates de vues sont le premier mécanisme fondamental apporté par AngularJS. HTML étant un langage statique, il n'est pas possible nativement d'effectuer de traitements conditionnels, comme des boucles for ou des conditions if, ce qui est nécessaire pour le mécanisme de vue dans une SPA.En effet, les vues sont calculées depuis le navigateur et non plus depuis le serveur.
Pour combler cet aspect statique, AngularJS introduit la notion de directives chargées d'étendre le langage HTML, en associant à un nouvel élément HTML un comportement JavaScript.
Ces directives sont un élément central d'AngularJS, et sont notamment utilisées pour construire les mécanismes de bindings.
- Navigation
Le second enjeu technique est de gérer la navigation de manière à toujours rester sur la même page.
AngularJS propose pour cela un mécanisme de routage responsable de la gestion de la navigation.
- Services techniques
Enfin, AngularJS fournit un ensemble de services techniques nécessaires à la réalisation d'une application, mais pas liés aux SPA.
Parmi ces services, les plus utilisés sont le service de requêtage, permettant d'effectuer des requêtes HTTP ou d'interagir avec une API Rest, ou le service de formulaires et validations, permettant de créer des formulaires HTML compatibles avec les SPA c'est-à-dire proposant une validation côté navigateur et soumettant le formulaire en AJAX.
Tous ces services sont faits dans le but d'aider le développeur à se concentrer sur les fonctionnalités métiers de son application. Ils lui évitent d'investir du temps dans le développement des mécanismes techniques.
Versions
La version actuelle du framework AngularJS est la 1.3, et est celle utilisée dans cet ouvrage. Elle est compatible avec tous les navigateurs récents et avec Internet Explorer à partir de la version 9. En effet, le choix a été fait sur cette version 1.3 de ne plus supporter Internet Explorer 8 afin de proposer un framework plus léger et de ne pas avoir à maintenir un certain nombre de hacks nécessaire à son support.
Dans le cas où l'application développée cible le navigateur Internet Explorer 8, il est alors nécessaire d'utiliser la version 1.2 du framework.
Cet article est constitué à partir de bonnes feuilles issues de l'ouvrage "AngularJS Développez aujourd'hui les applications web de demain" publié chez Eni. Nous publierons ces bonnes feuilles en deux parties. La semaine prochaine, vous découvrirez le chapitre "Ma première application AngularJS".
Lire aussi
Conseils pour améliorer le SEO d'une application web monopage
Ajax : optimiser le référencement et le crawl d'une application web monopage
Installer Google Analytics sur un site d'une seule page (ou "monopage")