Un peu d'histoire

À ses débuts en 2009, AngularJS devait être un logiciel manipulant des données au format JSON (indépendemment du web). Finalement, Miško Hevery et Adam Abronsw, ses fondateurs, ont abandonné ce projet et l'ont fait basculer dans le domaine Open Source. Il a depuis été repris en grande partie par Google. D'où son rapide gain de popularité : la communauté est active et les mises-à-jour fréquentes. Ce sont là deux de ces grands points forts.

Pour avoir quelques repères historiques, la version 1.0.0 n'est arrivée qu'en 2012, et la version 2.0 est en cours de développement. Ce tutoriel est basé sur la version 1.2 qui est la première version stable.

En ce qui concerne le vieux démon des développeurs web, Internet Explorer, les versions 1.2+ d'AngularJS ne supporte pas IE 6 ou 7. D'ailleurs, dès la version 1.3, AngularJS ne supportera plus IE 8.
AngularJS 1.3: a new release approaches (EN)

Quelques notions essentielles

Pour comprendre comment fonctionne AngularJS, il est essentiel d'avoir les idées claires à propos de quelques points propres au développement web. Cette section en fait un rapide tour d'horizon.

Front-end & back-end

Front-end
C'est la partie visible d'un site web. Autrement dit, tout ce que le visiteur télécharge depuis le serveur lorsqu'il charge une page. On y trouve donc le HTML, le CSS et bien sûr le Javascript. C'est précisément à ce niveau qu'intervient AngularJS.

Back-end
C'est la logique de l'application, autrement dit la partie du code qui est exécutée sur le serveur lorsqu'une requête est reçue. Généralement écrit en PHP, ASP.NET ou encore en JAVA, ce code renvoie les résultats qu'il a obtenu en fonction de tous les paramêtres à prendre en compte (le profil du visiteur par exemple). Habituellement composé de trois parties (un serveur, une application et une base de données), le back-end est donc en quelque sorte la boîte noire du site pour le visiteur : il ne sait pas ce qui s'y passe mais ça fonctionne. D'un point de vue temporel, on a le schéma suivant :

schéma de l'échange serveur/client
Schéma des échanges entre serveur et client

Qu'est-ce qu'un framework ?

Un framework est un ensemble cohérent de composants logiciels, autrement dit, un ensemble de fonctions, méthodes, objets, etc... mais aussi avec une logique propre permettant de développer rapidement une application. Le framework est une grande coquille structurée mais vide au sein de laquelle vous allez définir vos propres modules tout en respectant la syntaxe imposée.
Ceci le distingue donc fortement d'une simple librairie de fonctions utilisée indépendemment d'une structure spécifique. D'ailleurs, il n'est pas rare qu'un framework regroupe plusieurs librairies. Par exemple, AngularJS implémente nativement une version allégée de jQuery, appelée jqLite.

Bien entendu, si vous avez déjà travaillé avec un framework, vous ne serez pas déboussolé par AngularJS. Par contre, si, comme beaucoup de développeurs web, vous avez jusqu'ici implémenté votre front-end avec de simples librairies javascript (comme jQuery dans son utilisation courante), il va falloir oublier complètement votre approche du DOM et autres particularités du web.

Vous n'écrirez plus votre code de façon désordonnée, mais vous aurez une véritable structure propre et lisible. Non pas que développer avec jQuery implique de tout regrouper en un seul fichier gigantesque ou que ce soit un mauvais outil, mais le développeur qui avance progressivement dans son code ne fait pas forcément l'effort de l'ordonner de façon cohérente et logique. On ajoute généralement des fonctionnalités à notre front-end peu à peu. Et pour réorganiser tout ça, on perd beaucoup de temps et ne pas le faire affecte la vitesse de chargement de vos pages.
De plus, il n'est pas rare d'avoir des comportements inattendus lorsqu'on code de cette façon. Ceci est dû aux particularités de Javascript qui n'est pas un langage orienté objet (comme JAVA ou PHP 5 par exemple) ou procédural (comme le C). Voir le chapitre 1.3 dédié à ce propos

Les spécificités d'AngularJS

Développement back-end / front-end

Les langages utilisés pour coder le back-end (comme PHP) sont très performants pour cette tâche mais s'avèrent inadaptés et inefficaces pour le front-end. D'ailleurs si on y pense un peu, ça paraît logique : alors que le back-end a besoin d'un langage qui puisse communiquer facilement avec tout type de base de données et qui soit très rapide à l'exécution même si la page est appelée plusieurs centaines de fois par seconde (par exemple PHP met en cache sur le serveur une version compilée du code source tant que celui-ci n'est pas modifié pour accroître ses performances), le front-end lui, a pour priorités la lisibilité, la simplicité syntaxique et la testabilité. Normalement, une personne qui ne code quasiment pas devrait pouvoir écrire les fichiers HTML du front-end sans être perdue (même si dans la pratique un front-end developer a quelques bases évidemment).
Ces incompatibilités entre PHP (ou tout autre langage classique de back-end) et le développement front-end ne sont pas neuves, et beaucoup de moteurs de templates ont vu le jour, comme Twig, ce qui vient confirmer la nécessité flagrante de les séparer.

La réponse d'AngularJS

AngularJS est un framework Javascript qui permet de déplacer la logique de présentation du côté client et ainsi la séparer de la logique de l'application qui reste sur le serveur. Les données sont récupérées auprès de celui-ci via des requêtes HTTP. Enfin, celles-ci sont interprétées et affichées au visiteur indépendamment du serveur. Cette déportation permet de rendre la navigation sur le site internet beaucoup plus fluide pour le visiteur

Cette approche permet donc de séparer complètement le back-end et le front-end, contrairement à l'architecture classique d'un site web. Elle est très utilisée pour les sites mono-pages à la mode en ce moment. Ces fameux one page reposent entièrement sur cette déportation de la logique de présentation, sans laquelle ils seraient très brouillons dans leur code et très difficiles à débugger.

Mais AngularJS ne se limite pas à ces one page ! Bien au contraire, il permet de développer des applications web complètes (Voir le chapitre 3.1).

Bref, AngularJS est un framework complet et puissant, alors commençons sans plus tarder !

Vos commentaires

comments powered by Disqus