Qu'est-ce qu'une application sur une seule page?

Les applications Web modernes sont également appelées applications à page unique. Qu'est-ce que ça veut dire?

Dans le passé, lorsque les navigateurs étaient beaucoup moins performants qu'aujourd'hui et que les performances de JavaScript étaient médiocres, chaque page provenait d'un serveur. Chaque fois que vous avez cliqué sur quelque chose, une nouvelle demande a été faite au serveur et le navigateur a ensuite chargé la nouvelle page.

Seuls les produits très innovants fonctionnaient différemment et expérimentaient de nouvelles approches.

Aujourd'hui, popularisée par les frameworks JavaScript frontend modernes comme React, une application est généralement construite comme une application d'une seule page: vous ne chargez que le code de l'application (HTML,CSS,JavaScript) une fois, et lorsque vous interagissez avec l'application, ce qui se passe généralement est que JavaScript intercepte les événements du navigateur et au lieu de faire une nouvelle requête au serveur qui renvoie ensuite un nouveau document, le client demande du JSON ou effectue une action sur le serveur mais la page que l'utilisateur voit n'est jamais complètement effacée et se comporte davantage comme une application de bureau.

Les applications à page unique sont construites en JavaScript (ou au moins compilées en JavaScript) et fonctionnent dans le navigateur.

La technologie est toujours la même, mais la philosophie et certains éléments clés du fonctionnement de l'application sont différents.

Exemples d'applications sur une seule page

Quelques exemples notables:

  • Gmail
  • Google Maps
  • Facebook
  • Twitter
  • Google Drive

Avantages et inconvénients des SPA

Un SPA se sent beaucoup plus rapide pour l'utilisateur, car au lieu d'attendre que la communication client-serveur se produise et d'attendre que le navigateur rende à nouveau la page, vous pouvez maintenant avoir un retour instantané. C'est la responsabilité du créateur de l'application, mais vous pouvez avoir des transitions et des spinners et tout type d'amélioration UX qui est certainement meilleur que le flux de travail traditionnel.

En plus de rendre l'expérience plus rapide pour l'utilisateur, le serveur consommera moins de ressources car vous pouvez vous concentrer sur la fourniture d'une API efficace au lieu de créer les mises en page côté serveur.

Cela le rend idéal si vous créez également une application mobile au-dessus de l'API, car vous pouvez réutiliser complètement votre code côté serveur existant.

Les applications à page unique sont faciles à transformer en applications Web progressives, ce qui vous permet de fournir une mise en cache locale et de prendre en charge des expériences hors ligne pour vos services (ou un meilleur message d'erreur si vos utilisateurs doivent être en ligne).

Les SPA sont mieux utilisés lorsqu'il n'y a pas besoin de référencement (optimisation pour les moteurs de recherche). Par exemple pour les applications qui fonctionnent derrière une connexion.

Les moteurs de recherche, tout en s'améliorant chaque jour, ont encore du mal à indexer les sites construits avec une approche SPA plutôt que les pages traditionnelles rendues par le serveur. C'est le cas des blogs. Si vous comptez vous fier aux moteurs de recherche, ne vous souciez même pas de créer une application à une seule page sans avoir également une partie serveur rendue.

Lors du codage d'un SPA, vous allez écrire beaucoup de JavaScript. Étant donné que l'application peut durer longtemps, vous devrez accorder beaucoup plus d'attention aux fuites de mémoire possibles - si dans le passé votre page avait une durée de vie comptée en minutes, maintenant un SPA peut rester ouvert pendant des heures à un temps et s'il y a un problème de mémoire qui va augmenter l'utilisation de la mémoire du navigateur de beaucoup plus et cela va causer une expérience désagréablement lente si vous ne vous en occupez pas.

Les SPA sont parfaits pour travailler en équipe. Les développeurs backend peuvent simplement se concentrer sur l'API, et les développeurs frontend peuvent se concentrer sur la création de la meilleure expérience utilisateur, en utilisant l'API intégrée au backend.

Par contre, les applications à page unique reposent fortement sur JavaScript. Cela peut rendre l'utilisation d'une application exécutée sur des périphériques à faible consommation une expérience médiocre en termes de vitesse. En outre, certains de vos visiteurs peuvent simplement avoir JavaScript désactivé, et vous devez également tenir compte de l'accessibilité pour tout ce que vous créez.

Remplacer la navigation

Puisque vous supprimez la navigation par défaut du navigateur, les URL doivent être gérées manuellement.

Cette partie d'une application s'appelle le routeur. Certains frameworks s'en occupent déjà pour vous (comme Ember), d'autres nécessitent des bibliothèques qui feront ce travail (commeRouteur React).

Quel est le problème? Au début, c'était une réflexion après coup pour les développeurs qui créaient des applications à page unique. Cela a causé le problème courant du «bouton de retour cassé»: lors de la navigation dans l'application, l'URL n'a pas changé (car la navigation par défaut du navigateur a été piratée) et en appuyant sur le bouton de retour, une opération courante que les utilisateurs font pour revenir à l'écran précédent, peut se déplacer vers un site Web que vous avez visité il y a longtemps.

Ce problème peut maintenant être résolu en utilisant leAPI historiqueproposé par les navigateurs, mais la plupart du temps, vous utiliserez une bibliothèque qui utilise cette API en interne, commeRouteur React.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: