Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

How to switch between Production and Development system

April 15, 2008 by saki 1 Comment

Code in this post can be obsolete, however, principles and theory may still apply.

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
Next, we need 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
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:
1
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!
  • Author
  • Recent Posts
Follow me:
saki
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:
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

Filed Under: Know-how Tagged With: application, javascript, Know-how, php

Comments

  1. suman says

    August 23, 2012 at 11:43 am

    i need auto increment in extjs(EditorGridPanel) level

    Log in to Reply

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in