$30 off During Our Annual Pro Sale. View Details »

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

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

Dimitris Tsironis

April 09, 2015
Tweet

More Decks by Dimitris Tsironis

Other Decks in Technology

Transcript

  1. How to develop Backbone plugins …for the greater good!

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

    Who
  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. PROBLEMS

  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. • Easy extensibility • Small source code • Speed and

    efficiency • Limited API But Backbone.js also offers…
  7. • Extending Backbone’s prototype functions • Custom events (namespaced, eg.

    search:done) • Descriptive API functions Tips and Tricks
  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. Scenario #1 CollectionView extends Backbone.View in order to reuse this

    common code over and over again
  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. Scenario #2 Create a Backbone.Model which has immutable attributes

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

    var Immutable = Backbone.Model.extend({ ... }); return Immutable; })(Backbone, _);
  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. ... 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. • 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. None