Prérequis Javascript

Ce dernier chapitre d'introduction n'est pas essentiel à l'apprentissage d'AngularJS mais je pense qu'il peut être utile si vous souhaitez comprendre un certain nombre de choses sur Javascript et ses subtilités. Il est possible de bien manipuler AngularJS sans savoir ce qui suit mais je suis persuadé qu'un bon développeur doit comprendre en plus de simplement coder.

Javascript est un langage qui est très largement incompris. Il revêt beaucoup de spécificités, du moins par rapport aux autres langages classiquement employés dans le développement web, qui sont souvent passées à la trappe.

On va donc faire un rapide tour d'horizon des notions essentielles à avoir en tête pour coder en Javascript. Ceci vous servira pour AngularJS mais pas seulement !

Langage de script

Comme son nom l'indique, Javascript est un langage de script. Ainsi, il n'est pas compilé mais directement interprété par le navigateur. Ceci lui permet de s'affranchir des contraintes de bas niveau, comme les problèmes d'allocation mémoire, puisque c'est le navigateur qui lui offre un environnement préparé.

Mais cet avantage est aussi sa faiblesse. Comme c'est le navigateur qui lui envoie les informations dont a besoin le code pour intéragir avec la page web, celui-ci peut utiliser différentes variables / fonctions pour transmettre les informations nécessaires. C'est pourquoi Internet Explorer peut imposer une certaine syntaxe. Heureusement, les organismes normalisateurs — tels que le W3C — prenant de l'importance, les navigateurs modernes tendent à respecter les standards du web (même IE !).

C'est là un des grands intérêts des librairies et framework, qui proposent une surcouche prenant en charge un certain nombre de navigateurs.

Programmation Orientée Prototype

On entend souvent que Javascript est un langage orienté objet. C'est en partie vraie. En fait, c'est un langage orienté prototype :

La programmation orientée prototype est une forme de programmation orientée objet sans classe, basée sur la notion de prototype. (...) La grande différence avec la programmation objet à classes est qu'on peut remplacer le contenu des slots, en ajouter d'autres ou changer la hiérarchie d'héritage que cela soit prévu dans l'objet original ou pas. Wikipédia, Programmation Orientée Prototype

