Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

C’est quoi une Single Page Application (SPA)?

Poster un commentaire

Voici un exemple de terme que tout le monde croit connaître, mais mis au défi de le définir, lors d’un entretien par exemple, les difficultés surgissent rapidement.

Est-ce vraiment une application avec une seule page?  Regardez alors cet exemple proposé par John Papa:

http://cc-ng-z.azurewebsites.net/#/

Cette application gère le planning d’orateurs lors d’un congrès.

 

On a des menus qui permettent de naviguer au delà de la page d’accueil, si on clique sur orateur on voit s’afficher son planning….

En apparence on a plusieurs pages, mais pourtant il s’agit d’une application SPA!

 

La difficulté que l’on éprouve à définir ce qu’est une SPA est entièrement là: un problème de vocabulaire. Peut être que l’expression SPA est mal choisie comme le suggère John Papa dans cet article qui inspire le mien:

http://www.johnpapa.net/pageinspa/

Nous allons essayer de clarifier les choses.

P comme Page

Dans une application web traditionnelle (c’est à dire pas SPA) Le serveur interprète chaque requête et fournit deux choses:

  • le html
  • les données
  • les états

Le rôle du client est de recueillir ces information, en organiser le rendu et surveiller les interactions avec l’utilisateur pour les restituer au serveur sous la forme d’une requête.

Le serveur se même de tout, y compris de la logique d’IHM (du moins une partie).

Dans le monde des SPA les choses sont différentes.

Le serveur

  • fournir les ressources au client

Le client

  • gère la partie IHM
  • réclame les ressource à la demande au serveur de façon asynchrone
  • gère les états

Lors de la première requête, le serveur renvoie effectivement un HTML. Cet HTML est appelé le modèle.

Sa particularité est de ne contenir que les parties statiques du site, c’et à dire celles qui changent rarement comme la mise en page, les entête et pied de page, les menus, des scripts JavaScript, des CSS…

Cette page initiale est la seule que le serveur produira. C’est cela qui définit le S et le P.

P comme vue

Oui, mais l’exemple montre pourtant que du html change selon la navigation dans le site?

C’est exact, mais les choses sont différentes. On ne charge pas une page complète, on charge des fragments de page, c’est à dire des vues dans le vocabulaire emprunté à MVC.

Intéressons nous un peu à ces ressources que réclame le client au serveur.

Note: certains auteurs parlent de données, mais je préfère le terme ressource qui est plus général. On va voir pourquoi c’est important.

 

On pense bien entendu aux données (par exemple la liste des orateurs). Celle-ci sont traditionnellement remonté en JSON ou plus rarement en XML. Mais pas seulement. Ces ressources sont aussi des fragments d’HTML, de JavaScript, de CSS… C’est pourquoi je préfère éviter le terme de données, trop connoté.

La différence avec la page initiale est qu’elle sont réclamée à la demande du client. Le serveur ne les pousse pas spontanément.

 

Donc si vous devez définir SPA, après avoir expliqué ce que veut dire l’acronyme, on peut ajouter que le P représente la page initialement chargée (le modèle ou shell). Le reste ce sont des vues, c’est à dire des fragments de code Html, des ressources, chargées à la demande par le client.

 

 

 

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s