parrisneeds.coffee code, music, drinks

Why Dorsal.js

Problem 1: You have all these server side pages and lots of JS components that need to get initialized on every page.

Problem 2: You want to stop manually initializing your JS components with the same code over and over again.

Problem 3: Your backend developers don't really know JS, but they occasionally write some HTML.

Yea. Dorsal fixes all of that.

So what is Dorsal? In short, Dorsal allows you to markup your HTML with classes and data attributes and in return automatically initializes components. These components could be written using Backbone, Marionette, plain JS or whatever else!

Example:

Some developer writes some HTML somewhere on the website like so: <input type="checkbox" class="js-d-toggle" data-d-size="large" />

You had previously created a plugin called 'toggle', and it gets loaded onto the page (however you choose to do so).

var dorsal = requre('dorsal'),

      ToggleView = require('./toggle_view');

dorsal.registerPlugin('toggle', {
    create: function(options) {
        return new ToggleView(options.el, options.data.size);
    },
    destroy: function(options) {
        options.instance.remove();
    }
};

Somewhere on your page, after all the HTML has been written, and possibly after DOM ready you can run wire.

dorsal.wire();

Wire scours the DOM for js-d- prefixed classes, matches them with plugins and passes the element and options into the plugin.

Why???

During our recent responsive push at Eventbrite we needed to be able to allow everyone to simply and quickly initialize JS components. We anticipated our build system getting slower from 100 new files that needed to get run through the RequireJS optimizer. We also anticipated that all of these files would contain pretty much the same code. They would have looked something like:

define(function(require) {

    var SelectBox = require('styleguide/js/select'),
          ToggleSwitch = require('styleguide/js/toggle'),
          ResponsiveTable = require('styleguide/js/tables'),
          // ... up to 20 other plugins

    new SelectBox(el1);
    new Selectbox(el2);
    //... 20 other select boxes, 5 other toggle switches, etc

});

Basically all that, on 80+ pages.

Instead we created Dorsal, and internally what we call our standard component library. The component library loads up all of our standard components, which each have Dorsal plugins in them. Dorsal then runs on domReady and everyone is happy.

But WAIT there's more

Lately, we've been using Dorsal for more. We've been using it in the onRender methods in Marionette classes. We've been using it for one off components that we think might fit nicely into our styleguide eventually. With the lack of a pre-rendering service we've been using it on SEO sensitive pages. We basically were able to keep all our existing Backbone and Marionette code and make our workflow feel closer to React or Angular. We felt this was actually the largest missing piece from the Backbone/Marionette community and so we made it open source! Check it out Dorsal on NPM!