MVC on the server and on the client

MVC on the server and on the client How to integrate Spring MVC and Backbone.js Sebastiano Armeli-Battana @sebarmeliJuly 10 , 2012 JAXConf, San Francisco

Model - View - ControllerArchitectural Design Pattern ModelBusiness logic / presentation layer View ControllerReusabilityComponents isolation

Passive and Active MVC View ModelPassive Approach ControllerActive Approach Controller View Observer pattern Model

Java and MVCModel POJOView JSPController Servlet

Spring MVCFront Controller pattern

Getting startedweb.xml <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>

Spring MVC 3 conﬁgurationsdispatcher-servlet.xml<context:component-scan base-package=”com.example”<mvc:annotation-driven /><mvc:view-controller path=”/page1” view-name=”view1” /><mvc:resources mapping=”/resources/**” location=”/resources” /><beanclass="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"> <property name=”mediaTypes”> ... </property> <property name=”viewResolvers”> ... </property></bean>

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

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; } ... }

Why MVC in JavaScript ??AJAX application with lots of JS codeManaging efﬁciently jQuery selectors and callbacksDecoupling componentsSimplify communication with RESTful WS

JavaScript and MVCModel JS objectView HTML TemplateController JS object

JavaScript ‘MVC’ / ‘MV*’ LibraryDependencies: $(function(){ - Underscore.js // stuff here - json2.js Backbone.history.start(); }); - jQuery / ZeptoSingle Page Application (SPA)Connection to API over RESTful JSON interface

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

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

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

ViewLogical view MyApp.ListContactsView = Backbone.View.extend({ className: ‘list’, initialize: function(){ // stuff here‘el’ attribute }, events: { “click a”: “goToLink” }Event handlers goToLink : function() {} render : function(){ this.$el.html(“Something”); } });render() var view = new MyApp.ListContactsView(); view.render();

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

Model-View bindingvar view = Backbone.View.extend({ initialize: function(){ this.model.bind(“change”, this.render, this); }, render : function(){}});

Backbone.js and RESTBackbone.sync(): CRUD => HTTP MethodsPOST collection.create(model) / model.save()GET collection.fetch() / model.fetch()PUT model.save()DELETE model.destroy()(jQuery/Zepto).ajax()

‘My Contacts’ Application REST API URI HTTP Method /list GET /list POST /list/{contactId} PUT /list/{contactId} DELETE

Questions?

http://www.agilemobiledeveloper.com	2028
http://lanyrd.com	1145
http://blog.profitsoft	81
https://si0.twimg.com	16
http://webcache.googleusercontent.com	4
https://twimg0-a.akamaihd.net	2
http://prlog.ru	2
http://131.253.14.98	1
http://10.33.1.203	1
https://twitter.com	1
http://www.agilemobiledeveloper.com.	1

MVC on the server and on the client

by Sebastiano Armeli-Battana on Jul 10, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 3,282

Statistics