Introduction to Backbone.js

0 views

Published on

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.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • 很不错,但要适应某些现在的开发模式还要做一定的改造,比如后台url不是restful的情况。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
149
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Introduction to Backbone.js

  1. 1. Backbone.jsMVC in the BrowserJonathan Weiss
  2. 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. 3. ScalariumAmazon EC2 Cluster Management §  Auto-Config §  Self-Healing §  Auto-Scaling §  One-click-deploymentwww.scalarium.com 3
  4. 4. Web App History 4
  5. 5. Web 1.0 GET Webserver PAGE 5
  6. 6. Web 1.0 GET PAGE Webserver GET PAGE 6
  7. 7. Ajax GET Webserver PAGE 7
  8. 8. Ajax GET PAGE Webserver GET PAGE Fragment 8
  9. 9. Ajax GET PAGE Logic GET Load PAGE Fragment Fragment 9
  10. 10. Ajax GET PAGE Models, Validation, Rendering, Mess for GET .... PAGE complex apps Fragment 10
  11. 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. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. Principles DRY
  17. 17. 17
  18. 18. Backbone.jssupplies structure to JavaScript-heavy applications by providing §  Models §  Collections §  Views & Templating §  Router 18
  19. 19. Backbone.jshttp://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. 20. MVC
  21. 21. MVCRouter
  22. 22. Model Business model Domain logic Reusable
  23. 23. Models in Backbone Data store Setters & setters Events & notifications Persistence in & out JSON (optional)
  24. 24. Collection List of models Events & notifications Adjust with URL / JSON List comprehensions: map, inject, select, …
  25. 25. View Presentation Specific to a use-case Different views for different perspectives on a model
  26. 26. Views in Backbone Display UI & data Templating Respond to user input Respond to model change
  27. 27. Controller Conducts and connects Inspects user requests and responds Delegate instead of work
  28. 28. Router in Backbone Map URLs to JS actions History state management Instantiation of initial setup
  29. 29. Workflow with Backbone.js fetch Model Server JSON 29
  30. 30. Workflow with Backbone.js View 1 View 2 notify fetch Model Server JSON 30
  31. 31. Workflow with Backbone.js render View 1 View 2 notify fetch Model Server JSON 31
  32. 32. Workflow with Backbone.js render View 1 View 2 update inject notify fetch Model Server JSON 32
  33. 33. Workflow with Backbone.js View 1 View 2 update, click, input,... Model
  34. 34. Workflow with Backbone.js View 1 View 2 update, click, input,... update Model
  35. 35. Workflow with Backbone.js View 1 View 2 update, click, input,... update notify Model
  36. 36. Workflow with Backbone.js View 1 View 2 update, click, input,... update notify update Model Server JSON 36
  37. 37. Workflow with Backbone.js render View 1 View 2 update inject notify Model 37
  38. 38. Show Me The Code 38
  39. 39. Model 39
  40. 40. CollectionAssumes RESTful JSON backed, e.g. /servers/4646 … 40
  41. 41. View 41
  42. 42. View 42
  43. 43. View 43
  44. 44. Custom Events 44
  45. 45. Custom Events 45
  46. 46. 46
  47. 47. Data, Events & ViewsPattern §  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. 48. Give Me More 48
  49. 49. ValidationsFailed validation will prevent set and saveTriggers error event 49
  50. 50. List Comprehensions 50
  51. 51. List ComprehensionsShort form for map on an attribute 51
  52. 52. Navigation & Back Button 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. http://documentcloud.github.com/backbone/http://peepcode.com/products/backbone-js http://peepcode.com/products/backbone-ii 56
  57. 57. Q&APeritor GmbHBlücherstr. 22, Hof III Aufgang 610961 BerlinTel.: +49 (0)30 69 20 09 84 0Fax: +49 (0)30 69 20 09 84 9Internet: www.peritor.comE-Mail: info@peritor.com© Peritor GmbH - Alle Rechte vorbehalten

×