Integrating JointJS with RequireJS

Disclaimer - The following tutorial was created with a past version of JointJS. The tutorial is still provided for those who may face a similar problem, but it may no longer show the best practices of JointJS. You may encounter the following issues:

Use of outdated/deprecated API calls, or inheritance from superseded shape collections.
Use of SVG string markup for custom Element/Link shape definitions; we have since started recommending using JSON markup instead.
The Element and Link types defined may not serialize properly.
Other unexpected problems.

Our current recommendations on best practices can be found in the appropriate sections of the basic and intermediate tutorials.

Some people ask how to integrate JointJS with the RequireJS module loader. This tutorial describes how to do just that. Starting from JointJS v0.9, it is actually pretty simple. JointJS is in the AMD format which makes it easy to use it with RequireJS. JointJS exports only one global variable joint.

index.html

Let's start with our index.html file. This file includes only the require.js library, our stylesheets and defines what is the starting point of our application (in our case, main.js file):

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="joint.css" />
  </head>
  <body>
      <div id="app"></div>
      <script data-main="main" src="require.js"></script>
  </body>
</html>

For simplicity, we assume all the files are in the same folder as our index.html file.

RequireJS config, the main.js file

Now we can start with the more interesting part, our main.js file, containing the configuration of our modules needed by RequireJS. JointJS is dependent on jQuery, Backbone (which further depends on Underscore*).

The only thing we have to do is to define our module names and tell RequireJS where to find them (the paths object). Next, we have to trick Backbone to use Lodash instead of Underscore (this is because JointJS requires Lodash, not just Underscore). All the files can be downloaded from Download page.

require.config({
    paths: {
        jquery: './jquery',
        lodash: './lodash',
        backbone: './backbone'
    },
    map: {
        '*': {
            // Backbone requires underscore. This forces requireJS to load lodash instead:
            'underscore': 'lodash'
        }
    }
});

// Now we're ready to require JointJS and write our application code.
require(['joint'], function(joint) {
    var namespace = joint.shapes;
    var graph = new joint.dia.Graph({}, { cellNamespace: namespace });
    var paper = new joint.dia.Paper({ width: 600, height: 400, model: graph, cellViewNamespace: namespace });

    var elApp = document.getElementById('app');
    elApp.appendChild(paper.el);

    var rect = new joint.shapes.basic.Rect({
        position: { x: 50, y: 50 },
        size: { width: 100, height: 100 }
    });
    graph.addCell(rect);
});

* Note we previously mentioned that Backbone is dependent on Underscore but we actually use the Lodash library instead. This is becausae Lodash library is a drop-in replacement for Underscore extending it with more features that JointJS uses.