Downloaded 32 times
Uploaded byOren Farhi
Introduction to Backbone - Workshop
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
Introduction to Backbone - Workshop
- 1.
- 2. Oren Farhi Front EndArchitect, 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 companiesbuild, 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 “Actionsspeak 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 isthe 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: Allwe 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 itgood 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 abackbone. When used properly It keeps one's head Out of one's butt Rand Macivor
- 11. What we're goingto do today: https://github.com/tikalk/backbone-workshop
- 12. Backbone.Model Where JSON datais stored REST, Constructor, Manually Data Change Events Works With: Collection, View Methods: set - validate get escape clear fetch save (REST) - parse destroy (REST)
- 13.
- 14. Backbone.Model - PRACTICE Modelproperties: defaults, Model Methods: initialize, set, get
- 15. Backbone.View A Controller fora 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.
- 17. Backbone.View - PRACTICE Viewproperties: 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.
- 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
- 21.
- 22.
- 23. Backbone.Router Navigation Handling (bookmarks) Listensto 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.
- 25.
- 26. Questions? Backbone - http://documentcloud.github.com/backbone/ Underscore- http://documentcloud.github.com/underscore Tikal - http://www.tikalk.com