Définition générale

Une application SPA (Single Page Application) est une application fonctionnant d’un seul tenant dans le navigateur internet grâce au langage de développement JavaScript.

Contrairement aux applications « classiques », toute l’application fonctionne dans le navigateur. Pour récupérer et ou envoyer des données, le navigateur fait des appels à des API (fonctionnant en Rest, GraphQL ou bien d’autres technologies). Dans une application « classique », le serveur génère s’occupe des données et de la partie affichage. Le code HTML utilisé est, alors, généré par le serveur qui génère alors des pages complètes.

Dans une SPA, tout le code HTML, JavaScript, CSS est envoyé d’une seule traite au navigateur (en fait, cela dépend de comment c’est développé). Ce découplage permet de séparer clairement les limites entre ce qui est côté serveur et ce qui est côté utilisateur.

Quel(s) avantage(s) ?

On peut voir ici plusieurs avantages comme notamment des économies de ressources au niveau serveur. En effet, au lieu de passer son temps à générer du code HTML, le serveur va fournir uniquement les données nécessaires via les API.

On peut également noter qu’une fois que l’application SPA est chargée dans le navigateur, il n’y a plus aucune ressource à charger (sauf d’éventuelles images qui pourraient être rencontrées pendant la navigation), ainsi, l’application est utilisable et il n’y a plus de rechargement de page

Quel(s) inconvénient(s) ?

Une application SPA fonctionnant en JavaScript, cela rend son contenu difficilement indexable. En effet, les moteurs de recherches ne vont pas lancer l’application, car cela est consommateur de ressources de leur côté (rappelez-vous que l’application est exécutée côté navigateur internet), de ce fait, ils ne perdent pas leur temps à indexer ces applications

Un temps de chargement long à la première navigation peut être rencontré, il faut effectivement charger tout le JavaScript nécessaire, ce qui peut être long et couteux.

Pour quel(s) usage(s) ?

Les applications SPA sont souvent utilisées pour réaliser des tunnels de commande, la gestion des paniers mais on peut également trouver des extranets d’entreprise ou bien des intranets réalisés dans de telle technologie. Se posera alors la question de la protection des données, car il est plus facile d’exposer n’importe quelle donnée via des API et une attention particulière devra être portée de ce côté.

Avec quelle technologie réalise-t-on une SPA ?

Plusieurs framework JavaScript mènent la danse, on trouve notamment 5 framework qui sont couramment utilisés pour cela : VueJS, React, Svelte, Solid et Angular

Chaque framework a ses inconvénients et avantages, certains permettent de réaliser rapidement des petites SPA, d’autres sont plus complets et plus outillés pour réaliser de grosses applications