Qu’est-ce qu’une Single Page Application ?

Une application à page unique est une application qui interagit avec les utilisateurs en réécrivant les pages Web existantes avec de nouvelles données provenant du serveur Web, au lieu d’utiliser la technique par défaut du navigateur qui exécute une toute nouvelle page.

L'objectif est d'avoir des transitions plus rapides qui peuvent faire en sorte que le site se sente plus comme une application inhérente.

Dans un SPA, tout le code HTML, JavaScript et CSS requis est soit récupéré par le navigateur, soit des ressources appropriées qui sont chargées et ajoutées aux pages selon les besoins.  Cela se produit généralement en réponse aux actions de l'utilisateur.

La page ne se recharge à aucun moment de la procédure et ne transfère pas le contrôle à une autre page, bien que l'API historique HTML5 ou le hachage de l'emplacement puissent être utilisés pour offrir la navigabilité et la perception de pages logiques distinctes dans l'application Web.

Comment fonctionne une SPA ?

MPA (Multiple Page Application) - concept de base

SPA et MPA sont tous deux basés sur le protocole HTTP.

Dans une architecture MPA client/serveur traditionnelle, chaque clic de l'utilisateur déclenche une requête HTTP vers le serveur. Le résultat de cette nouvelle requête est un rafraîchissement complet de la page, même si une partie du contenu reste inchangée.

SPA - Ajax et JavaScripts

Le cœur d'un SPA est basé sur Ajax, un ensemble de techniques de développement qui permet au client d'envoyer et de récupérer des données du serveur de manière asynchrone (en arrière-plan) sans interférer avec l'affichage et le comportement de la page web. Ajax permet aux pages web et, par extension, aux applications web, de modifier le contenu de manière dynamique sans avoir à recharger la page entière.

Pour ce faire, les SPA s'appuient fortement sur des scripts Java qui s'exécutent dans le navigateur du client. Les frameworks JavaScript tels que React, Vue, Angular et Ember sont chargés de s'occuper du gros travail côté client. 

En résumé, un SPA fonctionne comme suit :

Le client se connecte d'abord au serveur et obtient le contenu de la page, qui correspond principalement au code HTML, au CSS et à un bundle JavaScript, contenant tous les JavaScripts nécessaires pour exécuter la logique de l'application.

L'action d'un utilisateur déclenche l'exécution de JavaScript associés, qui à leur tour demandent des données au serveur par le biais d'appels Ajax. Les données sont généralement fournies dans un format JSON et ne déclenchent pas de rafraîchissement complet de la page Web.

Dans une application multi-tiers (MPA) impliquant des serveurs back-end, le serveur web peut se contenter de télécharger le paquet initial de HTML/CSS/JavaScript. Tous les appels Ajax ultérieurs se font directement entre le navigateur et les services back-end.

Quels sont les avantages d'une application à page unique (SPA) ?

Les applications à page unique sont connues pour tirer parti des mises en page répétitives et du contenu à la demande. Comme elles tirent parti de ces deux concepts, elles sont beaucoup plus efficaces, coûtent nettement moins cher que les applications traditionnelles et consomment également moins d'énergie. Voici quelques avantages à l'utilisation des applications à page unique.

Vitesse accrue

La vitesse doit être l'un des plus grands avantages d'opter pour le développement d'une application à page unique. Elles sont beaucoup plus rapides que les applications web traditionnelles car elles peuvent charger de nouvelles informations dans une seule page à la demande du client au lieu de relier plusieurs pages HTML à l'architecture du site.

Comme l'application n'a pas besoin d'envoyer constamment des requêtes au serveur et d'attendre de télécharger une nouvelle page à partir de zéro, une application à page unique est beaucoup plus facile.

Expérience utilisateur (UX)

Comme nous l'avons vu précédemment, les applications à page unique sont les leaders en matière d'expérience utilisateur pratique et directe. La plupart des utilisateurs sont souvent déroutés et irrités de devoir cliquer sur de nombreux liens dans une application traditionnelle pour arriver là où ils veulent.

