Skip to content
Tim Branyen edited this page Sep 3, 2013 · 10 revisions

LayoutManager can be run in both browser and Node.js environments. There is a single canonical method of installing server side with NPM and multiple ways of loading inside of the browser.

Node.js

Ensure you have Node.js installed. The version should be at least 0.6, but you should probably use 0.8 or 0.10 to ensure fewer potential incompatibilities.

Open a terminal in your project directory and install with:

npm install backbone
npm install backbone.layoutmanager

This will automatically install all dependencies into your node_modules folder. You should install Backbone before LayoutManager, so that Backbone will be augmented with Layout. You can then require it and use as you would inside the browser environment.

An alternative and officially supported way of getting rid of the duplication of backbone dependencies is by running:

npm dedupe

Browser

Since there is no single agreed upon method of loading JavaScript inside of a web application, LayoutManager attempts to support as many efforts as possible without becoming a burden to maintain.

Basic script inclusion

If you wish to just get LayoutManager on the page, you need at the minimum Backbone, Underscore, and jQuery. Your HTML should look something like this:

<!-- Dependencies. -->
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>

<!-- LayoutManager. -->
<script src="backbone.layoutmanager.js"></script>

Asynchronous Module Definition (AMD)

If you are more adventurous you may want to use a dependency manager like RequireJS.

Make sure your configuration looks very similar to this:

require.config({
  // Ensure that RequireJS knows where to find your dependencies.
  paths: {
    jquery: "/path/to/jquery",
    backbone: "/path/to/backbone",
    underscore: "/path/to/underscore",
    layoutmanager: "/path/to/backbone.layoutmanager"
  },

  // Help RequireJS load Backbone.
  shim: {
    backbone: {
      deps: ["jquery", "underscore"],
      exports: "Backbone"
    }
  }
});

If you are using a different AMD loader, perhaps the use.js plugin will work for you.

JamJS

If you are even more adventurous you may want to try a package manager like JamJS. This is an excellent way to manage dependencies using the aforementioned Asynchronous Module Definition pattern.

To install, simply configure a JamJS environment and using the jam tool from NPM, run:

jam install backbone.layoutmanager

This will install the package and configure the dependencies for you. You can then simply run:

require(["backbone.layoutmanager"], function(LayoutManager) {

});

Bower

You may want to consider Twitter's Bower package manager, as it is better supported than JamJS.

Installing is similar to JamJS, configure the Bower environment and using the bower tool from NPM, run:

bower install layoutmanager