Single Page Application (SPA) : comment la mettre en place ?

Messageries électroniques, boutiques en ligne, réseaux sociaux, jeux vidéo ou encore logiciels SaaS : de nombreuses applications web dynamiques sont des Single Page Applications (SPA). Quand un utilisateur ouvre une SPA, le navigateur charge une seule fois le document HTML unique. Quand l'utilisateur effectue une action dans l'application web, le contenu requis s'affiche grâce au code JavaScript, sans avoir besoin de charger une nouvelle page. Le modèle de conception SPA se distingue ainsi de l'architecture MPA, pour multi-page application, où le navigateur charge une nouvelle page à chaque clic de l'utilisateur. Gmail, Airbnb, Twitter, Trello et Google Maps, par exemple, sont des single page applications.

Les avantages et inconvénients d'une SPA

Les avantages d'une SPA

Concevoir une application web sous forme de single page application permet d'offrir une meilleure expérience utilisateur. L'architecture SPA, en outre, facilite le développement de l'application web à plusieurs égards.

• Les temps d'exécution sur une single page application sont particulièrement courts. Lorsque l'utilisateur effectue une action en effet, le navigateur modifie uniquement la partie de contenu requise, sans charger entièrement une nouvelle page : l'application web fonctionne plus rapidement. C'est pourquoi la SPA convient notamment aux applications de jeux vidéo ou de réseaux sociaux, où les interactions sont nombreuses. Les clients de boutiques en ligne exigent des temps de réponse courts : la single page application est également pertinente pour remplir cet objectif.
• La SPA améliore l'expérience utilisateur en supprimant l'effet de transition entre deux pages web. La navigation est plus fluide, comme sur une application mobile native.
• L'application monopage n'adresse qu'une seule requête au serveur, puis stocke l'ensemble des données du site. L'utilisateur peut ainsi accéder au contenu du site alors qu'il est hors ligne. Illustration : sans connexion internet, l'utilisateur Gmail peut continuer à consulter tous les e-mails qui ont été chargés lors de la requête initiale au serveur.
• La single page application présente des avantages côté développeurs. Tout d'abord parce que le même back-end peut être utilisé pour les versions mobile et web de l'application, ensuite parce que le travail de débogage, le cas échéant, est facilité.

Les inconvénients d'une SPA

Initialement, l'architecture SPA posait problème au niveau du SEO. Les applications monopage se multipliant, les moteurs de recherche ont amélioré leurs pratiques de référencement ; Google, notamment, communique sur les règles à suivre pour optimiser le référencement d'une single page application.

Une SPA complexifie l'usage d'outils de web analytics. A priori, ces outils en effet collectent des données de navigation à chaque chargement d'une nouvelle page web. Dans la mesure où la SPA est une page web unique, les outils ne peuvent pas accéder au parcours utilisateur détaillé, ce qui limite l'analyse. Mais face à la multiplication des single page applications, les outils de web analytics s'adaptent progressivement.

Dernier inconvénient de la SPA : le temps de chargement à l'ouverture de l'application web. Si les temps d'exécution pendant la navigation sont réduits, le temps de chargement initial peut être relativement long. Le navigateur en effet doit charger l'ensemble des contenus du site, c'est-à-dire tout le code HTML, CSS et JavaScript, en une seule fois. L'application SPA s'ouvre plus lentement que l'application MPA, mais une fois ouverte, l'application SPA fonctionne plus rapidement.

Comment fonctionne une single page application ?

Traditionnellement : quand un internaute ouvre un site web, le navigateur adresse une requête HTTP au serveur, le serveur exécute un script, puis envoie le document HTML au navigateur pour qu'il affiche la page web à l'écran ; quand l'internaute effectue une action sur le site, le navigateur adresse une nouvelle requête de manière à charger une nouvelle page. Le fonctionnement d'une single page application permet d'éviter le chargement d'une nouvelle page à chaque action de l'utilisateur du site. Plusieurs techniques permettent de concevoir une SPA.

• Certaines SPA sont conçues pour fonctionner localement : à l'ouverture de l'application web, le navigateur récupère auprès du serveur la totalité du code HTML, CSS et JavaScript. Quand l'utilisateur effectue une action sur l'application, le navigateur exécute le code JavaScript pour afficher à l'écran le contenu requis, sans requête supplémentaire auprès du serveur.
• D'autres SPA fonctionnent grâce à AJAX, qui permet de mettre à jour certaines parties de l'application web sans avoir à recharger une page entière. Au lieu d'envoyer une nouvelle page à chaque action dans l'application, le serveur envoie des données au format XML ou JSON.

Quels frameworks utiliser pour créer des SPAs ?

React, Angular, Vue, Ember.js et BackBone sont des frameworks gratuits qui permettent de créer des single page applications.

• React est une bibliothèque JavaScript disponible en open source, utilisée par des single page applications de référence : Facebook et Instagram, Netflix, Yahoo ou encore Airbnb. React permet de créer l'interface de l'application web SPA, mais nécessite d'utiliser un framework complémentaire, tel qu'Angular.
• Angular est un framework JavaScript développé par Google, et utilisé notamment pour la création d'applications web monopage. Angular recommande d'utiliser le langage TypeScript. Les entreprises PayPal et Upwork, par exemple, utilisent ce framework pour leur application web.
• Vue.js est développé par un ancien collaborateur Google, qui souhaite alors améliorer le framework Angular. Vue.js est notamment utilisé par l'entreprise Alibaba pour sa marketplace.
• Ember.js est un framework JavaScript en open source, développé pour créer des SPA multiplateforme. LinkedIn, par exemple, utilise Ember.js.
• BackBone est également très adapté pour la création de single page applications. Trello, entre autres applications web, utilise le framework BackBone.

Pour aller plus loin, découvrez les opportunités d'affaires liées aux évolutions du web en téléchargeant le guide et la checklist ultime du web 3.0 ; ou découvrez le logiciel marketing de HubSpot.