frameworks. • Uses MVC design patterns for creating easy to maintain applications. • Supplies solutions to very common pain points when developing large front end Javascript applications: • Persisting • Event binding • Window URL changing • Organization Friday, December 7, 12
all Javascript tool. • Backbone will get you 80% of the way there. There are plenty of awesome Backbone plugins that will extend the functionality you might be looking for. (Storage, Relations, Widgets, etc) • Agnostic framework. Bring whatever libraries, coding style, or whatever you like to the table, Backbone doesn’t care (too much). Friday, December 7, 12
to help prevent spaghetti Javascript code. Simple jQuery plugin calls work here and there but it can quickly become a mess. Is my code like this? How would I know? Friday, December 7, 12
that gives you access to all sorts of helpers that some browsers do not already give you access to. • Map, Reduce, Select, etc. • Compatible for all major browsers and uses ECMAscript5 functions when it can for additional performance. • Doesn’t pollute prototypes of native objects (String, Array, Object, etc). OK, HOW DO I GET STARTED? Friday, December 7, 12
manipulation (which you probably do) you must include either jQuery or Zepto. • To do anything involving third party REST APIs JSON2.js is required for IE. • All the dependancies must be loaded before Backbone is required. Friday, December 7, 12
your data models and dispatcher of notifications of changes to your data objects. Ignorant of the UI. Backbone.Model and Backbone.Collection • View - Collection of classes and elements representing the user interface. Ignorant of the business logic. Backbone.View • Controller - In between of the model and the view. Listens for notifications and fetches data from the model and displays them to the view. Backbone.View and Backbone.Router I guess I lied, it’s not really MVC, but it is a good way to describe the type of functionality that Backbone gives you. Friday, December 7, 12
control and persisting to an API. • Because object structures are in memory, it is much faster to read from an object than it is to crawl the DOM looking for fields. • Allows you to keep all of your business logic on your data models in a single place. Don’t put that in your views! Friday, December 7, 12
Backbone models in a “smart” array. • Built in functions from Underscore that allow for easy searching, filtering, and interating through the instances of your models. • Allows for event binding on the entire collection of models and synchronizing with web APIs. • Models synced from the API will use the class that is defined in the model attribute. this.collection.each(function(model) { .. }) Friday, December 7, 12
The magic behind the Backbone.Model and Backbone.Collection persisting and fetching. • Uses the “URL” key from the Model definition. • Assumes your back end is a REST resource. Friday, December 7, 12
JSON endpoint, you must override Backbone.sync. Doing this will make Model.save() or Collection.fetch() to function properly. This function must return an XHR object. Examples of why you might do this: • XML end point • Custom parameters required • Websocket API • method is the name of the CRUD operation: create, read, update, delete. • model is the instance of your Model or Collection that is trying to persist. • options is the settings object passed from the model action. Backbone.sync = function(method, model, options) { ... }; Friday, December 7, 12
within your application. • Handles HTML rendering, re-rendering, and maintaining DOM state for its own elements. • Binding events to a Model or Collection to allow for a complete separation from data and presentation. Friday, December 7, 12
All of which are dispatched through the routes object. • Enables back/forward button support from within your application. • Ability to use PushState with compatible browsers with graceful fallback to hashbang to non-modern browsers. • All of this is handled automatically by the Backbone.Router after Backbone.History.start() is called. Friday, December 7, 12
you. • While templating is not in the scope of what Backbone does, it does facilitate using a template from within the Backbone.View. • Many ways to render templates: • Mustache (Hogan, Handlebars) • EJS (Underscore, JST) • Haml Friday, December 7, 12
or ten attributes you need to present in this view? var html = "<ul>"; this.collection.each(function(model) { html += "<li><strong>" + model.get('user_name') + "</strong><p>" + model.get('tweet') + "</p><time>" + model.get('created_at') + "</time></li>" }); html += "</ul>"; GOOD <script type='text/template' id='myTemplate'> <li> <strong>{{user_name}}</strong> <p>{{tweet}}</p> <time>{{created_at}}</time> </li> </script> var html = $('#myTemplate').html() var template = Handlebars.compile(html); this.collection.each(function(model) { json = model.toJSON(); $('ul').append(template(json)); }; Ability to write HTML with very little markup. Clear separation of concerns and much easier to maintain. Friday, December 7, 12
!"" collections # $"" tweets.js !"" views # !"" tweet.js # $"" timeline.js !"" templates # !"" tweet.handlebars # $"" timeline.handlebars !"" helpers.js $"" application.js Group similar types of files together within folders to keep things organized and compartmentalized. Friday, December 7, 12
class to a very specific job. Within an application there can be views for many types of things. For an example a Twitter client: • View to maintain other views, act as a controller. • View to maintain a list of tweets. Each tweet will also have its own view. • Router used to set up application state and then initialize my “controller” view to set up the entire DOM. Friday, December 7, 12
cybozuinsideout
orimanabu
ishikawa_satoru
sat
bgpat
segavvy
faithandbrave
nenonaninu
risatube
champ
miichan
nishiuma
gr2m
tammyeverts
jnunemaker
irinanazarova
shpigford
sachag
denniskardys
rmw
garrettdimon
mongodb
eileencodes
phodgson
