Build event based UI with Backbone.js

A presentation about how to build event based user interface using backbone.js. The demo can be found at:
https://github.com/dombesz/rails-backbone

Transcript

1. Build event based UI with Backbone.js @dombeszattila cluj.rb 2012-10-25 Tuesday, October 30, 12
2. • dombiattila.com • @dombeszattila • Ruby, Obj-C, Node.js and frontend js. About me Tuesday, October 30, 12
3. Overview • What’s the problem with frontend js? • Why event driven UI? • What is Backbone.js? • Backbone.js components. • Short Demo. Tuesday, October 30, 12
4. Typical js project at the end Tuesday, October 30, 12
5. • Tightly coupled and not DRY • Callback spaghetti • No application structure • No clear distinction between app logic and ui • Hard to test and maintain Typical js project at the end Tuesday, October 30, 12
6. • Less callbacks • No spaghetti code • Loosely coupled • Reduces complexity • More flexible and DRY • Fire once and receive everywhere Why Event driven UI? Tuesday, October 30, 12
7. • Jeremy Askhenas • author of coffescript, and underscore.js • Lightweight: 4.6kb • Readable, well documented source code • Flexible, every part can be overridden What is Backbone.js Tuesday, October 30, 12
8. • Seamless integration with RESTful apis (JSON) • dependencies: Underscore.js and jQuery/ Zepto What is Backbone.js Tuesday, October 30, 12
9. Official description “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.” backbonejs.org Tuesday, October 30, 12
10. • It’s an MVC/MVP/MV* framework • Provides opinionated way to avoid spaghetti code • Organize the structure of your application • Simplify server-side persistence What is Backbone.js? Tuesday, October 30, 12
11. • Decouple the DOM from your page's data • Model data, views and routers in a succinct manner • Provide DOM, model and collection synchronization • Extensive eventing system What is Backbone.js? Tuesday, October 30, 12
12. • Supports data binding through manual events • Easy pub/sub system for events • Agnostic about templating frameworks • Underscore template is default • Works with Handlebars, Mustache too What is Backbone.js? Tuesday, October 30, 12
13. Backbone.js components Events Deals with UI interaction Model Data and Logic Collection Set of Models Router Application State / ULRs View Presenter/Controller/?Glue Tuesday, October 30, 12
14. Backbone.js components Events Deals with UI interaction Model Data and Logic Collection Set of Models Router Application State / ULRs View Presenter/Controller/?Glue Inherits Events Tuesday, October 30, 12
15. Backbone.js components Events Deals with UI interaction Model Data and Logic Collection Set of Models Router Application State / ULRs View Presenter/Controller/?Glue Inherits Events Inherits Events Tuesday, October 30, 12
16. Backbone.js components Events Deals with UI interaction Model Data and Logic Collection Set of Models Router Application State / ULRs View Presenter/Controller/?Glue Inherits Events Inherits Events Inherits Events Tuesday, October 30, 12
17. Backbone.js components Events Deals with UI interaction Model Data and Logic Collection Set of Models Router Application State / ULRs View Presenter/Controller/?Glue Inherits Events Inherits Events Inherits Events Inherits Events Tuesday, October 30, 12
18. Events • Every component inherits Backbone.Events Tuesday, October 30, 12
19. Events • The standard way to deal with user interactions • Gives the ability to bind/trigger events for any object. • Declarative bindings for views • Model and Collection changes Tuesday, October 30, 12
20. How to use Events? • First, extend an object with events. Tuesday, October 30, 12
21. How to use Events? • Then bind events on object. (msg can be anything) Tuesday, October 30, 12
22. How to use Events? • Then bind events on object. Tuesday, October 30, 12
23. How to use Events? • Its recommended to use namespacing on the events Tuesday, October 30, 12
24. How to use Events? • Remove events Tuesday, October 30, 12
25. How to use Events? • Special event Tuesday, October 30, 12
26. Models • Contains interactive data and logic for this data • Setting attributes is key-value based • Setters, Getters • Initialization • Validation Tuesday, October 30, 12
27. Models Tuesday, October 30, 12
28. Collections • A set of objects from the same model • Events are bubbling up from models • Setters/getters via .add() and .remove() • Supports filtering by underscore.js Tuesday, October 30, 12
29. Collections Tuesday, October 30, 12
30. Views • Ties together the DOM with models/ collections • Don’t contain any markup for your app • Contains presenter logic for models (MVP, MVVM) • Uses templates for markup (underscore, mustache, handlebars, jQuery templates) Tuesday, October 30, 12
31. Views Tuesday, October 30, 12
32. Views • Keeping in sync models with views. • You can bind a model’s change event to a view’s render event. Tuesday, October 30, 12
33. Views Don’t do anything outside the view’s scope. Tuesday, October 30, 12
34. Views The view’s event object: • Use the events object to define events • Automatically limits to view’s scope • Don’t bind anything via jQuery • This way you will don’t have zombie callbacks Tuesday, October 30, 12
35. Router • Used to manage application’s state • Connects URLs to application events • Uses hashtag or pushState for URL manipulation • Supports URL parameters Tuesday, October 30, 12
36. Router • Defining routes Tuesday, October 30, 12
37. Router • Defining route callbacks Tuesday, October 30, 12
38. Router • Start the router and monitoring hashtag • You can save application state to the url Tuesday, October 30, 12
39. One more thing... Backbone.sync() • Entry point to transport layer for any server operations (via models and collections). • Default implementation is 100% compatible with the Ruby on Rails RESTful JSON api. • Override if you need to customize the communication with the server. • Plug any backend easily. Even Socket.io! Tuesday, October 30, 12
40. Thank you for your attention! ... and lets see the demo. Tuesday, October 30, 12