Please wait, while our marmots are preparing the hot chocolate…
# @chunk: chunks/title.md # Questions ?
Commentaires ? {no-print} # Projets !? {no-print} # @chunk: chunks/objectives.md ## Programmation Web Avancée {var-cours-n} : Plan {#plan overview} - Frameworks {framework} - Modèle-Vue-Contrôleur {mvc} - MVC Web et Spring MVC {mvcweb} - MVC Web en Pratique {mvcdemo} # @copy:#plan # @copy:#plan: %+class:inred: .framework ## Qu'est-ce qu'un framework ? {libyli} - Wikipedia // discutons de cette définition -
Un framework est un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel (architecture).
-
Un framework se distingue d'une simple bibliothèque logicielle :
// selon vous ? bien souvent : - le framework est actif {slide} - inversion de contrôle, « main » dans le framework, etc - Hollywood Principle: "Don't call us, we'll call you." - flux de contrôle géré par le framework - le comportement par défaut est utile {slide} // seulement qq - le framework est extensible {slide} - fonctions de rappel (callbacks), sous-classes personnalisées, etc - le framework est non-modifiable {slide} - Traductions possibles : - cadre d'applications, canevas, cadriciel, socle d'applications - Utilité ? // coûts, fiabilité, évolutivité ## Exemples de frameworks - Frameworks Web (non exhaustif) - Java : JavaEE, JSF, **Spring**, **JPA**, Hibernate, … - HTML/CSS : Bootstrap, **picnic.css**, … - Javascript : Angular, Ember.js, backbone.js, React.js, **Vue.js**, … - Scala : play, … - Python : django, … - Ruby : rails, … - Groovy : grails, … - PHP : symfony, … - Autres{slide} - JavaSE, JavaME, langage de programmations - Swing, Eclipse RCP, Cocoa - Drupal, DjangoCMS, Joomla - DirectShow, Gstreamer # @copy:#plan: %+class:inred: .mvc ## Patron MVC Originel {libyli} - Model-View-Controller (MVC) // aux pluriels dans le papier - 1978 : Trygve Reenskaug // depuis, aussi DCI - Contexte : applications graphiques classiques - Model : données et logique métier - correspond au modèle mental de l'utilisateur - View : afficher/filtrer les informations du modèle - connaît la structure du modèle - peut aussi agir sur le modèle - Controller : gérer les actions utilisateurs - agit sur les vues et/ou modèle -
A controller is the link between a user and the system. … The controller receives such user output, translates it into the appropriate messages and pass these messages on to one or more of the views.
## Patron MVC en Java Swing {libyli} // qui connaît swing ? - Modèle - objets (java beans) observables (patron observateur) - ex : ButtonModel, BoundedRangeModel, ListModel, Document // du plus GUI au plus pure data - Vue - objets graphiques - écoute le modèle (patron observateur) et se met à jour - ex : JButton, JCheckBox, JSlider, JList, JTextField // plusieurs vues pour un type de modèle - Contrôleur - au niveau de la fenêtre // en gros - routage des événements (aiguillage) - événements clavier ⇒ composant qui a le focus - événements souris ⇒ composant sous le curseur - au niveau de chaque composant // fusionné avec la vue, choix des concepteurs, plus logique - action sur le modèle du composant - transmission à un « listener » défini par le programmeur ## Objectifs du MVC - MVC = Model-View-Controller - Séparation du système en trois types d'éléments{slide} - modèle : données et logique/règles métier - vues : afficher et filtrer les données du modèle - contrôleurs : gérer les actions utilisateurs - Séparation de responsabilités{slide} - le modèle gère les données métier, il ne connaît rien d'autre - les vues connaissent la structure du modèle - les vues ne contiennent pas de logique métier - les contrôleurs interprètent des actions utilisateurs - les contrôleurs agissent sur le modèles et/ou les vues # @copy:#plan: %+class:inred: .mvcweb ## Interaction Client-Serveur @svg: media/client-server-mvc/client-server.svg 700px 400px - @anim: #user |#client |#server |#r1 |#r2 |#a2 |#a1 |#r3 |#r4 |#a4 |#a3 ## Qu'est ce qu'un serveur Web {libyli} - Un programme - Écoute sur un port réseau (80 par défaut) - Reçoit des requêtes utilisant le protocole HTTP - Répond avec une ressource en utilisant le protocole HTTP - Différents type de ressources - pages HTML - CSS - images - JSON - texte brute - … ## MVC avec Servlets et JSP {libyli} - Modèle - JavaBeans et objets - persistance avec SQL (JDBC) // base de donnée - Vues // la vue accède au modèle via les EL etc - JSP (compilées en servlets) - avec EL et tags JSTL - Contrôleur - descripteur de « routes » (dans `WEB-INF/web.xml`) - servlet normale (`.java`) - interprète la requête - extrait une partie du modèle - ViewModel : petit morceau de modèle passé à la vue par le contrôleur // c'est pas du full contrôleur en vrai mais plus un MVVM pragmatique - aiguille vers les JSP ## MVC Web... {libyli} // aparté avant ## Aparté : Annotations Java {libyli} - Méta-data sur du code Java {libyli} - utilisable par le compilateur - potentiellement utilisable à l'exécution (introspection) - une annotation a un type, - ex : `@Override void superMethod(@NotNull String str) { ... }` - et possiblement des paramètres, - ex : `@SuppressWarnings(value = "unchecked")` - Qu'est ce qui peut être annoté - méthodes, classes, attributs - paramètres, variables locales - En Java 8, encore plus - `new @... CustomObject()` - `s = (@NotNull String) o` - `class ... implements @... CustomObject` - `... throws @... Exception` ## MVC avec Spring dans ce cours {libyli} - Modèle - JavaBeans (objets Java) - persistance avec JPA et Repositories de Spring Data - Contrôleur - description de route : annotations Java - méthodes Java, avec injection de paramètres - classe `Model` pour le ViewModel - Vue - templates Thymeleaf - accès automatique au ViewModel ## Interaction Client Serveur et MVC

 

@svg: media/client-server-mvc/server-mvc.svg 700px 400px - @anim: #user, #client |#server |#r0 |#a0 |#s0,#router |#s1,#controller |#s2,#service |#s3,#db |#s4 |#s5,#view |#s6 |#s7 |#legend # @copy:#plan: %+class:inred: .mvcdemo ## Démo : que programmer ? ## Démo : ce que nous ne ferons pas ! - {comment} - comprendre le build et la création de projet - les aspects base de donnée - l'injection de dépendances ## Démo : remettre les technologies à leur place - Maven - Spring - Spring Boot - Thymeleaf - Spring Web MVC - javax.inject (@Inject) - (JPA) - (H2) ## Points Clés {key deck-status-fake-end}

/ will be replaced by the authorwill be replaced by the title