Programmation Web Avancée Architecture MVC et Frameworks

Programmation Web Avancée 3 : Plan
Programmation Web Avancée
Architecture MVC et
Frameworks
Frameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
5 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : Plan
Frameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
Qu'est-ce qu'un framework ?
Wikipedia
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 :
le framework est actif
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
le framework est extensible
fonctions de rappel (callbacks), sous-classes personnalisées, etc
le framework est non-modifiable
Traductions possibles :
cadre d'applications, canevas, cadriciel, socle d'applications
Utilité ?
6 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
7 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Exemples de frameworks
Programmation Web Avancée 3 : Plan
Frameworks Web (non exhaustif)
Java : JavaEE, JSF, Spring, JPA, Hibernate, …
HTML/CSS : Bootstrap, picnic.css, …
Javascript : AngularJS, Ember.js, backbone.js, React.js, …
Scala : play, …
Python : django, …
Ruby : rails, …
Groovy : grails, …
PHP : symfony, …
Frameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
Autres
JavaSE, JavaME, langage de programmations
Swing, Eclipse RCP, Cocoa
Drupal, DjangoCMS, Joomla
DirectShow, Gstreamer
8 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
9 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Patron MVC Originel
Model-View-Controller (MVC)
Patron MVC en Java Swing
Modèle
1978 : Trygve Reenskaug
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
objets (java beans) observables (patron observateur)
ex : ButtonModel, BoundedRangeModel, ListModel, Document
Vue
objets graphiques
écoute le modèle (patron observateur) et se met à jour
ex : JButton, JCheckBox, JSlider, JList, JTextField
Contrôleur
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.
au niveau de la fenêtre
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
action sur le modèle du composant
transmission à un « listener » défini par le programmeur
10 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
11 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Objectifs du MVC
Programmation Web Avancée 3 : Plan
MVC = Model-View-Controller
Frameworks
Séparation du système en trois types d'éléments
Modèle-Vue-Contrôleur
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
MVC Web et Spring MVC
MVC Web en Pratique
Séparation de responsabilités
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
12 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
13 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Interaction Client-Serveur
Qu'est ce qu'un serveur Web
Un programme
Écoute sur un port réseau (80 par défaut)
marque page : google
page affichée
saisie : « jean dujardin »
+ click "chercher"
page affichée
GET http://www.google.com
contenu HTML
GET ...?q=jean%20dujardin
contenu HTML
14 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
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
…
15 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
MVC avec Servlets et JSP
MVC Web...
Modèle
JavaBeans et objets
persistance avec SQL (JDBC)
Vues
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
aiguille vers les JSP
16 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
17 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Aparté : Annotations Java
MVC avec Spring dans ce cours
Méta-data sur du code Java
Modèle
utilisable par le compilateur
potentiellement utilisable à l'exécution (introspection)
une annotation a un type,
ex : @Override void superMethod(@NotNull String str)
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
et possiblement des paramètres,
ex : @SuppressWarnings(value = "unchecked")
Qu'est ce qui peut être annoté
Vue
méthodes, classes, attributs
paramètres, variables locales
templates Thymeleaf
accès automatique au ViewModel
En Java 8, encore plus
new @... CustomObject()
s = (@NotNull String) o
class ... implements @... CustomObject
... throws @... Exception
18 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
19 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Interaction Client Serveur et MVC
Programmation Web Avancée 3 : Plan
Frameworks
Modèle-Vue-Contrôleur
0
GET ...?q=jean%20dujardin
Router
(contrôleur)
MVC Web en Pratique
contenu HTML
1
7
Contrôleur
Légende:
- 0, 1 : requête HTTP
- 2 : interogation du modèle
- 3/4 : communication avec la base de donnée ou l'ORM
- 5 : envoi du ViewModel (modèle de vue)
- 6 : vue rendue (HTML, JSON, ...)
- 7 : réponse HTTP
2
MVC Web et Spring MVC
6
5
Vue
4
Repository
Services
(modèle)
DB
3
20 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
21 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Démo : que programmer ?
Démo : ce que nous ne ferons pas !
22 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
23 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Démo : remettre les technologies à leur
place
Points Clés
Maven
Spring
Spring Boot
Thymeleaf
Spring Web MVC
javax.inject (@Inject)
(JPA)
(H2)
24 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
25 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks