Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone introdunction


Published on

Published in: Technology, Education
  • Be the first to comment

Backbone introdunction

  1. 1. an intro to the javascript mvc framework
  2. 2. plan Why Backbone Backbone architecture Examples
  3. 3. What we want to avoidWe have to store object informations into the DOM
  4. 4. What we want to avoid callback hell
  5. 5. Why BackboneSo, what do we need?• Abstraction.• Decoupling UI from Data.• No more callbacks.
  6. 6. Backbone.jsFrom the Backbone website... represent datasBackbone.js gives structure to web applications by providingmodels 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 yourexisting API over a RESTful JSON interface.manipulate doms list of model
  7. 7. Architecture
  8. 8. Backboneʼ s ModelRepresenting dataHandling persistenceThrows events
  9. 9. Backboneʼ s Model
  10. 10. Backboneʼ s Model
  11. 11. Backboneʼ s View  Manipulates the Dom  delegates Dom events
  12. 12. Backboneʼ s View
  13. 13. Backboneʼ s View
  14. 14. Backboneʼ s CollectionsCollections are ordered sets of modelsbind "change" events to be notified when any modelin the collection has been modifiedfetch the collection from the server (or otherpersistence layer)
  15. 15. Backboneʼ s Collections _.include([1, 2, 3], 3); => true
  16. 16. APP
  17. 17. ArchitectureDependencies:• jQuery or Zepto• Underscore.js 16kbackbone.js 12kMustache.js 14k
  18. 18. Examples
  19. 19. Q u e s t io n s ?