Une première UI

Tout le code écris 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 modifie 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 aux système de fichiers, il est possible d'exécuter nos commandes dans le navigateur !

Evidemment, c'est temporaire. Nous verrons bientôt comment bénéficer 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({
        accomodationId:"accomodation-1", 
        adults:2, children:3, 
        from : new Date("2023-06-22"), 
        to :   new Date("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 la date de la location (du 22/06 au 25/05)
une zone centrale indiquant les logements, avec un call-to-action pour chacun d'entre eux permettant de faire la réservation

[mettre un schema ici]

A 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çon 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 = modèle. L'accès à la base de données.
C = le contrôleur. Qui 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é dynamiquement par le contrôleur.

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

L = Loader. Une fonction qui charge les données nécessaire à 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 à la plupart des frameworks modernes.

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

20 Requetes 22 Monorepo