Backbone.js Introduction and Overview
•
2 likes•1,262 views
This document provides an introduction and overview of Backbone.js, including: - Background on Backbone's creator and dependencies like jQuery, Underscore.js - What problems Backbone aims to solve like separating concerns and improving code reuse - The main Backbone components - Models, Views, Collections, and Routers - and what they are used for - Examples of companies using Backbone and guidance on getting started with the framework
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Backbone.js Introduction and Overview
Similar to Backbone.js Introduction and Overview (20)
Recently uploaded
Recently uploaded (20)
Backbone.js Introduction and Overview
- 1. Backbone.js Introduction / Oren Farhi
- 2. Oren Farhi Front End Architect, JS Engineer @Tikal JS Group Leader - Meet, Share, Contribute & Coding Speaker (Israel & World Wide) Developing with: Pure Javascript, Backbone.js, Underscore.js, jQuery, CSS3 github.com/tikalk @tikalk
- 3. We help companies build, deliver, deploy, manage and optimize their products. JAVA JS RoR.NETALM “Today we are SURE that we made the right decision, choosing Tikal” Guy Ben-Porat - Development Manager “ExLibris”
- 4. Tikal by Numbers “Actions speak louder than words” Tikal's motto 1600+ Community Members 150+ Blog Posts Last Year 460+ Meetup Members 100+ Projects Last Year 90+ Tikal’s Experts Team 12+ Years old
- 5. The Past: JS is the wild west No code conventions jQuery bloated code Data & DOM mixed jQuery ajax & callbacks are a bit messy No Reuse Most End Result: words and sentences with long selectors and "hanged" functions everywhere
- 6. The Present: All we have is now Simplicity Organization Focus
- 7. Backbone Background Jeremy Ashkenas - Underscore, Coffeescript DocumentCloud Dependencies: jquery / zepto underscore.js json2.js ( IE, other without JSON )
- 8. Backbone is: MVC library (MIT) Structure RESTful JSON connector Hash Routing Engine Event Driven Extended Model Events View Collection Router Utilities - based underscore.js Templating Engine - based underscore.js
- 9. What is it good for? Linkedin Mobile, SoundCloud, Foursquar, Khan Academy, Airbnb, Rdio, Hulu Structure for Code Separation of Concerns Modular, Extensible Reusable Modules Loose Coupling Model Driven Unit Test Ready M - Backbone.Model V - _.template C - Backbone.View / Router
- 10. This is a backbone. When used properly It keeps one's head Out of one's butt Rand Macivor
- 11. What we're going to do today: https://github.com/tikalk/backbone-workshop
- 12. Backbone.Model Where JSON data is stored REST, Constructor, Manually Data Change Events Works With: Collection, View Methods: set - validate get escape clear fetch save (REST) - parse destroy (REST)
- 13. Backbone.Model
- 14. Backbone.Model - PRACTICE Model properties: defaults, Model Methods: initialize, set, get
- 15. Backbone.View A Controller for a DOM Element (wrapper) Renders Model/Collection to DOM (html) Delegates DOM Events Works With: Model, Collection Can use Any template engine to render html Methods: render (return this) make remove un/delegateEvents Properties: $ = $el.find el $el options events
- 16. Backbone.View
- 17. Backbone.View - PRACTICE View properties: events, tagName, className, render
- 18. _.Underscore.js Utilities for Javascript (60) Collections, Arrays, Functions, Objects, Uses Browsers Implementation if possible High Expressiveness Works With: Backbone, Standalone Methods: Collections - each, map, filter, pluck, groupBy Arrays - without, uniq Functions - bind, debounce, Object - keys, values, is-* (Empty, Date, String, Function etc..), has Utility - template, escape, mixin Chaining - chain, value
- 19. _.Underscore.js
- 20. Backbone.Collection Collection of Models REST, Constructor, Manually Inherits Change Events from Models Works With: Model, View Many utilities methods from underscore.js Methods: add remove length fetch save (REST) - parse destroy (REST) + 28 Underscore methods: map, find, filter, sortBy, groupBy, pluck, invoke ... Properties: options
- 23. Backbone.Router Navigation Handling (bookmarks) Listens to url change events Natively integrated to Back/Forward Easy routing handling Works With: Backbone.History Methods: custom navigate route (create) Properties: routes (key - value) - (route - handler)
- 24. Backbone.Router
- 26. Questions? Backbone - http://documentcloud.github.com/backbone/ Underscore - http://documentcloud.github.com/underscore Tikal - http://www.tikalk.com