Un slot (vocabulaire propre au langage Self que l'article prend en exemple) n'est autre qu'une propriété d'une classe. En Javascript, ce sont les fameux var qui peuvent être indifféremment des variables ou des fonctions.

En réalité, ce ne sont pas des classes, mais de simples constructeurs, des fonctions qui construisent / instancient des objets grâce à l'opérateur new. Mais par abus de langage on parlera quand même de classe. ;)

Avant d'aller plus loin, il est nécessaire de bien comprendre ce qu'est le prototype en Javascript. Pour ce faire, je vous conseille fortement de lire l'article très clair de Pierre Gayvallet que je ne vais pas répéter :
Javascript, retour aux bases : constructeur, prototype et héritage

Autrement dit, il est possible de modifier la structure d'une classe pendant l'exécution du code. On peut par exemple ajouter, modifier ou supprimer une propriété. Bref, vous êtes complètement libre. Ci-dessous, un exemple de modification de la structure d'une classe après sa déclaration :

var Classe = function(arg1){
    this.a = arg1;
};

Classe.prototype.b = function(arg1){
    alert(this.a);
};

var monObjet = new Classe("foo");

monObjet.b();    // affiche "foo"

C'est cette particularité de Javascript orienté prototype qui vous permet, par exemple, d'ajouter des plugins en complément de jQuery.

Si l'on en reste au schéma expliquant les échanges entre serveur et client du chapitre 1, il n'y a pas de possibilité de récupérer des informations autrement que via l'ensemble HTML, CSS, JS distribué par le serveur. Or si le web était effectivement limité à cette utilisation, l'expérience utilisateur — la fameuse UX très à la mode — serait incroyablement plus triste que celle à laquelle on est habitué aujourd'hui.

Pour palier ce problème, AJAX a vu le jour dès 2005. Le principe est relativement simple : au lieu de recharger toute la page, le code Javascript envoie une requête au serveur de façon invisible et intègre directement les éléments de la réponse à la page affichée chez le client. Finalement, le visiteur n'a rien remarqué (si ce n'est une petite icône signalant le chargement d'informations) et une partie de sa page s'est mise à jour !

AngularJS propose de déporter côté client toute la logique de présentation. Ainsi, la navigation est plus fluide et l'on peut développer de véritables applications web. Mais pour ce faire il est indispensable de s'affranchir des contraintes classiques des pages et l'utilisation de requêtes asynchrones prend tout son sens ! Sans celles-ci, AngularJS serait bien pauvre...

Heureusement, ce framework intègre parfaitement la technologie AJAX. Comme on le verra dans la partie 2, le service $http est facile d'utilisation et permet une gestion efficace des requêtes AJAX.

Sans framework

Comme on l'a déjà vu, le code Javascript est envoyé au client lors de la réponse à la requête HTTP initiale. Et bien entendu, pour que la page web réagisse correctement aux actions de l'utilisateur, il faut lui envoyer tout le code Javascript lui correspondant.

Or, comme dans quasiment tous les langages de programmation courants, il est possible de séparer ce code en plusieurs fichiers .js. Cette découpe a beaucoup d'avantages ! Elle permet une lisibilité accrue de votre code, un dèbogage bien plus aisé — et donc un gain de temps considérable ! —, une portabilité de vos modules très facile et une stabilité de votre application plus qu'appréciable !
Ces points forts ne sont pas à ignorer, mais, on va le voir, ont un prix.

Sachant qu'aujourd'hui les navigateurs mettent en cache les fichiers téléchargés, le développeur front-end se trouve face à un dilemme, et non des moindres. Vaut-il mieux :

1. Utiliser le cache et tout envoyer au client dès sa première visite sur le site ?
   ou
2. Envoyer pour chaque page uniquement les fichiers utiles à celle-ci ? C'est le lazy-loading.

Le choix entre ces deux options n'est pas si facile. En effet, chaque réponse a ses avantages et inconvénients qu'il faut bien avoir en tête avant de pencher pour l'une ou l'autre. Voici un petit tableau comparatif des deux approches :

En conclusion, les deux approches se valent mais répondent à différentes attentes. Si vous développez un petit site comme Tutoriel AngularJS, je vous conseille de ne pas vous compliquer la vie et de partir sur la première solution. Le chargement de la première page sera effectivement rallongé, mais pas excessivement dans la mesure où c'est un petit site. D'autant que si vous optimisez correctement et compressez votre code pour la production, les fichiers seront nettement allégés.
En revanche, si vous vous engagez dans un projet d'envergure, je pense qu'il devient vite intéressant et rentable de passer au lazy-loading. Pour vous faciliter la vie, il existe des solutions clef-en-main. Je vous conseille RequireJS.

Le lazy-loading est un concept général qui peut s'appliquer à d'autres éléments d'un site web que le Javascript. Il existe beaucoup de plugins pour charger les images, vidéos ou autres éléments gourmands en ressources de façon asynchrone.
Accélérez le chargement de votre site grâce au lazy-loading

Avec AngularJS

Comme vous le verrez par la suite, AnglarJS pousse à la modularité. Même si lors des premiers chapitres on concentrera le code en un ou deux fichiers par souci de simplicité, on sera vite amené, avec la partie 3 surtout, à séparer le Javascript en différents fichiers dans de multiples dossiers. En effet, il s'agit d'être ordonné et méthodique pour développer avec ce framework.

Dans les versions antérieures d'AngularJS, le Lazy-loading était souvent préconisé. Une solution intégrant RequireJS a vu le jour : AngularAMD.
Cependant, il est aujourd'hui préférable de concaténer puis minimiser vos fichiers Javascript pour la production en UN seul et unique fichier. De cette façon, aucun problème de dépendance ne viendra vous embêter et l'application sera fluide une fois chargée.