Post on 17-Apr-2018
Programmation Web AvancéeArchitecture MVC et
Frameworks
5 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : PlanFrameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
6 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : PlanFrameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
7 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Qu'est-ce qu'un framework ?Wikipedia
Un framework est un ensemble cohérent de composants logicielsstructurels, qui sert à créer les fondations ainsi que les grandes lignes detout ou d’une partie d'un logiciel (architecture).
Un framework se distingue d'une simple bibliothèque logicielle :
le framework est actifinversion de contrôle, « main » dans le framework, etcHollywood Principle: "Don't call us, we'll call you."flux de contrôle géré par le framework
le comportement par défaut est utilele 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é ?
8 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Exemples de frameworksFrameworks 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, …
AutresJavaSE, JavaME, langage de programmationsSwing, Eclipse RCP, CocoaDrupal, DjangoCMS, JoomlaDirectShow, Gstreamer
9 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : PlanFrameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
10 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Patron MVC OriginelModel-View-Controller (MVC)
1978 : Trygve ReenskaugContexte : applications graphiques classiques
Model : données et logique métiercorrespond au modèle mental de l'utilisateur
View : afficher/filtrer les informations du modèleconnaît la structure du modèlepeut aussi agir sur le modèle
Controller : gérer les actions utilisateursagit sur les vues et/ou modèle
A controller is the link between a user and the system. … The controllerreceives such user output, translates it into the appropriate messagesand pass these messages on to one or more of the views.
11 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Patron MVC en Java SwingModèle
objets (java beans) observables (patron observateur)ex : ButtonModel, BoundedRangeModel, ListModel, Document
Vueobjets graphiquesécoute le modèle (patron observateur) et se met à jourex : JButton, JCheckBox, JSlider, JList, JTextField
Contrôleurau 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 composantaction sur le modèle du composanttransmission à un « listener » défini par le programmeur
12 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Objectifs du MVCMVC = Model-View-Controller
Séparation du système en trois types d'élémentsmodèle : données et logique/règles métiervues : afficher et filtrer les données du modèlecontrôleurs : gérer les actions utilisateurs
Séparation de responsabilitésle modèle gère les données métier, il ne connaît rien d'autreles vues connaissent la structure du modèleles vues ne contiennent pas de logique métierles contrôleurs interprètent des actions utilisateursles contrôleurs agissent sur le modèles et/ou les vues
13 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : PlanFrameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
14 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Interaction Client-Serveur
marque page : googleGET http://www.google.com
contenu HTMLpage affichée
saisie : « jean dujardin »+ click "chercher"
GET ...?q=jean%20dujardin
contenu HTMLpage affichée
15 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Qu'est ce qu'un serveur WebUn 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 ressourcespages HTMLCSSimagesJSONtexte brute…
16 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
MVC avec Servlets et JSPModèle
JavaBeans et objetspersistance avec SQL (JDBC)
VuesJSP (compilées en servlets)avec EL et tags JSTL
Contrôleurdescripteur de « routes » (dans WEB-INF/web.xml )servlet normale ( .java )
interprète la requêteextrait une partie du modèle
ViewModel : petit morceau de modèle passé à la vue par le contrôleuraiguille vers les JSP
17 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
MVC Web...
18 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Aparté : Annotations JavaMéta-data sur du code Java
utilisable par le compilateurpotentiellement 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, attributsparamètres, variables locales
En Java 8, encore plusnew @... CustomObject()s = (@NotNull String) oclass ... implements @... CustomObject... throws @... Exception
19 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
MVC avec Spring dans ce coursModèle
JavaBeans (objets Java)persistance avec JPA et Repositories de Spring Data
Contrôleurdescription de route : annotations Javaméthodes Java, avec injection de paramètresclasse Model pour le ViewModel
Vuetemplates Thymeleafaccès automatique au ViewModel
20 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Interaction Client Serveur et MVC
GET ...?q=jean%20dujardin
contenu HTML
Router(contrôleur)
DB
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
Contrôleur Vue
RepositoryServices(modèle)
1
2
3
4
7
5
6
0
21 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Programmation Web Avancée 3 : PlanFrameworks
Modèle-Vue-Contrôleur
MVC Web et Spring MVC
MVC Web en Pratique
22 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Démo : que programmer ?
23 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Démo : ce que nous ne ferons pas !
24 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks
Démo : remettre les technologies à leurplace
Maven
Spring
Spring Boot
Thymeleaf
Spring Web MVC
javax.inject (@Inject)
(JPA)
(H2)
Points Clés
25 / 25 − Rémi Emonet − Programmation Web Avancée Architecture MVC et Frameworks