Question

I have been working on a javascript application for a long time now, it started out quite small and I was the only one working on it. However, it’s getting quite large. I would like to bring in another developer to speed up the work.

The problem is, this application consists of just one js file (15000 lines of code), working together on this app in the current situation would bring me a lot of misery when merging our work (I’m using git).

The app is built on Douglas Crockford’s base2 library. It also uses jQuery for DOM manipulation, jQuery UI, Modernizr and a few others.

It’s structured like this:

App = {};
App.model = {};
App.view = {};
App.controller = {};

App.main = base2.Base.extend({
    // uses models, views, controllers
});

App.model.AbstractModel = base2.Base.extend({
    constructor: function(){ ... },
    someMethod: function(){ ... }
    // etc.
});

App.model.AModel = App.model.AbstractModel.extend({
    // override some method
    someMethod: function(){ ... }
});

Now my question is, as the title states: (how) can I use RequireJS to make this app modular, consisting of separate files, with the eye on easier cooperation with other developers? Is RequireJS a good choice or should I go down a different path?

Answer 1

Yes, I think that’s a good path to choose, it will improve the quality and maintainability of your code.

1. you split the modules into separate files
2. for each of the modules you figure out what are the dependencies among other modules
3. you change the code in modules something like the following

From

App.model.AModel = App.model.AbstractModel.extend({
    // override some method
    someMethod: function(){ ... }
});

To

// I'm using shortened syntax here 
// http://requirejs.org/docs/api.html#modulenotes
define(function (require) {
  // here you are listing dependencies as local closure variables
  var AbstractModel = require('model/AbstractModel');

  var AModel = AbstractModel.extend({
    // override some method
    someMethod: function(){ ... }
  });

  // here you are returning the module
  return AModel;
});

As for dependencies like jQuery, at SoundCloud we decided to just include them minified and concatenated as globals (the way they work with regular script tags), without wrapping them in AMD module definitions.

You will also probably have main app.js that will require all these modules and kick off the app:

require(
  ['models/amodel', 'views/main'/*, 'more', 'modules', … */], 
  function (Amodel, Main /*, more, modules */) {
    new Main({
       model: Amodel
    });
  }
);