Backbone Dev Talk by Max Mamis
0 likes306 views
Backbone is a minimal JavaScript library that provides a Model-View-Controller structure for building web applications. It includes Models for managing data, Views for displaying UI, and a Router for handling application state. While it handles core functions like syncing data and delegating events, it does not include features like automatic data binding or template rendering. Models use methods like fetch(), save(), and destroy() to work with data, and can be organized into Collections. Views create DOM elements and delegate events to associated functions. Backbone keeps file sizes small and avoids complexity, making it suitable for mobile development.
Backbone Dev Talk by Max Mamis
- 1. A Quick Overview of Backbone
- 3. What is it? ● Minimal Javascript library for building Web apps ● Built on top of Underscore.js, a utility library by the same developer
- 4. What does it provide? ● Model ● View ● Router ● Events ● That’s it!
- 6. What doesn’t it provide? ● Automatic data binding (like Ember, Angular) ● Template rendering ● Pretty much anything else
- 7. Models ● Sync (CRUD) ○ model.fetch(), model.save(), model.destroy() ○ override Backbone.sync() to implement custom syncing functionality for all models ● Collections ○ Contain models, models can contain collections ○ Lots of useful operations ■ map, reduce, filter, sort, shuffle, etc
- 8. Views “...are almost more convention than they are actual code” - the source
- 9. Views ● Creates an element ○ Give your view class some combo of properties tagName, className, id ○ Or pass in a pre-existing DOM element ● Delegates events ○ ‘click a.someClass’: ‘goToLink’; calls this.goToLink() ● view.$ ○ jQuery/Zepto object in the context of the view’s DOM element (i.e. this.$(‘a.someClass’).hide();)
- 17. Why Backbone? ● Small — <20k! (minified) ○ Compared to Ember (64k) or Angular (81k) ○ Great for mobile! ● No magic ● Intuitive
- 19. Backbone & Node? Sure, why not?
- 20. Backbone & Node? ● DIY ○ Models: just override Backbone.sync() ○ Views: render templates and serve them as HTML instead of injecting into DOM? ● AirBNB Rendr ○ Express Middleware ○ Handles all that for you
- 21. Fin