Converting an existing Backbone.js project to Require.js (ozkatz.github.io)

I thought Backbone and Require were 2 separate things?

Yeah or you could start with YUI and have real dependency management from the start.

I'm really puzzled by the enthusiasm around RequireJS. I've read up on it, I've built several large JS applications (~100 models, views, whatevers in ExtJS and Knockout), have been involved with a large BackboneJS/RequireJS application and am currently rebuilding a large site in AngularJS. AFAICT, RequireJS did not solve any problems that I had more easily solved with proper namespacing (yes, the feared global, e.g. TheProject.controllers.chrome.SessionController) or that AngularJS doesn't solve more gracefully.

Instead, RequireJS yielded a fairly verbose and error-prone header* coupled with large and distinct JS downloads for each and every page. Add in Backbone's verbosity and it's boilerplate and hand-wiring all the way down. Just the kind of thing for when you want to handcraft an artisan website, but not so great for cranking out code.

* Good luck catching typos when you're pulling in 20 modules and you lose synchronization between the strings and the vars. Here's a simple example:

    define([
      'jquery',
      'handlebars',
      'backbone',
      'mymodel',
      'mycontrolleranimals',
      'mycontrollerpeople',
      'myview_cats',
      'myview_dogs',
      'myview_birds'
      ],
    function(
      $,
      Handlebars,
      Backbone,
      MyModel,
      MyControllerAnimals,
      MyControllerPeople,
      MyViewDogs,
      MyViewCats,
      MyViewBirds) {

Sure, you caught the error because you were looking for it, but what happens in a RequireJS application is that you get weird errors in your application because you were trying to use the MyViewDogs, but myview_cats was actually bound to that variable.

To be perfectly honest, I didn't build the system, so don't that it was configured correctly.

  define(function (require) {
    'use strict';

    var Backbone = require('backbone');
    var Handlebars = require('lib/handlebars/handlebars');
    var someTemplate = require('text!component/templates/some-template.hbs');

    angular.module('app').controller('someController', function ($scope, ModelService, AuthService) {
      $scope.something = 'Blah';
    });

    angular.module('app').controller('someController', ['$scope', 'ModelService', 'AuthService', function ($scope, ModelService, AuthService) {
      $scope.something = 'Blah';
    }]);

   define(function(require) {
      var $ = require('jquery'),
          Handlebars = require('handlebars'),
          Backbone = require('backbone'),
          MyModel = require('mymodel'),
          MyControllerAnimals = require('mycontrolleranimals');
          

Just use npm and browserify. Way simpler and you are already using npm already. Let each module manage the dependencies it needs.

The RequireJS plugin system is really useful.

Alex Sexton's handlebars plugin is a great example of what sets this apart: https://github.com/SlexAxton/require-handlebars-plugin

- The javaScript code only sees the compiled template function

- Handlebars partials and helpers are automatically discovered and registered as needed

- The optimizer can be used to precompile all template code, makes for fast page loads

I've been using this with an i18n solution that folds in the MessageFormat.js project as well, which makes for a nice pluralization system even if you don't need true localization.

Minor nitpick which might simplify your life - instead of declaring dependencies in the header (i.e. define(['xxx'],..)), just use any of your dependencies with require('') inside your code. I.e. do something like this:

  define(function() {
    var $ = require("jquery");
  });

This will require one module per file and either define aliases inside config.js or using full path to the modules, but will not push you to define any dependencies upfront.

Also as a bonus, when you use r.js optimizer, which will concatenate your .js file into one giant file, it automatically resolve dependencies and rewrite header for you.

Also minor gotcha I had to deal with - since requirejs literally parse JS code for any require("..") calls, you can not put module name into variable and do require(variable_name) unless this code already loaded in the current context. So try always put actual name into require("...") call.

disclaimer: working on quite large require.js powered app - https://www.myedu.com/ - not entire app is converted into require.js, but you can already checkout My Jobs page to get an idea of what is possible - e.g. async loading of various submodules when needed depending on current route.

Has anybody gotten Require.js to work with a CDN (say Cloudfront) and on IE browsers (below IE9) ?

We had faced poor load time performance because of this.

Perhaps someone can clue me in, because I'm still at a loss for why there's so much hype built around Require.js.

I develop JS primarily for the frontend, and I use Grunt, a global namespace, and concat (or similar tooling) to piece things together.

Doesn't r.js execute dependency resolution code at run time? Can all references to r.js be fully compiled out? Even a wrapper like Almond seems to leave behind this kind of extra cruft. I don't want any dependency resolution code in the production build, because that's a problem that needs to be solved at compile time.

One of the benefits of RequireJS is runtime script loading. You can configure RequireJS to exclude some rarely used functionality/file from the minified asset build -- The extra file will only be fetched when needed.

To Ruby on Rails users I recommend the requirejs-rails Gem -- it automatically integrates RequireJS with the asset pipline. It can also server templates in AMD compatible format instead of throwing them into the JST[] Array.