Your SlideShare is downloading. ×
Introduction to Backbone.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Backbone.js

4,340
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 …

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
4,340
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
124
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Backbone.jsMVC in the BrowserJonathan 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. ScalariumAmazon EC2 Cluster Management §  Auto-Config §  Self-Healing §  Auto-Scaling §  One-click-deploymentwww.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.jssupplies structure to JavaScript-heavy applications by providing §  Models §  Collections §  Views & Templating §  Router 18
  • 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. MVC
  • 21. MVCRouter
  • 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. CollectionAssumes 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 & 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. Give Me More 48
  • 49. ValidationsFailed validation will prevent set and saveTriggers error event 49
  • 50. List Comprehensions 50
  • 51. List ComprehensionsShort 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&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