<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Programmation Web Avancée Architecture MVC et Frameworks</title>
<meta name="cours-n" content="3">
<meta name="author" content="Rémi Emonet">
<meta name="venue" content="PWA M1 DSC">
<meta name="date" content="2017">
<meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
<style type="text/css">
li blockquote {
padding: 5px;
font-size: 20px;
}
blockquote {
border: 1px solid darkgrey;
border-radius: 5px;
padding: 0;
font-size: 30px;
font-style: italic;
}
blockquote p {
margin: 0;
padding: 30px;
}
blockquote p cite {
font-size: 20px;
}
</style>
<!--
<script src="deck.js/extensions/includedeck/load.js"></script>
<script src="extensions/slides-dev.js"></script>
-->
<script src="extensions/deck-packed.js"></script>
<script src="extensions/slides.js"></script>
<script>go()</script>
</head>
<body>
<div class="deck-container">
<div class="deck-loading-splash" style="background: black; color: chartreuse;"><span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while our marmots are preparing the hot chocolate…</span></div>
<section class="smart">
# @chunk: chunks/title.md
# Questions ? <br/> Commentaires ? {no-print}
# Projets !? {no-print}
# @chunk: chunks/objectives.md
## Programmation Web Avancée <span>{var-cours-n}</span> : 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
- <blockquote>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).</blockquote>
- <blockquote>Un framework se distingue d'une simple bibliothèque logicielle :</blockquote> // 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
<!-- MVC de base -->
# @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
- <blockquote>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.</blockquote>
## 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
<!-- MVC Web Spring (et un peu Java EE) -->
# @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
<p> </p>
@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)
<!--
## what we prog
## what we keep under the carpet
## what file/techon will do what
## step by step
-->
<!-- key points -->
## Points Clés {key deck-status-fake-end}
</section>
<!-- deck.status snippet -->
<p class="deck-status deck-progress-10"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> − <span class="var-author">will be replaced by the author</span> − <span class="var-title">will be replaced by the title</span></p>
<a data-progress-size=": spe.top(15, 555); height: 45*designRatio; left: slide.right - 90*designRatio; width: 90*designRatio" class="ccby" href="http://en.wikipedia.org/wiki/Creative_Commons_license" title="This work is under CC-BY licence." target="_blank"></a>
<a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>
</div>
<!-- clicky Cla -->
<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(100779706);
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
<!-- Histats.com END -->
</body>
</html>