Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

    View full-size slide

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

    View full-size slide

  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™?

    View full-size slide

  4. • 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

    View full-size slide

  5. • Easy extensibility
    • Small source code
    • Speed and efficiency
    • Limited API
    But Backbone.js also offers…

    View full-size slide

  6. • Extending Backbone’s prototype functions
    • Custom events (namespaced, eg. search:done)
    • Descriptive API functions
    Tips and Tricks

    View full-size slide

  7. • 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!

    View full-size slide

  8. Scenario #1
    CollectionView extends
    Backbone.View in order to reuse this
    common code over and over again

    View full-size slide

  9. • 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.)

    View full-size slide

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

    View full-size slide

  11. Backbone.Immutable = (function (Backbone, _) {
    var attrs = {};
    var Immutable = Backbone.Model.extend({
    ...
    });
    return Immutable;
    })(Backbone, _);

    View full-size slide

  12. ...
    constructor: function (attributes, options) {
    Backbone.Model.prototype.constructor.call(this, arguments);
    // Handle default attributes on instantiation
    attrs = attributes;
    },
    get: function(key) {
    return attrs[key];
    },
    ...

    View full-size slide

  13. ...
    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);
    }
    ...

    View full-size slide

  14. • 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

    View full-size slide