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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 |
Makefile
(file with rules for make
program):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 |
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 namelearnfromsaki.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:
1 |
make install |
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!Latest posts by saki (see all)
- Ext, Angular, React, and Vue - June 27, 2019
- The Site Resurgence - February 11, 2018
- Configuring ViewModel Hierarchy - June 19, 2015
i need auto increment in extjs(EditorGridPanel) level