Suite à la conférence de Maxime LUCE pendant les TechDays sur ce sujet, je vais partager avec vous les grands concepts des Single Page Applications.
Qu’est-ce qu’une Single Page Application ?
Une Single Page Application (ou SPA) est un site web construit avec les technologies habituelles (HTML5, CSS3 et JavaScript) dans laquelle le mot d’ordre est de ne jamais recharger totalement le contenu de notre seule page web.
Les différents outils pour créer sa Single Page Application
Inutile de réinventer la roue dans ce genre de site web. En effet, il y a des solutions plus ou moins complètes qui permettent de répondre aux problématiques les plus courantes.
Pour commencer, il existe des outils tout en un, comme Angular, qui sont parfaits pour débuter dans le monde de la Single Page Application. Néanmoins, ils se révèlent compliqués à maintenir au bout d’un certain temps.
Il existe ensuite des solutions plus spécialisées dans tel ou tel domaine. Elles sont idéales dans le cadre d’un besoin très spécifique et sont souvent beaucoup plus facile à mettre en oeuvre et à personnaliser que les solutions tout en un.
On notera aussi la présence de Framework spécialisés dans les Single Page Application.
Une question d’organisation : l’automatisation des processus
Afin de ne pas perdre trop de temps à se mettre à jour constamment et parfois fastidieusement, il est bon de gérer les différentes parties de notre Single Page Application de façon automatique.
Ainsi la gestion des dépendances de notre projet, la génération et les tests et le scaffolding peuvent se gérer de façon automatique à l’aide d’outils comme Yeoman.
Ce dernier est une solution puissante pour construire et enrichir nos Single Page Applications en mode console et d’avoir instantanément le résultat attendu.
L’architecture de notre Single Page Application
Il faut bien penser à l’évolution de notre Single Page Application. En effet, il faut se tenir à jour au niveau des différentes technologies utilisées car il devient rapidement problématique voire impossible de faire de grosses mises à jour.
De plus, il faut faire attention à appliquer plusieurs concepts d’architecture applicative. Le premier étant le principe de “Separation Of Concern” qui n’est pas moins que le fait d’utiliser la bonne technologie pour un besoin particulier. Le deuxième principe est le “MV*”, * tant tout ce qu’on veut sans pour autant tomber dans le modèle MVC qui est un modèle trop statique, à savoir qui nous oblige la plupart du temps à recharger une grande partie de notre page pour n’importe quelle action utilisateur. Enfin, le dernier principe est “Convention First” à opposer à “Configuration First”.
Il ne faut pas non plus oublier d’utiliser des design patterns spécifique au développement de Single Page Applications. L’utilisation des “Promises” au dépend des “Callbacks” par exemple, est une excellente pratique. De plus, la “Memoization”, qui est le fait de mettre en mémoire les résultats récurrents, permet de réduire les temps d’accès aux données qui ne varient pas durant les sessions d’utilisation de notre site. Enfin le pattern “Reuse”, qui consiste à éviter d’instancier de multiples fois le même type d’objet en vidant ces derniers afin de les réutiliser ultérieurement, est un bon moyen de réduire l’empreinte mémoire de notre site.
Les limites à prendre en compte
Il y a plusieurs limites à prendre en compte lorsqu’on réalise une Single Page Application. La première est la taille et la manipulation du DOM. C’est une des sources principales des mauvaises performances d’un site. Pour contourner ce problème il faut éviter les grosses manipulations de DOM et essayer de décharger les éléments qui ne sont pas visibles par l’utilisateur de notre site. Un exemple simple est l’exemple des 1000 tweets que l’on voudrait charger sur notre page. Il serait malvenu de charger tous les tweets d’un seul coup car cela ferait ralentir l’interface. On préfèrera donc l’affichage des tweets 10 à 10 par exemple. Dans le même ordre d’idées, il faut éviter les traitements lourds. En effet, l’affichage et le JavaScript se partageant les mêmes ressources, il y a de gros risques de ralentissement voire de figeage de l’interface lors de gros traitements. Enfin, il faut essayer de réduire au maximum l’empreinte mémoire de notre application. Pour se faire il faut faire attention à ne pas avoir de fuites mémoire et à ne pas bloquer le thread principal (en utilisant un setTimeout par exemple). On peut aussi utiliser le stockage hors ligne afin de garder les données importantes pour un accès rapide à ces dernières.
Notre Single Page Application est prête ? Il faut la déployer !
Afin de déployer notre Single Page Application sur plusieurs devices nous avons plusieurs possibilités. La première étant la WebView, pratique pour les applications simples ou qui ne nécessitent pas de gros traitements. Les solutions hybrides sont, elles, utiles pour les applications complexes ou ayant besoin de la puissance de calcul du device sur lequel elles sont déployées.
Pour aller plus loin…
Afin d’aller plus loin dans le développement de vos Single Page Application, je vous conseille d’aller faire un tour du côté de Cordova CLI d’Apache qui permet de viser et déployer sur toutes les plateformes avec un seul et même outil.
Voici aussi le lien vers la session des techdays, vous pourrez bientôt retrouver la session en video (d’ici Mars) :
