INTEGRATION OF BACKBONE.JS WITH SPRING 3.1

Agenda New Features and Enhancements in Spring 3.1 What is Backbone.js and why I should use it Spring 3.1 and Backbone.js integration by example

NEW FEATURES AND ENHANCEMENTS IN SPRING 3.1

New Features and Enhancements Cache Abstraction Bean Definition Profiles Environment Abstraction PropertySource Abstraction Java based-configuration Support for Hibernate 4.x c: namespace for constructor injection Support for injection against non-standard JavaBeans setters

New Features and Enhancements Support for Servlet 3.0 code-based configuration Support for Servlet 3.0 MultipartResolver JPA EntityManagerFactory bootstraping without persistence.xml New HandlerMethod-based Support Classes For Annotated Controller Processing "consumes" and "produces" conditions

New Features and Enhancements Flash Attributes and RedirectAttributes URI Template Variable Controller Method Annotation On Controller Method Arguments UriComponentsBuilder and UriComponents

Cache Abstraction Spring 3.1 provides support for transparently adding caching into an existing Spring application similar to the transaction public Book findBook(ISBN isbn) {...}

Environment Abstraction Unifies access to profiles and properties from different sources in public class PersistenceConfig private Environment public DataSource createDataSourceBean() { DriverManagerDataSource dataSource = new DriverManagerDataSource(); dataSource.setDriverClassName(env.getProperty("db.driverClass")); dataSource.setUrl(env.getProperty("db.url")); dataSource.setUsername(env.getProperty("db.username")); dataSource.setPassword(env.getProperty("db.password")); return dataSource; }

Servlet 3.0 No need for web.xml to bootstrap Spring 3.1 application. public class MyWebAppInitializer implements WebApplicationInitializer { public void onStartup(ServletContext servletContext) throws ServletException { // Application context’s (root and dispatcher) goes // here... }

Bean Definition Profiles Finally it is possible to define different set of components or different configuration for each environment (dev, test, production). Profiles may be defined via XML-configuration as well as Java-based config. Profiles are activated via environment variables, JVM properties or servlet init- params.

Produces and consumes Since Spring 3.1 we can specify media-type that is accepted and provided by mapped controller method. It is much more powerful than specifying Content-Type or Accept headers as used to do = POST, consumes = public Task Task task) { //... }

JSR-303 support for request body Request body can be validated using Bean Validation = POST, consumes public Task task) { // No BindingResult in method signature }

Exception Handlers Now we can annotation on @ResponseBody public Notification onException(MethodArgumentNotValidException ex) { FieldError error = ex.getBindingResult().getFieldError(); return new Notification(error.getField() + " " + error.getDefaultMessage()); }

Java based configuration Get rid off XML hell. Spring 3.1 can be bootstrapped and configured entirely via Java with fallback to XML @ComponentScan(basePackages = "pl.consileon") public class WebConfig { // Bean configuration goes here... }

BACKBONE.JS

What is this sorcery? Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

So why do I need Backbone.js? You’re building application with lots of JavaScript providing great user experience. You’re frontend is bunch of jQuery selectors and callbacks trying to keep in sync your UI and backend? You’re convinced that backend shouldn’t care of rendering UI.

How Backbone.js works? The data is represented by Model(s) and Collection(s), which are backed by server application. ◦ Models and Collections communicate with backend API via REST interface with data formatted in Json UI is represented by View(s). Router maps URL’s to appropriate views.

Most important Views do not render anything by examining the Models attributes. Models and Collections notify appropriate Views about changes causing appropriate page fragments to re-render itself. Each View represents logical part of a page and is backed by the Model or Collection.

HomeView (Tasks collection) TaskView (Task)

The ‘el’ magic Each view is bound to some DOM element accessible via ‘el’ attribute. The el attribute automatically narrows the DOM that is searched via selectors ◦ Whenever attempt to access DOM element via selector, the element is searched in DOM fragment scoped by ‘el’ not in whole page so there is no need for adding additional attributes uniquely identifying the element. The ‘el’ attribute can be created from JavaScript templating library or bound to existing DOM element.

How to test it? plugin/ plugin/

DEMO list

API GET /tasks – list tasks POST /tasks – create task PUT /tasks/:id – update task DELETE /tasks/:id – delete task

Q&A