Mar 29, 2016

RequireJS with JointJS/Rappid

JointJS and Rappid now have full AMD/RequireJS support. In the past, a shim was needed to use JointJS or Rappid in a RequireJS project. That is no longer the case. All that is needed are these simple steps:

  • Configure the paths to JointJS/Rappid and its dependencies
  • Load JointJS/Rappid via require() or define() method
  • [optional] Set JointJS/Rappid as a global dependency for all of your application's modules
CONFIGURE THE PATHS TO JOINTJS/RAPPID AND ITS DEPENDENCIES

In your application's HTML file, you will need to first load RequireJS. Then you will need to load two JavaScript files; one that contains your RequireJS configurations and another that contains code for initializing your application. Here is a sample index.html file: 

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf8">
     <title>RequireJS and JointJS/Rappid</title>
</head>
<body>
     <script src="path/to/requirejs"></script>
     <script src="path/to/config.js"></script>
     <script src="path/to/main.js"></script>
</body>
</html>

And here is what your config.js would look:

require.config({
  paths: {
        'rappid': 'path/to/jointjs/or/rappid',

        // Dependencies for JointJS/Rappid:
        'jquery': 'path/to/jquery',
        'lodash': 'path/to/lodash',
        'backbone': 'path/to/backbone'
   },
  map: {
        '*': {
             // Backbone requires underscore. This forces RequireJS to load lodash instead.
             'underscore': 'lodash'
        }
  }
});

LOAD JOINTJS/RAPPID VIA REQUIRE() OR DEFINE() METHOD

The starting point of your RequireJS application is usually a main.js or some similarly named file. Here's an example:

// Load all your application's modules here. require([  'path/to/some-module' ], function() {  // Initialize application here. }, function(error) {  // Catches errors in case require fails.  console.log(error); });

And for a module that needs JointJS/Rappid, you would require it as a dependency, like this:

define([  'joint' ], function(joint) {  var graph = new joint.dia.Graph;  var paper = new joint.dia.Paper({    el: $('<div/>').addClass('paper').appendTo($('body')),    model: graph  });  var rect = new joint.shapes.basic.Rect({    size: {      width: 40,      height: 40    },    position: {      x: 160,      y: 160    }  });  graph.addCell(rect); });

That's it! If you're using JointJS/Rappid in more than one module, you might want to consider setting it as a global dependency. See the next section for how to do that.

JOINTJS/RAPPID AS A GLOBAL DEPENDENCY

Setting JointJS/Rappid as a global dependency can be useful because then you won't have to load it explicitly for each individual module. Instead you will load it once in your main application file and then make it available to your application's global scope so that all of your application's modules have access to the joint namespace.

For example, here's how your main.js file would look with this setup:

// Load global dependencies. require([  'joint' ], function(joint) {  // Set global dependencies here.  // These will be available to all AMD/RequireJS modules loaded after this point.  this.joint = joint;  // Now load all your application's modules here.  require([    'path/to/some-module'  ], function() {    // Initialize application here.  }, function(error) {    // Catches errors in case require fails.    console.log(error);  }); }, function(error) {  // Catches errors in case require fails.  console.log(error); });

And then one of your application's modules would look like this:

define(function() {  // Joint was already loaded and set as a global dependency.  // So we can use joint here without loading it again.  var graph = new joint.dia.Graph;  var paper = new joint.dia.Paper({    el: $('<div/>').addClass('paper').appendTo($('body')),    model: graph  });  var rect = new joint.shapes.basic.Rect({    size: {      width: 40,      height: 40    },    position: {      x: 160,      y: 160    }  });  graph.addCell(rect); }, function(error) {  // Catches errors in case require fails.  console.log(error); });

That's about it for using RequireJS with JointJS/Rappid. As always, if you are experiencing troubles and need some help, you can reach us via several methods that can be found on our support page.

Marcel Liker