Sebastiano Armeli-Battana @sebarmeli July 10 , 2012 JAXConf, San Francisco MVC on the server and on the client How to integrate Spring MVC and Backbone.js Monday, 3 June 13

Architectural Design Pattern Business logic / presentation layer Reusability Components isolation Model - View - Controller Model View Controller Monday, 3 June 13

Passive Approach Active Approach Passive and Active MVC Model View Controller Model View Controller Observer pattern Monday, 3 June 13

Java and MVC POJO JSP Servlet Model View Controller Monday, 3 June 13

Spring MVC Front Controller pattern Monday, 3 June 13

Getting started dispatcher org.springframework.web.servlet.DispatcherServlet dispatcher / web.xml Monday, 3 June 13

Spring MVC 3 configurations dispatcher-servlet.xml ... ... Monday, 3 June 13

Spring MVC in action Service Layer (@Service) @Controller public class ContactsController { @Autowired private ContactService service; @RequestMapping(value=”/list”, method = RequestMethod.GET) public @ResponseBody List getContacts() { return service.getContacts(); } } [{ “id” : 31, “firstname” : “LeBron”, “lastname” : “James”, “telephone” : “111-222-3333” }] DAO (@Repository) MODEL VIEW C O N T R O L L E R Monday, 3 June 13

What about the Model? @Entity @Table(name=”Contacts”) public class Contact { @Id @Column(name = ”ID”) @GeneratedValue private Integer id; @Column(name = “FIRSTNAME”) private String firstname; public String getFirstname(){ return firstname; } public void setFirstname(){ this.firstname = firstname; } ... } Monday, 3 June 13

Why MVC in JavaScript ?? AJAX application with lots of JS code Managing efficiently jQuery selectors and callbacks Decoupling components Simplify communication with RESTful WS Monday, 3 June 13

JavaScript and MVC JS object HTML Template JS object Model View Controller Monday, 3 June 13

JavaScript ‘MVC’ / ‘MV*’ Library Dependencies: - Underscore.js - json2.js - jQuery / Zepto Single Page Application (SPA) Connection to API over RESTful JSON interface $(function(){ // stuff here Backbone.history.start(); }); Monday, 3 June 13

Model MyApp.Contact = Backbone.Model.extend({ defaults: { firstname : “”, lastname : “”, telephone : “” }, getFullName: function() { return this.fullname + this.lastname; }, validate: function(){} }); var newContact = new MyApp.Contact(); newContact.set({‘firstname’ : ‘Lebron'}); Represents data (JSON) Key-value attributes Domain-specific methods Custom events & Validation { “id” : 31, “firstname” : “LeBron”, “lastname” : “James”, “telephone” : “111-222-3333” } Monday, 3 June 13

Collection MyApp.Contacts = Backbone.Collection.extend({ model: MyAppp.Contact, url: ‘/list’ }); var collection = new MyApp.Contacts(), model1 = new MyApp.Contact(); collection.add(model1); Set of models url / url() create() / add() / remove()/ reset() get() / getByCid() Monday, 3 June 13

Router MyApp.AppRouter = Backbone.Router.extend({ routes: { “” : “index”, “list-contacts” : “listContacts” }, index : function() { // stuff here } listContacts : function() { // stuff here } }); var router = new MyApp.AppRouter(); Routing client-side “states” “routes” map List of actions Monday, 3 June 13

MyApp.ListContactsView = Backbone.View.extend({ className: ‘list’, initialize: function(){ // stuff here }, events: { “click a”: “goToLink” } goToLink : function() {} render : function(){ this.$el.html(“

Something

”); } }); var view = new MyApp.ListContactsView(); view.render(); Logical view ‘el’ attribute Event handlers render() View Monday, 3 June 13

MyApp.ContactsView = Backbone.View.extend({ ... render : function(){ var obj = this.model.toJSON(), template = ich.contactTemplate(obj); this.$el.html(template); } }); var view = new MyApp.ContactsView(); view.render(); Pick one client-side templating engine! (E.g. Handlebars.js, Haml-js, ICanHaz.js) Isolate HTML into Template View + HTML Template <p>First name : {{firstname}}</p> <p>Last name : {{lastname}}</p> <p>Telephone : {{telephone}}</p> script> View HTML template ICanHaz.js Monday, 3 June 13

Model-View binding var view = Backbone.View.extend({ initialize: function(){ this.model.bind(“change”, this.render, this); }, render : function(){} }); Monday, 3 June 13

Backbone.js and REST Backbone.sync(): CRUD => HTTP Methods (jQuery/Zepto).ajax() collection.create(model) / model.save() collection.fetch() / model.fetch() model.save() model.destroy() POST GET PUT DELETE Monday, 3 June 13

‘My Contacts’ Application REST API URI HTTP Method /list GET /list POST /list/{contactId} PUT /list/{contactId} DELETE Monday, 3 June 13

Questions? Monday, 3 June 13