MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano...
-
Upload
jaxconf -
Category
Technology
-
view
1.204 -
download
0
description
Transcript of MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano...
![Page 1: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/1.jpg)
Sebastiano Armeli-Battana@sebarmeli
July 10 , 2012 JAXConf, San Francisco
MVC on the server andon the client
How to integrate Spring MVC andBackbone.js
![Page 2: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/2.jpg)
Architectural Design Pattern
Business logic / presentation layer
Reusability
Components isolation
Model - View - Controller
Model
View Controller
![Page 3: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/3.jpg)
Passive Approach
Active Approach
Passive and Active MVCModelView
Controller
Model
ViewController
Observerpattern
![Page 4: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/4.jpg)
Java and MVC
POJO
JSP
Servlet
Model
View
Controller
![Page 5: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/5.jpg)
Spring MVCFront Controller pattern
![Page 6: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/6.jpg)
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
![Page 7: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/7.jpg)
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”
<beanclass="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"> <property name=”mediaTypes”> ... </property> <property name=”viewResolvers”> ... </property></bean>
![Page 8: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/8.jpg)
Spring MVC in action
Service Layer (@Service)
@Controllerpublic 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
CONTROLLER
![Page 9: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/9.jpg)
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; }
...}
![Page 10: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/10.jpg)
![Page 11: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/11.jpg)
Why MVC in JavaScript ??
AJAX application with lots of JS code
Managing efficiently jQuery selectors and callbacks
Decoupling components
Simplify communication with RESTful WS
![Page 12: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/12.jpg)
JavaScript and MVC
JS object
HTMLTemplate
JS object
Model
View
Controller
![Page 13: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/13.jpg)
JavaScript ‘MVC’ / ‘MV*’ Library
Dependencies: - Underscore.js - json2.js - jQuery / Zepto
Single Page Application (SPA)
Connection to API over RESTful JSON interface
RESTful JSON API
$(function(){
// stuff here Backbone.history.start();});
![Page 14: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/14.jpg)
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”}
![Page 15: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/15.jpg)
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()
![Page 16: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/16.jpg)
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
![Page 17: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/17.jpg)
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
![Page 18: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/18.jpg)
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 + HTMLTemplate
<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
![Page 19: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/19.jpg)
Model-View binding
var view = Backbone.View.extend({
initialize: function(){
this.model.bind(“change”, this.render, this);
},
render : function(){}
});
![Page 20: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/20.jpg)
Backbone.js and RESTBackbone.sync(): CRUD => HTTP Methods
(jQuery/Zepto).ajax()
collection.create(model) / model.save()
collection.fetch() / model.fetch()
model.save()
model.destroy()
POST
GET
PUT
DELETE
![Page 21: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/21.jpg)
‘My Contacts’ Application
REST API
URI HTTP Method
/list GET
/list POST
/list/{contactId} PUT
/list/{contactId} DELETE
![Page 22: MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone.js: Sebastiano Armeli-Battana](https://reader033.fdocuments.us/reader033/viewer/2022042813/54b7a25f4a795998738b46e3/html5/thumbnails/22.jpg)
Questions?