Model-View-Controller

Rappel: promesses et asynchronisme
05:33

Certaines opérations nécéssitent du temps avant que la réponse arrive (e.g fetch). Pour ne pas bloquer le main thread, elles retournent une promesse de réponse.

Plus tard, la promesse sera résolue, et fournira la réponse attendue

ES2017: async/await

Une fonction marquée async peut être "mise en pause". Chaque instruction marquée await libère le main thread jusqu'à ce qu'elle puisse retourner le résultat de la promesse. La fonction elle-même est modifiée pour retourner une promesse.

ORM
05:33

Objectif

Manipuler les entrées de la base de données comme objets.

Example (Créer un utilisateur avec un ORM)

Questions

  • Quelles sont les avantages et les inconvénients de cette approche?
  • Pourquoi emploie-t-on l'orienté objet?

Un ORM simple
05:33

Instructions

Remark

Cet ORM est écrit à des fins didactiques.

Modèle: configuration
05:33

La classe Modèle génère les requêtes SQL à votre place, mais elle a besoin de quelques informations

Ceci se fait par l'héritage:

Modèle: utilisation
05:33

Example (Créer une entrée)

Example (Supprimer une entrée)

Example (Modifier une entrée)

Example (Lister des entrées)

Code de model.js
05:33

MVC
05:33

Definition

MVC est un design pattern qui sépare les modèles et les vues des contrôleurs.

Modèle
Données et logique business
Vue
Interface de l'utilisateur
Contrôleur
Orchestre la vue et le modèle

L'objectif est d'écrire du code maintenable et bien organisé.

Remark

Nous allons implémenter ce design pattern purement côté serveur. Ceci est en opposition avec la tendance actuelle de faire beaucoup de travail côté client.

MVC en pratique
05:33

  • models/: un fichier par modèle table
  • views/: templates EJS.
  • controllers/

Exemple de question d'examen
05:33

Votre nom est Mohamed Henni et une partie non négligeable de votre travaille consiste à régulièrement acheter des télévisions. Vous aimeriez une interface Web qui tienne deux listes: une liste de télévisions usées, et une liste de télévisions que vous aimeriez acheter. Votre interface doit afficher le montant total dépensé en télévisions.

Pour chaque télévision, vous aimeriez afficher la marque, le prix et la taille. Pour les télévisions achetées, vous aimeriez également indiquer si elle est encore fonctionnelle ou sinon comment la télévision a été cassée (batte, tentative de roue, etc.).

Une télévision est tout d'abord ajoutée à la liste des télévisions désirées. Cette liste comporte des boutons pour indiquer que la télévision a été achetée. En cliquant sur le bouton, la télévision passe à la liste des télévisions achetées, mais fonctionnelles. Il sera ensuite possible de préciser comment elle aura été cassée.

  • Structure MVC avec une table SQL
  • Publier sur votre VM
  • Bonus: si c'est une single page application
  • Bonus++: si c'est une single page application quand l'utilisateur peut exécuter du Javascript, mais l'application fonctionne quand même sans Javascript.