How to Develop Backbone Plugins (...for the greater good!)

Transcript

1. 1.

   How to develop Backbone plugins …for the greater good!

2. 2.

   Dimitris Tsironis Front-End Engineer at Splunk Inc. github/tsironis & twitter/tsironakos

   Who
3. 3.

   • Library that provides devs with isolated abstractions • No

   magic at all • 100% un-opinionated code • A lot of boilerplate, as well • all of which could lead to… Backbone.js or Barebone.js™?
4. 4.

   PROBLEMS

5. 5.

   • Modularized plugins that hook to Backbone.js • No boilerplate

   code! • Reusable, good for the environment :) • Ready to use collection of plugins (on Github) Solving this problem
6. 6.

   • Easy extensibility • Small source code • Speed and

   efficiency • Limited API But Backbone.js also offers…
7. 7.

   • Extending Backbone’s prototype functions • Custom events (namespaced, eg.

   search:done) • Descriptive API functions Tips and Tricks
8. 8.

   • Identify the problem(s) you’re trying to solve • Abstract

   the shit out of them • Solve for (x), not for specific applications • Share singletons across pages / modules • Take in mind extendability and future changes • Give API for everything contained inside, people (incl. you) will find ingenious ways to use your stuff Let’s get to work!
9. 9.

   Scenario #1 CollectionView extends Backbone.View in order to reuse this

   common code over and over again
10. 10.

    • Render all models • Handle add, reset, remove events

    • Use compiled template (Underscore’s memoize function is our friend) • Associate children views with models • Efficient DOM handling Features (batteries incl.)
11. 11.

    Scenario #2 Create a Backbone.Model which has immutable attributes

12. 12.

    Backbone.Immutable = (function (Backbone, _) { var attrs = {};

    var Immutable = Backbone.Model.extend({ ... }); return Immutable; })(Backbone, _);
13. 13.

    ... constructor: function (attributes, options) { Backbone.Model.prototype.constructor.call(this, arguments); // Handle

    default attributes on instantiation attrs = attributes; }, get: function(key) { return attrs[key]; }, ...
14. 14.

    ... set: function (key, val) { var data; if (key

    == null) return this; // Handle both `key, value` and `{key: value}` style arguments. if (typeof key === 'object') { data = key; } else { (data = {})[key] = val; } _.each(data, function(value, key) { if (_.isUndefined(attrs[key])) { attrs[key] = value; } else { console.warn("You're not supposed to change this value."); } }); }, toJSON: function() { return _.clone(attrs); } ...
15. 15.

    • http://backboneplugins.com/ (Derick Bailey’s book) • Backbone annotated source (not

    docs!) - http://backbonejs.org/ docs/backbone.html • Backbone.Marionette source code - https://github.com/ marionettejs/backbone.marionette • https://github.com/tsironis/backbone.immutable • https://github.com/jmorrell/backbone.obscura Resources
16. 16.

    None