Les Single Page Applications

Programmation web - Client riche

Objectifs

  • Comprendre le routing côté client
  • Comprendre la différence entre application multipage et application monopage
  • Implémenter une application monopage

Le routing

Le routing

http://monsite.com/ => page d'accueil

http://monsite.com/user/login => page de connexion

http://monsite.com/products => page des produits

http://monsite.com/products/1 => page du produit 1

Correspondance entre une URL et une page

Ce travail est effectué par un "router"

Le routing

  • Déterminer le document HTML à afficher pour une requête donnée (selon son path)
  • Rediriger une requête selon certains critères (utilisateur authentifié ?)
  • Générer des URLs en fonction d'une route et de paramètres

Un router permet de :

Les applications multipages

Mutiple Pages Application

Mutiple Pages Application

  • Le serveur génère le HTML de chaque page séparément pour chaque requête
  • Mise en cache plus simple de chaque page
  • Efficace pour le référencement
  • A chaque click sur un lien ou envoi d'un formulaire, la page est rechargée
  • Expérience très "web" à une époque où les gens ont l'habitude d'utiliser des apps avec une navigation fluide sur leurs téléphones

👍️

👎️

Les applications monopage

Single Page Application

Single Page Application

  • Le serveur répond à toutes les requêtes avec le même document HTML (quasi vide)
  • Mise en cache plus compliquée
  • Référencement plus compliqué (mais pas impossible)
  • Le routing est assuré côté client
  • Pas de rechargement de page
  • Récupération des données via des requêtes asynchrones
  • UX plus orientée "app"

👍️

👎️

Routing côté client

Récupérer l'URL courante

window.location

{
  href: "https://slides.com/drazik/programmation-web-client-riche-spa/edit",
  origin: "https://slides.com",
  protocol: "https:",
  host: "slides.com",
  hostname: "slides.com",
  port: "",
  pathname: "/drazik/programmation-web-client-riche-spa/edit",
  search: "",
  hash: ""
}

Manipuler l'historique

window.history

{
  length: 17,
  scrollRestoration: "auto",
  state: null,
  back: () => { /* ... */ },
  forward: () => { /* ... */ },
  go: () => { /* ... */ },
  pushState: () => { /* ... */ },
  replaceState: () => { /* ... */ },
}

Faisable mais pas trivial (voir cet exemple)

 

On va donc utiliser une librairie : Navigo

Créer un router en JS

Navigo

npm install navigo

Navigo : définir des routes

Navigo : les hooks

On peut associer une fonction à certains événements de cycle de vie du router :

 

  • avant d'entrer dans une route : before
  • après être entré dans une route : after
  • au moment de quitter une route : leave
  • au moment d'entrer à nouveau dans la route courante : already

Navigo : les hooks (global)

Navigo : les hooks (global)

Navigo : les hooks (par route)

Le router expose une fonction navigate qui permet de changer de route programmatiquement

Navigo : changer de route programmatiquement

Navigo : changer de route programmatiquement

Récap !

  • Deux types d'applications : multi page ou mono page
  • Les MPA proposent une UX plus "web" (chargements de pages) mais ont l'avantage du référencement simple
  • Les SPA propose une UX plus "application" mais ont le désavantage d'un référencement plus compliqué
  • Pour faire une SPA, il faut s'occuper du routing côté client
  • Il est possible d'écrire son propre router, mais c'est difficile et d'autres l'ont déjà fait : Navigo

Client riche - Les Single Page Applications

By Cyrille Perois

Made with Slides.com

Client riche - Les Single Page Applications

  • 743

More from Cyrille Perois