Backbone views represent chunks of user interface logic tied to DOM elements. Views update based on changes to the model state and handle user actions by updating the model. Views help manage the scope and hierarchy of application logic through conventions and methods like delegateEvents(). Views are built on core jQuery methods and Backbone extends View prototypes with additional methods and properties.

1. bit.ly/bbbjq

3. Discrete chunk of logic
Tied to a DOM element
Updates based on model state
Feeds user actions back into app state
Helps manage app scope and hierarchy of app logic
Built around a few key jQuery methods

4. // Backbone.View
// -------------
// Backbone Views are almost more convention than they are actual code. A View
// is simply a JavaScript object that represents a logical chunk of UI in the
// DOM. This might be a single item, an entire list, a sidebar or panel, or
// even the surrounding frame which wraps your whole app. Defining a chunk of
// UI as a **View** allows you to define your DOM events declaratively, without
// having to worry about render order ... and makes it easy for the view to
// react to specific changes in the state of your models.
// Creating a Backbone.View creates its initial element outside of the DOM,
// if an existing element is not provided...
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
options || (options = {});
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
this.delegateEvents();
};
// Cached regex to split keys for `delegate`.
var delegateEventSplitter = /^(S+)s*(.*)$/;
// List of view options to be merged as properties.
var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'
// Set up all inheritable **Backbone.View** properties and methods.
_.extend(View.prototype, Events, {
// The default `tagName` of a View's element is `"div"`.
tagName: 'div',
// jQuery delegate for element lookup, scoped to DOM elements within the
// current view. This should be preferred to global lookups where possible.

5. It's slow
It's big
It's unecessary

6. Lets use them

7. Lets build a Leaflet View

8. Lets make a d3 View

9. Better yet, let's make these mixins
Add new behaviors to your Views
View "adapters" can override internal methods.
The public API stays mostly the same
Everything is a mixin if you try hard enough

10. _.extend(MapView.prototype, LeafletMixin);
_.extend(this, NativeViewMixin);
// Proxy MapView methods
_.each(['getBounds', 'setBounds', 'panTo'], function(method) {
this[method] = _.bind(map, map[method]);
});
this.setBounds(_.max(model.get('bounds'));
graphView.xDomain = _.bind(xScale, xScale.domain);
graphView.xRange = _.bind(xScale, xScale.range);
graphView.xDomain([0, max]);

11. _createElement
_removeElement
delegate
undelegate
undelegateEvents
_setElement
_setAttributes
$

12. Web Components are coming
Polymer is here
Angular Directives, Ember Components
Backbone Views
React

13. Excellent at managing UI state
Data manipulation and sync handling are rough
This is where Backbone comes in

14. Backbone's best features are persistence/sync and
data manipulation
Built on Underscore methods
Decorates plain objects and classes with powerful
utilities
Sync based on $.fn.ajax. Great UX

16. github.com/akre54