Jingo: Module Management for Javascript

My new role is around creating the next generation of Digiterre’s customised CRM solution for the finanical industry. This has meant dusting off my Javascript skills, really relearning them as Javascript has come a long way since we last danced. One of the things I knew I wanted off the bat was a way to modularise and re-use Javascript classes, I knew from painful experience how quickly “scripting” in Javascript  can get out of control.

We wanted a framework that would allow us to decompose our functionality into logical units which declare their dependencies. If a developer required one of those modules, they wouldn’t have to worry about manually referencing all the required components in the correct order (and maintaining them)

After a look at the major players, I decided on Jingo and haven’t looked back. I really can’t sing its praises more highly. Go over and read about it from the horses mouth rather than me trying to paraphrase it. It requires a little more work if you want to “jingo-ise” your references like JQuery etc (I dont bother with jQuery but do with the others)


Here is an example of how it works from their wiki.

Advertisements

2 thoughts on “Jingo: Module Management for Javascript

  1. Larry McCoy says:

    Great tip. I’d be very interested in hearing more about how you integrated Jingo into Dynamic CRM JavaScript web resources. I have been looking into an effective way to manage JavaScript dependencies in CRM forms, but have struggled with the complexity that libraries like Jingo and Require.js introduce.

  2. adammills says:

    Hi Larry,
    we use folder based naming for our webresources.
    (http://msdn.microsoft.com/en-us/library/gg309473.aspx) – see Relative Urls

    Then all we have done is add a method to jingo to initialise it based on the type form we are in.

    jingo.formInit = function () {
    var isPreview = endsWith(window.location.pathname, ‘Tools/FormEditor/preview.aspx’);

    if (isPreview) {
    //preview mode
    jingo.init({ repos: { main: ‘../../webresources/dg_/Scripts’} });
    } else {
    jingo.init({ repos: { main: ‘../webresources/dg_/Scripts’} });
    }

    };

    In our forms we reference jingo.js and a script that calls jingo.formInit();
    and whatever entry code you may desire.

    function formInit() {

     jingo.formInit();

    jingo.anonymous({
    require: [‘My.Views’],
    exec: function() {
    var mainView = new My.Views.AccountForm();
    mainView.Init(Xrm.Page);

    }
    });
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: