📐 Construire une app en JS
22. Une première UI

Une première UI

Tout le code écrit jusqu'à présent concerne le backend. Notre App, qui accède à la base de données au travers des dépendances, s'exécutera sur le serveur hébergeant notre web application.

Nos commandes modifient l'état du système, qui sera (bientôt) stocké dans une base de données.

Pour faire une première démo, un vaste chantier nous attend : API, contrôleurs, etc.

Mais avec JavaScript, la séparation backend / frontend est moins nette.

Backend dans le frontend

Pour notre première démo, qu'est-ce qui empêche de faire tourner le backend dans le navigateur ?

Rien.

Puisque nous n'avons pas de base de données, pas d'accès au système de fichiers, il est possible d'exécuter nos commandes dans le navigateur !

Évidemment, c'est temporaire. Nous verrons bientôt comment bénéficier de frameworks permettant de gérer le backend et le frontend avec une abstraction du réseau qui les sépare.

Mais pour aujourd'hui, concentrons-nous sur la démo à notre expert métier.

Anatomie d'une page

Une web application classique comporte des pages. Chaque page comporte des composants.

Et si notre application ne comportait qu'une seule page, quelle serait-elle ?

Revenons à notre premier test d'une réservation de 3 nuitées par un utilisateur déjà inscrit :

const app = new App(testDependencies())
 
const session = await app.run([
    login({email:"faketenant@mail.com", password:"secret"}),
    book({
        accommodationId:"accommodation-1",
        adults:2, children:3,
        from : "2023-06-22",
        to :   "2023-06-25",
    })
]);

Pour faire tenir cela en une seule page, on pourrait envisager :

  • un bandeau (header) contenant le nombre de personnes (2 adultes, 3 enfants) et les dates de la location (du 22/06 au 25/06)
  • une zone centrale indiquant les logements, avec un call-to-action pour chacun d'entre eux permettant de faire la réservation
 ┌──────────────────────────────────────────────────────────┐
 │  du 22/06 au 25/06      2 adultes, 3 enfants    [ 🔍 ]   │   <- header
 ├──────────────────────────────────────────────────────────┤
 │  ┌────────────┐  ┌────────────┐  ┌────────────┐          │
 │  │   photo    │  │   photo    │  │   photo    │          │
 │  │ Villa ...  │  │ Gîte ...   │  │ Chalet ... │          │   <- liste des
 │  │ 230 €/nuit │  │ 90 €/nuit  │  │ 180 €/nuit │          │      logements
 │  │ [Réserver] │  │ [Réserver] │  │ [Réserver] │          │
 │  └────────────┘  └────────────┘  └────────────┘          │
 └──────────────────────────────────────────────────────────┘

À ce stade, on ne filtre pas encore la liste des logements en excluant ceux qui sont trop petits pour le nombre d'occupants, ou indisponibles aux dates sélectionnées.

Les 3 fonctions d'une page

Il y a beaucoup de façons de développer la partie front-end.

Au plus simple, on générerait une page HTML dynamique comportant la liste de tous les hébergements. Et le bouton de réservation enverrait une requête HTTP POST à un contrôleur du backend pour invoquer notre commande book().

C'est ainsi que vous avez appris le développement Web. Avec l'architecture MVC :

  • M = le modèle. Les données et les règles métier qui les gouvernent. (Beaucoup de frameworks ont réduit le modèle à une couche d'accès à la base de données : c'est un appauvrissement du terme, et l'origine de bien des contrôleurs obèses.)
  • C = le contrôleur. Il reçoit les requêtes HTTP, invoque les commandes et les requêtes.
  • V = la vue. Le contenu HTML de la page demandée, calculé à partir de ce que lui donne le contrôleur.

Je vous propose une approche différente, comportant 3 fonctions :

  • L = Loader. Une fonction qui charge les données nécessaires à la page
  • R = Render. Une fonction qui génère le HTML à partir des données envoyées par le loader
  • A = Action. Une fonction qui invoque une commande pour modifier l'état du système

Les 3 fonctions sont invoquées successivement, dans une boucle :

   LOADER --- alimente ---> RENDER
      |                        |
 re-déclenche              déclenche
      ^                        |
      |                        |
      ----------- ACTION <------

Lorsque l'utilisateur affiche une page, il exécute le loader. Celui-ci fournit les données au render en charge d'afficher la page.

Lorsque l'utilisateur clique sur un bouton "Réserver", cet événement exécute l'action qui invoque la commande, et ré-déclenche le loader si l'action est réussie.

C'est un modèle très simple, qui se décline facilement dans la plupart des frameworks modernes.

Pour commencer avec ce modèle, créons une application React.

21. Refactor : faire émerger les valeurs23. Le monorepo