Introduction to Backbone.js
•
6 likes•2,648 views
An introduction into Backbone.js – a lightweight MVC framework. Backbone supplies structure to JavaScript-heavy 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 application over a RESTful JSON interface.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to Backbone.js
Similar to Introduction to Backbone.js (20)
More from Jonathan Weiss
More from Jonathan Weiss (20)
Recently uploaded
Recently uploaded (20)
Introduction to Backbone.js
- 1. Backbone.js MVC in the Browser Jonathan Weiss
- 2. Who am I? Jonathan Weiss § Peritor GmbH in Berlin § Webistrano / Capistrano § Ruby: SimplyStored, Happening § FreeBSD: Original Rubygems & Rails maintainer § The great fire of London http://www.peritor.com http://github.com/jweiss @jweiss 2
- 3. Scalarium Amazon EC2 Cluster Management § Auto-Config § Self-Healing § Auto-Scaling § One-click-deployment www.scalarium.com 3
- 4. Web App History 4
- 5. Web 1.0 GET Webserver PAGE 5
- 6. Web 1.0 GET PAGE Webserver GET PAGE 6
- 7. Ajax GET Webserver PAGE 7
- 8. Ajax GET PAGE Webserver GET PAGE Fragment 8
- 9. Ajax GET PAGE Logic GET Load PAGE Fragment Fragment 9
- 10. Ajax GET PAGE Models, Validation, Rendering, Mess for GET .... PAGE complex apps Fragment 10
- 11. Ajax Can get messy really fast § Loading multiple HTML fragments when updating single entity § Handle validation errors from the server § Dependency between fragments, multiple views need to change on update § TESTING! 11
- 12. 12
- 13. 13
- 14. 14
- 15. 15
- 16. Principles DRY
- 17. 17
- 18. Backbone.js supplies structure to JavaScript-heavy applications by providing § Models § Collections § Views & Templating § Router 18
- 19. Backbone.js http://documentcloud.github.com/backbone/ § BSD license § Depends on § jQuery § underscore.js § template engine (build-in, mustache, handlebars, eco, …) § Lightweight – no UI widgets or desktop GUI in the browser § Backend agnostic by talking to RESTful JSON endpoints 19
- 20. MVC
- 21. MVC Router
- 22. Model Business model Domain logic Reusable
- 23. Models in Backbone Data store Setters & setters Events & notifications Persistence in & out JSON (optional)
- 24. Collection List of models Events & notifications Adjust with URL / JSON List comprehensions: map, inject, select, …
- 25. View Presentation Specific to a use-case Different views for different perspectives on a model
- 26. Views in Backbone Display UI & data Templating Respond to user input Respond to model change
- 27. Controller Conducts and connects Inspects user requests and responds Delegate instead of work
- 28. Router in Backbone Map URLs to JS actions History state management Instantiation of initial setup
- 29. Workflow with Backbone.js fetch Model Server JSON 29
- 30. Workflow with Backbone.js View 1 View 2 notify fetch Model Server JSON 30
- 31. Workflow with Backbone.js render View 1 View 2 notify fetch Model Server JSON 31
- 32. Workflow with Backbone.js render View 1 View 2 update inject notify fetch Model Server JSON 32
- 33. Workflow with Backbone.js View 1 View 2 update, click, input,... Model
- 34. Workflow with Backbone.js View 1 View 2 update, click, input,... update Model
- 35. Workflow with Backbone.js View 1 View 2 update, click, input,... update notify Model
- 36. Workflow with Backbone.js View 1 View 2 update, click, input,... update notify update Model Server JSON 36
- 37. Workflow with Backbone.js render View 1 View 2 update inject notify Model 37
- 38. Show Me The Code 38
- 39. Model 39
- 40. Collection Assumes RESTful JSON backed, e.g. /servers/4646 … 40
- 41. View 41
- 42. View 42
- 43. View 43
- 44. Custom Events 44
- 45. Custom Events 45
- 46. 46
- 47. Data, Events & Views Pattern § User or server trigger data change, never update view directly § Data update triggers change event § Views subscribe to change events and re-render § Router to connect URLs to actions and initialize views 47
- 48. Give Me More 48
- 49. Validations Failed validation will prevent set and save Triggers error event 49
- 50. List Comprehensions 50
- 51. List Comprehensions Short form for map on an attribute 51
- 52. Navigation & Back Button 52
- 53. 53
- 54. 54
- 55. 55
- 56. http://documentcloud.github.com/backbone/ http://peepcode.com/products/backbone-js http://peepcode.com/products/backbone-ii 56
- 57. Q&A Peritor GmbH Blücherstr. 22, Hof III Aufgang 6 10961 Berlin Tel.: +49 (0)30 69 20 09 84 0 Fax: +49 (0)30 69 20 09 84 9 Internet: www.peritor.com E-Mail: info@peritor.com © Peritor GmbH - Alle Rechte vorbehalten