Fondements
AngularJS est né en 2009 dans les locaux de Google.
Deux développeurs du nom de Brad Green et Shyam Seshadri commençaient sérieusement à déprimer devant leur projet appelé "Google Feedback".
Une immense frustration les envahissait au fur et à mesure que leur code grandissait, celui-ci comptait approximativement 17 000 lignes à ce moment-là.
Autant de lignes de pur front-end qui sont intestables et donc difficilement maintenables.
C'est à ce moment-là que Shyam Seshadri proposa de redévelopper entièrement la solution avec un framework fait maison, au bout de trois semaines, l'application ne comptait plus que 1 500 lignes de codes, parfaitement testées.
À compter de ce jour, les autres développeurs de l'équipe ont décidé de prendre en main ce framework et de travailler avec au quotidien. Une histoire est née, l'histoire d'un framework que l'on nommera AngularJS.
Concept
Angular est construit autour de concepts clés sur lesquels nous reviendront largement au cours de ce tuto. Comprenez bien que Shyam Seshadri, lorsqu'il créa
Angular, n'a rien inventé. Il n'a fait qu'utiliser à bon escient des concepts et des bonnes pratiques incontournables dans le monde du développement web actuel.
- Architecture MVC (Modèle-Vue-Contrôleur) : si vous connaissez le développement, vous avez sûrement entendu parler de ce type d'architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions que l'on peut effectuer sur ces données (Contrôleur)
- Data Binding : nous y reviendrons très largement au cours des prochains chapitres. Juste pour vous donner un avant-goût, je vous indique que, grâce à ce concept, les liens entre votre code HTML et JavaScript ne seront que plus forts.
- Injection de dépendances : tout comme l'architecture MVC, lorsque l'on parle d'injection de dépendances, on parle d'un concept prépondérant dans tout développement. Grâce à cela, les modules que vous développerez n'auront plus à se soucier d'instancier leurs dépendances.
- La manipulation du DOM au moyen de directives : la manipulation du DOM conduit souvent à la création de code difficilement maintenable et difficilement testable. Nous verrons qu'avec Angular, ce n'est plus le cas du tout !
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 4web. 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 :
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).
Les spécificités d'AngularJS
Angular est construit autour de concepts clés sur lesquels nous reviendront largement au cours de ce tuto. Comprenez bien que Shyam Seshadri, lorsqu'il créa
Angular, n'a rien inventé. Il n'a fait qu'utiliser à bon escient des concepts et des bonnes pratiques incontournables dans le monde du développement web actuel.
- Architecture MVC (Modèle-Vue-Contrôleur) : si vous connaissez le développement, vous avez sûrement entendu parler de ce type d'architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions que l'on peut effectuer sur ces données (Contrôleur)
- Data Binding : nous y reviendrons très largement au cours des prochains chapitres. Juste pour vous donner un avant-goût, je vous indique que, grâce à ce concept, les liens entre votre code HTML et JavaScript ne seront que plus forts.
- Injection de dépendances : tout comme l'architecture MVC, lorsque l'on parle d'injection de dépendances, on parle d'un concept prépondérant dans tout développement. Grâce à cela, les modules que vous développerez n'auront plus à se soucier d'instancier leurs dépendances.
- La manipulation du DOM au moyen de directives : la manipulation du DOM conduit souvent à la création de code difficilement maintenable et difficilement testable. Nous verrons qu'avec Angular, ce n'est plus le cas du tout !
Qu'est-ce qu'un framework ?
Pour comprendre comment fonctionne AngularJS, il est essentiel d'avoir les idées claires à propos de quelques points propres au développement 4web. Cette section en fait un rapide tour d'horizon.
Front-end & back-end
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
