MVC on the server and on the client

Talk given at JAXConf, San Francisco - July 2012

Transcript

1. 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
2. Architectural Design Pattern Business logic / presentation layer Reusability Components isolation Model - View - Controller Model View Controller Monday, 3 June 13
3. Passive Approach Active Approach Passive and Active MVC Model View Controller Model View Controller Observer pattern Monday, 3 June 13
4. Java and MVC POJO JSP Servlet Model View Controller Monday, 3 June 13
5. Spring MVC Front Controller pattern Monday, 3 June 13
6. Getting started <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> web.xml Monday, 3 June 13
7. Spring MVC 3 configurations <mvc:annotation-driven /> dispatcher-servlet.xml <mvc:view-controller path=”/page1” view-name=”view1” /> <mvc:resources mapping=”/resources/**” location=”/resources” /> <context:component-scan base-package=”com.example” <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"> <property name=”mediaTypes”> ... </property> <property name=”viewResolvers”> ... </property> </bean> Monday, 3 June 13
8. Spring MVC in action Service Layer (@Service) @Controller public class ContactsController { @Autowired private ContactService service; @RequestMapping(value=”/list”, method = RequestMethod.GET) public @ResponseBody List<Contact> 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
9. 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
10. 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
11. JavaScript and MVC JS object HTML Template JS object Model View Controller Monday, 3 June 13
12. 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
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
14. 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
15. 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
16. MyApp.ListContactsView = Backbone.View.extend({ className: ‘list’, initialize: function(){ // stuff here }, events: { “click a”: “goToLink” } goToLink : function() {} render : function(){ this.$el.html(“<p>Something</p>”); } }); var view = new MyApp.ListContactsView(); view.render(); Logical view ‘el’ attribute Event handlers render() View Monday, 3 June 13
17. 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 <script type=”text/html” id=”contactTemplate”> <p>First name : {{firstname}}</p> <p>Last name : {{lastname}}</p> <p>Telephone : {{telephone}}</p> script> View HTML template ICanHaz.js Monday, 3 June 13
18. Model-View binding var view = Backbone.View.extend({ initialize: function(){ this.model.bind(“change”, this.render, this); }, render : function(){} }); Monday, 3 June 13
19. 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
20. ‘My Contacts’ Application REST API URI HTTP Method /list GET /list POST /list/{contactId} PUT /list/{contactId} DELETE Monday, 3 June 13
21. Questions? Monday, 3 June 13