How to integrate SpringMVC and Backbone.js

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

2. Model - View - Controller
Architectural Design Pattern
Model
Business logic / presentation layer
View Controller
Reusability
Components isolation

3. Passive and Active MVC
View Model
Passive Approach
Controller
Active Approach Controller View
Observer
pattern
Model

4. Java and MVC
Model POJO
View JSP
Controller Servlet

5. Spring MVC
Front Controller pattern

6. Getting started
web.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>

7. Spring MVC 3 configurations
dispatcher-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” />
<bean
class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
<property name=”mediaTypes”>
...
</property>
<property name=”viewResolvers”>
...
</property>
</bean>

8. 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”
}]

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

11. Why MVC in JavaScript ??
AJAX application with lots of JS code
Managing efficiently jQuery selectors and callbacks
Decoupling components
Simplify communication with RESTful WS

12. JavaScript and MVC
Model JS object
View HTML Template
Controller JS object

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

14. Model
Represents 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-specific methods getFullName: function() {
return this.fullname + this.lastname;
},
validate: function(){}
});
Custom events & Validation var newContact = new MyApp.Contact();
newContact.set({‘firstname’ : ‘Lebron'});

15. Collection
Set 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()

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

17. View
Logical 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(“<p>Something</p>”);
}
});
render() var view = new MyApp.ListContactsView();
view.render();

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

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

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

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

22. Questions?