Les applications à page unique éliminent ce problème en fournissant tout le contenu nécessaire dans une seule page déroulante. Cela fait également de la SPA un choix idéal pour les entreprises dont un grand nombre d'utilisateurs accèdent à leurs applications via des navigateurs mobiles.

Capacités de mise en cache 

Une application à page unique est capable de mettre en cache les données locales plus efficacement. Comme l'application à page unique n'envoie qu'une seule requête au serveur et stocke toutes les données qu'elle reçoit, elle peut également utiliser ces données pour travailler hors ligne.

L'avantage pour l'utilisateur est qu'il peut facilement continuer à travailler sur son projet même si sa connexion internet est faible ou inexistante. Les données locales peuvent être synchronisées avec le serveur dès que la connexion est rétablie.

Débogage avec Chrome

Le débogage des SPA avec Chrome est beaucoup plus facile que le débogage de n'importe quelle application à pages multiples. De plus, comme les SPA sont construites avec des frameworks tels que Angular et React, ces frameworks ont leurs propres outils de débogage Chrome, ce qui facilite grandement leur débogage.

Quels sont les inconvénients d'une application à page unique (SPA) ?

Historique du navigateur

L'un des inconvénients d'une expérience utilisateur transparente et de l'absence de chargement de page avec les applications à page unique est que les SPA n'enregistrent pas les sauts des utilisateurs entre les différents états.

Cela signifie que lorsque l'utilisateur appuie sur le bouton "retour", il ne peut pas revenir en arrière. Le bouton retour ne ramène l'utilisateur qu'à la page précédente et non à l'état précédent dans l'application.

Il existe une solution à ce problème en utilisant l'API HTML 5 History, intégrée aux frameworks SPA. Cette API permet aux développeurs d'accéder à l'historique de navigation du navigateur via JavaScript.

Optimisation du référencement

L'un des plus grands signaux d'alarme qui empêchent le développeur d'explorer les applications à page unique est la difficulté d'optimisation du référencement.

La principale raison est que les applications à page unique semblent fonctionner en JavaScript, et en fonction de la demande provenant du côté client, elles téléchargent des données.

Les différentes pages ne sont pas accompagnées d'adresses URL uniques et l'URL ne change pas beaucoup. Comme la plupart des pages ne peuvent être trouvées et analysées par les robots de recherche, il n'est pas facile d'optimiser les sites Web pour les moteurs de recherche.

Les développeurs doivent s'assurer que Google indexe tous les fichiers JavaScript pour que cela soit possible. Les développeurs doivent également confirmer que dans le schéma URL, le site Web utilise le mode HTML5.

Problèmes de sécurité

Par rapport aux applications multi pages, les applications monopages sont plus vulnérables aux attaques par cross-site scripting. En effet, les pirates peuvent injecter des scripts côté client dans les applications web en utilisant le XSS.

L'exposition d'informations sensibles est l'un des problèmes de sécurité qui se posent ici. Si les développeurs n'ont aucune idée du type de données présentes dans le chargement initial de la page, il y a de fortes chances qu'ils envoient ces données aux utilisateurs, alors qu'elles auraient dû rester cachées.

Dans le scénario habituel, le navigateur n'affiche pas la totalité de l'application à page unique, ce qui constitue un faux signal de sécurité. Le fait de ne pas avoir accès au niveau fonctionnel est une raison supplémentaire pour laquelle les applications monopages manquent de sécurité.

Étant donné que les développeurs retirent la logique et les fonctionnalités du serveur pour les déplacer vers le client, il est assez facile d'offrir l'accès aux fonctions aux clients, ce qui ne devrait pas être le cas de la bonne façon.

Les applications à page unique conviennent parfaitement au développement de plateformes robustes avec des volumes de données mineurs.

Une application à page unique est parfaite comme base pour le développement futur d'applications mobiles.  Les SPA visent à offrir une expérience utilisateur exceptionnelle en essayant de reproduire un environnement naturel dans le navigateur : pas de rechargement de page ni de temps d'attente supplémentaire.

Ce modèle est remarquable pour les réseaux sociaux, les plateformes SaaS et les communautés fermées où l'optimisation des moteurs de recherche n'a pas d'importance.