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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java3 « Comment une équipe Java développe une application JavaScript et l’intègre dans son environnement… »

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java4Intervenants 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java5Intervenants 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java6Motivation 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java8 MVC côté serveur ModelView Controler Client Serveur

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java9Ajax ModelView Controler + js Client Serveur asynchrone

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java10jQuery

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java11 MVC côté client Model ViewControler 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’application (démo)

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java13 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java15 Pourquoi Backbone.js Facile à Apprendre Supporte les browsers en fin de vie Testable Services REST & Autres Gestion des Événements Routing Backbone.js Vues & Templates Éprouvé

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java16 Exploiter le templating Variabiliser le html avec un langage de templates Un moteur est inclus dans Underscore D’autres : Mustache, Handlebars, …

Copyright © 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 templating this.$el.html(content); },... });

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java18 Synchroniser vue et modèle Utiliser les événements backbone var 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... },... });

Copyright © 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java20 Communiquer avec le serveur La synchro backbone en 1 ligne ! model.fetch => GET model.save => POST model{id}.save => PUT model.destroy => DELETE var myModel = backbone.Model.extend({ urlRoot: baseUrl + "/myResource",... }); var MyView = backbone.View.extend({... submit: function() { this.model.save(); },... });

Copyright © 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écessaire var 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... }, });

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java22 Organiser son application Organiser ses fichiers dans des répertoires Librairies JavaScript Vos 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

Copyright © 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épendances define([ 'backbone', 'jquery', 'underscore'], function(Backbone, $, _ ) { var ErrorModel = Backbone.Model.extend({... }); return new ErrorModel(); });

Copyright © 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' },... };

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java25 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java26 Gérer les URLs Le routeur ventile les URLs entrantes vers les vues var 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

Copyright © 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’URL MyView = 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java29 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é

Copyright © 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 public class MyController extends StandardExceptionHandling = "/myResource", method = public MyResource MyResource myResource) {... = "/proposal/{id}", method = public MyResource Long id) {... }... }

Copyright © 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java32 Une page conteneur Une JSP var require = { baseUrl: '${js}', config: { 'util/resource': { baseUrl: '${resource}' }, 'router': { baseUrl: '${monAppli}' } };

Copyright © 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... /monAppli/** /WEB-INF/jsp/monAppli.jsp

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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java35 Tests unitaires avec Jasmine

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java36 Tests dans l’usine de dev 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

Copyright © 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java38 Saga pour la couverture

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique saga-maven-plugin S’interface facilement avec Jasmine (mais pas que) Jenkins Publier le rapport html dans le job Sonar Importer le rapport.dat 08/01/2013Backbone.js en environnement Java39 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 !

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java41Take-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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java42 Plus loin avec JavaScript Coder ensemble ! Un pionnier Binômage, dojo Apprendre JavaScript JavaScript : The Good Parts Eloquent JavaScript JavaScript Patterns

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java43 Plus loin sur le MVC client Tutoriaux TodoMVC : Wine Cellar : e-cellar-pt1.html Notre exemple : 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

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java45Sponsors

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!

Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 08/01/2013Backbone.js en environnement Java47Licence