Différence entre WebApp & SPA

Pour bien comprendre la différence, analysons le schéma placé en lien.

La partie supérieure montre bien qu'à chaque requête, toute la page est rechargée. C'est-à-dire que le navigateur va télécharger du HTML + du contenu (en supposant qu'il dispose déjà dans son cache de tous les CSS et JS dont il a besoin).

En-dessous se trouve la SPA, celle-ci va télécharger tout le HTML et le JS lors de la première requête uniquement. Ensuite, seule des données sont échangées entre le client et le serveur, généralement au format JSON (je précise minifié, ceci afin d'obtenir les meilleures performances possibles).

Quand utiliser quoi ?

• Lorsque vos utilisateurs surfent très peu sur votre site et qu'ils ont besoin d'accéder à du contenu rapidement, alors la WebApp est la solution à privilégier - le coût de chargement de la page étant réduit à l'ensemble des informations servant l'utilisateur).
• À l'inverse si vos utilisateurs sont connectés pendant dès heures sur votre site et qu'ils passent sans arrêt de page en page, alors la SPA est à privilégier - tout simplement parce que le coût de téléchargement de la première page (qui contient en réalité toutes les pages du site) est alors rentabilisé par le surf de longue durée.

Quelles technos pour des SPA ?

Les plus connues sont rangées par ordre décroissant d'importance sur le marché :

• Angular
• Vue JS
• React JS (+ redux)
• Ember JS
• Aurelia (qui est de loin ma préférée)