Thank youQ’s- Who has used Mlibs? (jquery, prototype, mootools)- End to End frameworks? (Knockout, Ember, Spine)-Used backbone?
MS Developer Advisory CouncilData Access InsiderIdaho Startup Weekend Winner
A tool to know more about your documents, ppl, places and orgs, dates. Annotate, highlight & share (Think publishers)
No one really important!DEMO!
And down we go! Hope you have enough air….You'll be gone a whileStill not sure why you would you use bb? Lets talk about why
Backbone gives us ConventionConvention provides us some Familiarity, esp when working in teams, multiple projects
LightweightOnly 1200 lines of code including comments16kb
Models are the heart of any application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
Basic view- el, tag, class- Event handlingscoped selector view.$, this.$\\Note render returns this for chaining- Binding model events- models 'change'- bindAll scope (not needed)- 3rd ‘this’ arg, protip
Can define in script tags, or in code. Compile for performance
Collections are ordered sets of models. You can bind "change" events to be notified when any model in the collection has been modified, listen for "add" and "remove"events, fetch the collection from the server, and use a full suite of Underscore.js methods.
Using local storage, but could set url & fetch
Showing fetch from server
Best way to talk about routers, isto just take a look at one.
Pretty simple. DEMO!Start history.
Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. Events do not have to be declared before they are bound, and may take passed arguments.Really easy to decouple objects (models & views) w/ simple pub/subShow WW?
Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request and returns a jqXHR. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.DEMO!
Here's a list of all of the built-in events that Backbone.js can fire. You're also free to trigger your own events on Models and Views as you see fit.
Async Module Definitions – Design to load modular code asynchronously (browser or server)
Transcript of "Taming that client side mess with Backbone.js"
Backbone.js Oct 2010, DocumentCloud(Underscore.js, CoffeeScript)
What does it do?“Backbone.js gives structure to web applicationsby providing models with key-value binding andcustom events, collections with a rich API ofenumerable functions,views with declarativeevent handling, and connects it all to yourexisting API over a RESTful JSON interface.”
Other• History – a global router (per frame) to handle hashchange events or pushState – matchs the appropriate route, and trigger callbacks• Backbone.sync – method: the CRUD method – model: the model to be saved (or collection to be read) – options: success and error callbacks, and all other jQuery request options
Catalog of Events• "add" (model, collection) — when a model is added to a collection.• "remove" (model, collection) — when a model is removed from a collection.• "reset" (collection) — when the collections entire contents have been replaced.• "change" (model, options) — when a models attributes have changed.• "change:[attribute]" (model, value, options) — when a specific attribute has been updated.• "destroy" (model, collection) — when a model is destroyed.• "sync" (model, collection) — triggers whenever a model has been successfully synced to the server.• "error" (model, collection) — when a models validation fails, or a save call fails on the server.• "route:[name]" (router) — when one of a routers routes has matched.• "all" — this special event fires for any triggered event, passing the event name as the first argument.