Integration of Backbone.js with Spring 3.1


Published on

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Integration of Backbone.js with Spring 3.1

  2. 2. 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
  4. 4. New Features andEnhancements 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
  5. 5. New Features andEnhancements 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 in @RequestMapping
  6. 6. New Features andEnhancements Flash Attributes and RedirectAttributes URI Template Variable Enhancements @Valid On @RequestBody Controller Method Arguments @RequestPart Annotation On Controller Method Arguments UriComponentsBuilder and UriComponents
  7. 7. Cache AbstractionSpring 3.1 provides support for transparently adding caching into an existing Spring application similar to the transaction support.@Cacheable("books")public Book findBook(ISBN isbn) {...}
  8. 8. Environment AbstractionUnifies access to profiles and properties from different sources in single abstraction.@Configuration@PropertySource("")public class PersistenceConfig { @Autowired private Environment env; @Bean 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; }}
  9. 9. Servlet 3.0No need for web.xml to bootstrap Spring 3.1 application.public class MyWebAppInitializerimplements WebApplicationInitializer { public void onStartup(ServletContext servletContext) throws ServletException { // Application context’s (root and dispatcher) goes // here... }}
  10. 10. Bean Definition ProfilesFinally 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.
  11. 11. Produces and consumesSince 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 before.@RequestMapping(method = POST, consumes = "application/json“, produces=“application/json”)@ResponseStatus(CREATED)@ResponseBodypublic Task create(@RequestBody Task task) { // ...}
  12. 12. JSR-303 support for requestbodyRequest body can be validated using Bean Validation API@RequestMapping(method = POST, consumes = "application/json")@ResponseStatus(CREATED)@ResponseBodypublic Task create(@Valid @RequestBody Task task) { // No BindingResult in method signature}
  13. 13. Exception HandlersNow we can use @ResponseBody annotation on exception handlers:@ExceptionHandler(MethodArgumentNotValidException.class)@ResponseStatus(BAD_REQUEST)@ResponseBodypublic Notification onException(MethodArgumentNotValidException ex) { FieldError error = ex.getBindingResult().getFieldError(); return new Notification(error.getField() + " " + error.getDefaultMessage());}
  14. 14. Java based configurationGet rid off XML hell. Spring 3.1 can be bootstrapped and configured entirely via Java with fallback to XML if necessary.@Configuration@EnableWebMvc@ComponentScan(basePackages = "pl.consileon")public class WebConfig { // Bean configuration goes here...}
  15. 15. BACKBONE.JS
  16. 16. 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.
  17. 17. So why do I needBackbone.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.
  18. 18. 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.
  19. 19. 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.
  20. 20. HomeView(Tasks collection) TaskView (Task)
  21. 21. 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.
  22. 22. How to test it? maven-plugin/
  23. 23.
  24. 24. API GET /tasks – list tasks POST /tasks – create task PUT /tasks/:id – update task DELETE /tasks/:id – delete task
  25. 25. Q&A