Preface

This article it the follow up of the Writing a Big Application in Ext post and it assumes that your application is written, at least to some degree, that way. It also assumes that the server side language is PHP 5.x, other users can take the idea and write the server side logic in their languages. It is written on and for Linux environment, again, users of other systems must accommodate it to their environments.

What’s the difference anyway?

On a development system we want fast cycle of edit-file/run-application. Also, we want to have access to human readable, fully commented files into which we can step with Firebug debugger to see what is happening when code runs. If your application consists of 100 javascript files we want them all individually included in page head to be able to quickly edit/reload page/see the result. On a production system we want fastest load possible, no debugging, and possibly to prevent unauthorized users or attackers to read our files. No comments are needed in files.

The Files

We have our source javascript files but we need a bit more. First of all we need a file list that would define which files and in which order we will include. This file list will be used by both switch logic and Makefile that will create the compressed version of sources. An example of such file list can be:

FILES=
    Ext.ux.grid.Search.js 
    Ext.ux.IconMenu.js 
    Ext.ux.IconCombo.js 
    Ext.ux.ThemeCombo.js 
    Ext.ux.LangSelectCombo.js 
    Ext.ux.grid.RowActions.js 
    Ext.ux.grid.CellActions.js 
    Ext.ux.tree.ArrayTree.js 
    Ext.ux.FileUploader.js 
    Ext.ux.UploadPanel.js 
    Ext.ux.FileTreeMenu.js 
    Ext.ux.FileTreePanel.js

Next, we need Makefile (file with rules for make program):

include filelist

application-all.js: application-all-debug.js
    java -jar ~/bin/yuicompressor.jar 
        application-all-debug.js > application-all.js

application-all-debug.js: $(FILES)
    cat $(FILES) > application-all-debug.js

clean:
    rm -f application-all-debug.js application-all.js

install: application-all.js
    # whatever you need to do to upload 
    # new version to production server

You can download yuicompressor here and you may need to install some “devel tools” and java on your Linux box for the above to run.

The Switch

We need a server-side logic that would generate the includes for individual files on the development system and one-file include on productions system. Decision what system it is running on can be also automatic. For example, our public, production web server has name learnfromsaki.com and our development system has name extjs.localhost. We can easily check if "extjs.localhost" === $_SERVER["SERVER_NAME"] and if yes we can run development branch if not we run production branch.

The Development Cycle

With all this in place, if you add a file you just add it to the file list, test it and debug it on the development system and if everything is works you issue the command:

make install

The compressed version is created and it is uploaded to your production system. The same is true for editing of a file, you only won’t modify your file list. If you delete file, just remove its line from file list and make install.

Conclusion

Hopefully this can make your developer’s life easier; I couldn’t live without it. The complete working example of the above system is here, with manual switch for demonstration purposes. Enjoy!