External JS for Manager Pages

So one of the moves MODx Revolution has done recently is move its JS scripts to external files. Some have asked about the motivation for such a move, and the explanation is pretty simple...

...caching.

 Pre-this-move, the JS to initialize each manager page was inline in the Smarty template. This was great for the time, but as the JS started to get more and more complex with new Ext2 functionality, the JS got longer and longer, and started to clutter. Also, many IDEs such as Eclipse and Aptana weren't able to take advantage of code hinting, coloring or debugging when the JS was inline.

So, we moved to putting as much of the JS in external files, in the sections/ directory of the js template. This allowed the browser to cache the JS file (best) and gave each page it's own JS-driven Ext.Component. An example was such for creating a context:

Ext.namespace('MODx');
Ext.onReady(function() {
    new MODx.Context();
});

MODx.Context = function(config) {
	config = config || {};
	Ext.applyIf(config,{
		form: 'mutate_context'
		,fields: {
			key: _textfields['key']
            ,description: _textareas['description']
		}
		,actions: {
            'new': 'context/create'
            ,edit: 'context/update'
            ,cancel: 'context'
        }
        ,buttons: [{
            process: 'create'
            ,text: _('save')
            ,method: 'remote'
            ,reload: true
        },{
            process: 'cancel'
            ,text: _('cancel')
            ,params: { a: 'context' }
        }]
        ,loadStay: true
	});
	MODx.Context.superclass.constructor.call(this,config);
};
Ext.extend(MODx.Context,MODx.Component);

As you can see, this allowed a lot of flexibility on manager page design, as well as keeping yet another block of code separate from the content. Another point for proper MVC programming.