Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique.

Présentation au sujet: "Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique."— Transcription de la présentation:

1 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique

2 Backbone.js en environnement Java Laurent Dutheil Frederic Merizen Consultants OCTO Technology

3 www.parisjug.org 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… »

4 www.parisjug.org 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

5 www.parisjug.org 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

6 www.parisjug.org 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

7 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

8 www.parisjug.org 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

9 www.parisjug.org 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

10 www.parisjug.org 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

11 www.parisjug.org 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

12 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique L’application https://github.com/fredZen/java-backbone-demo (démo)

13 www.parisjug.org 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

14 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique Côté client

15 www.parisjug.org 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é

16 www.parisjug.org 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, …

17 www.parisjug.org 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); },... });

18 www.parisjug.org 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... },... });

19 www.parisjug.org 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

20 www.parisjug.org 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(); },... });

21 www.parisjug.org 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... }, });

22 www.parisjug.org 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

23 www.parisjug.org 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(); });

24 www.parisjug.org 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' },... };

25 www.parisjug.org 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

26 www.parisjug.org 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

27 www.parisjug.org 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");... } });

28 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique Côté serveur

29 www.parisjug.org 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é

30 www.parisjug.org 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 serveur @Controller public class MyController extends StandardExceptionHandling { @RequestMapping(value = "/myResource", method = RequestMethod.POST) @ResponseBody public MyResource persiste(@RequestBody MyResource myResource) {... } @RequestMapping(value = "/proposal/{id}", method = RequestMethod.GET) @ResponseBody public MyResource getById(@PathVariable Long id) {... }... }

31 www.parisjug.org 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

32 www.parisjug.org 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}' } };

33 www.parisjug.org 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

34 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

35 www.parisjug.org 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

36 www.parisjug.org 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 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

37 www.parisjug.org 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

38 www.parisjug.org 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

39 www.parisjug.org Copyright © 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/2013Backbone.js en environnement Java39 Couverture dans l’UDD

40 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique À vous de jouer !

41 www.parisjug.org 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

42 www.parisjug.org 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

43 www.parisjug.org 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 : http://addyosmani.github.com/todomvc/ Wine Cellar : http://www.adobe.com/devnet/html5/articles/backbon e-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, …

44 Copyright © 2008 ParisJug. Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique Questions / Réponses

45 www.parisjug.org 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

46 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!

47 www.parisjug.org 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 http://creativecommons.org/licenses/by-nc-sa/2.0/fr/