paris jug - backbone.js en environnement java - laurent dutheil et frederic merizen
Post on 26-May-2015
534 Views
Preview:
TRANSCRIPT
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Backbone.js en environnement Java
Laurent Dutheil Frederic Merizen
Consultants
OCTO Technology
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 3
« Comment une équipe Java développe une application JavaScript et l’intègre dans son
environnement… »
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 4
Intervenants
Laurent DUTHEIL
Consultant chez OCTO Technology depuis 2010
Diplômé de l'université de Lille I en Intelligence Artificielle et Génie Logiciel
Forte expérience des architectures JEE : audit d’architecture, étude de cadrage, supervision métier, tech-lead, Proof of Concept
Rompu aux méthodes agiles
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 5
Intervenants
Frederic MERIZEN
Consultant chez OCTO Technology depuis 2011
Diplômé de Supélec
Technical leader, développeur et agilitateur sur des mission Java et Front
Co-anime la communauté des technical leaders chez OCTO
Membre de l’équipe d’organisation de la conférence Agile France
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 6
Motivation
Même pour écrire un nouvelle application, on part très rarement d’une page blanche
Équipe en place
Environnements de développement
Applications existantes
Tirer parti des forces en place pour innover
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Historique des application web
Toujours plus riche et réactif
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 8
MVC côté serveur
Model View
Controler
<html>
Client
Serveur
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 9
Ajax
Model View
Controler
<html>+js
Client
Serveur
asynchrone
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 10
jQuery
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 11
MVC côté client
Model
View Controler
Client
Serveur
…
REST
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
L’applicationhttps://github.com/fredZen/java-backbone-demo
(démo)
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 13
Une stack efficace avec Java
Serveur d’application
Browser
ESB
Spring MVC
appli serveur
Require.js
appli client
JSON / REST / HTTP
Underscore.js
SOAP / HTTP
Backbone.js
widgets & mouf-mouf
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Côté client
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 15
Pourquoi Backbone.js
Facileà
Apprendre
Supporteles browsersen fin de vie
Testable
ServicesREST
&Autres
Gestiondes
ÉvénementsRouting
Backbone.js
Vues&
Templates
Éprouvé
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 16
Exploiter le templating
Variabiliser le html avec un langage de templates
Un moteur est inclus dans Underscore
D’autres : Mustache, Handlebars, …
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 17
Exploiter le templating
Tips : Associer une Vue à chaque template
var MyView = Backbone.View.extend({el: "#container",
...render: function() {
var content = //votre méthode de templatingthis.$el.html(content);
},...});
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 18
Synchroniser vue et modèle
Utiliser les événements backbonevar MyView = Backbone.View.extend({...
setModel: function(model) {this.model = model;this.model.on("change", this.modelChanged);
},
events: {"change input, select, textarea": "viewChanged",
},
viewChanged: function(event) {//mise à jour du model...
},
modelChanged: function() {//mise à jour de la vue...
},...});
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 19
Synchroniser vue et modèle
Système d’événement très flexible
Pas restreint à la vue : un modèle peut observer un modèle, etc…
Permet un couplage lâche
Tips : Penser à mettre en place un bus d’événements
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 20
Communiquer avec le serveur
La synchro backbone en 1 ligne !
model.fetch => GET
model.save => POST
model{id}.save => PUT
model.destroy => DELETEvar myModel = backbone.Model.extend({
urlRoot: baseUrl + "/myResource",...});
var MyView = backbone.View.extend({...
submit: function() {this.model.save();
},...});
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 21
Communiquer avec le serveur
Flexibilité de customiser si nécessairevar ProposalModel = backbone.Model.extend({...
parse: function(response) {return null;
},...});
var MyView = backbone.View.extend({...
submit: function() {this.model.save({}, {
success: this.saveSucceeded,error: this.saveError
});},
...saveSucceeded: function(model, response) { //traitement de la réponse
...},saveError: function(model) { //traitement de l’erreur
...},
});
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 22
Organiser son application
Organiser ses fichiers dans des répertoires
Librairies JavaScriptVos modèles (organisés en domaine fonctionnel)
Vos vues (organisés en domaine fonctionnel)
Vos templates (organisés en domaine fonctionnel)
Structure équivalente pour les tests
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 23
Organiser son application
Requirejs
Simule l’import Java
Permet l’injection de dépendancesdefine([ 'backbone', 'jquery', 'underscore'],function(Backbone , $ , _ ) {
var ErrorModel = Backbone.Model.extend({...});
return new ErrorModel();});
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 24
Organiser son application
Centralisation des dépendances
require.paths = {backbone: 'lib/backbone/backbone.min',underscore: 'lib/lodash/lodash.min',jquery: 'lib/jquery/jquery.min',json2: 'lib/json2',...
};
require.shim = {'backbone': {
deps: ['underscore', 'jquery', 'json2'],exports: 'Backbone'
},...
};
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 25
Retrouver ses repères java
define([ 'jquery', 'underscore', 'backbone', 'router ], function($ , _ , backbone , router ) {
var singleton = null, MyView = Backbone.View.extend({
...setModel: function(model) {
this.model = model;this.model.on("change", this.modelChanged);
},...
}, {showMe: function() {
router.navigate("myPage");singleton.setModel(new MyModel());singleton.render();
}});
singleton = new MyView();
return MyView;});
Classe
Méthode
Méthode statique
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 26
Gérer les URLs
Le routeur ventile les URLs entrantes vers les vuesvar AppRouter = Backbone.Router.extend({
routes: {// Pages'myPage': 'myPage',...
},
init: function() {Backbone.history.start({
root : baseUrl,pushState: true
});},
...myPage: function() {
require([ 'view/myView'], function(MyView) {MyView.showMe();
});},
...return AppRouter;
});
Gestion transparente des hashtags vs pushstate
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 27
Gérer les URLs
Les vues doivent mettent à jour l’URLMyView = Backbone.View.extend({
...}, {
showMe: function() {router.navigate("myPage");...
}});
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Côté serveur
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 29
Spring MVC sur le serveur
Spring MVC pour s’interfacer au SI
Couche d’adaptation avec le back (Web Services, Hibernate, …)
Exposer des services REST en JSON avec Jackson
Hybrider REST et RPC si le back est trop procédural
Gérer la sécurité
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 30
Spring MVC sur le serveur
@Controllerpublic class MyController extends StandardExceptionHandling {
@RequestMapping(value = "/myResource", method = RequestMethod.POST)@ResponseBodypublic MyResource persiste(@RequestBody MyResource myResource) {
...}
@RequestMapping(value = "/proposal/{id}", method = RequestMethod.GET)@ResponseBodypublic MyResource getById(@PathVariable Long id) {
...}
...}
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 31
Spring MVC sur le serveur
Tips : pour migrer en douceur
« MVC client » aux parties très dynamiques du site
« MVC serveur » pour les parties plus statiques facilite le SEO
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 32
Une page conteneur
Une JSP<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set value="${pageContext.request.contextPath}/js" var="js" /><c:set value="${pageContext.request.contextPath}/resource" var="resource" /><c:set value="${pageContext.request.contextPath}/monAppli" var="monAppli" />...
<div id="container"/>...<script>
var require = {baseUrl: '${js}',config: {
'util/resource': {baseUrl: '${resource}'
},'router': {
baseUrl: '${monAppli}'}
}};<%@ include file="../../js/modules.js"%>
</script><script data-main="main" src="${js}/lib/require/require.min.js"></script>
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 33
Une page conteneur
UrlRewriteFilter
Toutes les URL utilisateur aboutissent à la même JSP
Ajouter UrlRewriteFilter dans web.xml
Paramétrer urlrewrite.xml
<urlrewrite default-match-type="wildcard">...
<rule><from>/monAppli/**</from><to>/WEB-INF/jsp/monAppli.jsp</to>
</rule></urlrewrite>
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
JavaScript à l’ère
industrielle
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 35
Tests unitaires avec Jasmine
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 36
Tests dans l’usine de dev
jasmine-maven-plugin
http://searls.github.com/jasmine-maven-plugin/
Mode interactif : mvn jasmine:bdd + browser
Mode headless avec htmlunit
Jenkins
Générer un surefire report à l’aide du jasmine maven plugin
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 37
Saga pour la couverture
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 38
Saga pour la couverture
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
saga-maven-plugin
http://timurstrekalov.github.com/saga/
S’interface facilement avec Jasmine (mais pas que)
Jenkins
Publier le rapport html dans le job
Sonar
Importer le rapport .dat
08/01/2013 Backbone.js en environnement Java 39
Couverture dans l’UDD
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
À vous de jouer !
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 41
Take-away
Structurer votre code JavaScript grâce à Backbone.js
Intégrer des devs JavaScript dans un environnement Java
S’intégrer avec la culture de développement
Capitaliser sur l’UDD
Permettre aux développeurs de se former
S’intégrer avec le logiciel existant
Minimiser l’adhérence entre le legacy et les nouveaux développements
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 42
Plus loin avec JavaScript
Coder ensemble !
Un pionnier
Binômage, dojo
Apprendre JavaScript
JavaScript : The Good Parts
Eloquent JavaScript
JavaScript Patterns
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 43
Plus loin sur le MVC client
Tutoriaux
TodoMVC : http://addyosmani.github.com/todomvc/
Wine Cellar : http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt1.html
Notre exemple :https://github.com/fredZen/java-backbone-demo
Les docs des librairies sont bien faites
Backbone.js, jQuery, jQuery-UI, Underscore.js, Require.js, Lo-Dash, Twitter Bootstrap, …
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Questions / Réponses
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 45
Sponsors
Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
Merci de votre attention!
Merci de votre attention!
www.parisjug.orgCopyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
08/01/2013 Backbone.js en environnement Java 47
Licence
http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
top related