CODEWITHSUNDEEP
javascriptrequirejsamdr.js
Casey Flynn
Casey Flynn

Reputation: 14038

Advice on requirejs dynamic loading of modules or use optimization/bundle tool in my situation

I'm building a new web application that will consist of totally different interfaces/user experiences depending on what TYPE of user has just authenticated/logged in. Lets call these users Admins & Delegates.

Admins and Delegates have completely different functionality in this application. Only a small subset of my modules will be used by both. It's essentially two different client applications hooked up to my backend.

Should I create two different build files with the RequireJS optimizer, and then inject either of them into the page depending on what the server returns when the user performs a login? Or should I focus more on requirejs's dynamic module loading and just load the modules I need when I need them (thus running into a lot of extra http requests :/)

Upvotes: 2

Views: 964

Answers (1)

Andreas Köberle
Andreas Köberle

Reputation: 110892

We have a Backbone app, that shares a lot of views and models, but not all clients have all navigation points, and some models behave differently.

So first we have a single require entry point and a single require.config for every client.

Bootstrap-client1.js

requirejs.config({
  baseUrl: 'js/cfe/app',
  paths: {
    'common/ViewA': 'clients/client1/ViewA',
    'common/ModelB': 'clients/client1/ModelB',
    'common/ColletionC': 'clients/client1/CollectionC'
  }
});

requirejs([
  'common/App',
  'common/BaseSetup'],

  function(app, BaseSetup) {
    $(function() {

      BaseSetup.start();

      app.start();
    });
  }
);

So later on when we use a shared View that requires ModelB this will replaced with our client1/ModelB implementation.

For production we build a single compiled version for every client with the r compiler and change the source of the data-main attribute in the html file when the client request the html file.

Upvotes: 2

Related Questions