SPA Route

Single Page Application (SPA) Route

To make an Single Page Application (SPA) User Friendly, Robust and Simple, Routing is the main factor. Here is planing and guide line to build and user friendly application. Simple URL/Token make the application simple for modern web application.

Config for Handle Server Side

//initialization
var CKi=CKi||{
    getType : function(object){
        return Object.prototype.toString.call(object);
    },
    isString : function(object){
        return CKi.getType(object) === '[object String]';
    },
    isObject : function(object){
        return CKi.getType(object) === '[object Object]';
    }
};

//ebis core context
CKi.ebis={
    getContexPath : function($, contextPath){
        $           = CKi.ebis.server;
        contextPath = $.protocol + '://' + $.host 
            + (!$.hasReverseProxy ? ':' + $.port : '')
            + '/'+ $.contextPath + '/' + $.language + '/';
        return contextPath;
    }
};

//ebis server context
CKi.ebis.server={
    hasReverseProxy : !0,
    contextPath     : 'ebis',
    language        : 'en',
    protocol        : 'http',
    host            : 'chorke.org',
    port            : '8080'
};

Modules, Submodules & Forms

CKi.ebis.modules = {
    M00 : 'system',        //token='system'
    M01 : 'security',      //token='security'
    M02 : 'resource',      //token='resource'
    M03 : 'human/resource' //token='human/resource'
};
CKi.ebis.subModules = {
    E : 'entries',  //token='entries'
    Q : 'queries',  //token='queries'
    R : 'reports',  //token='reports'
    S : 'settings', //token='settings'
    T : 'schedules' //token='schedules'
};
CKi.ebis.M03 = {
    E : {
        E03001 : {
            token : 'recruits',
            X01   : 'new',       //subForm='E03001X01', token='new'
            X02   : 'old'        //subForm='E03001X02', token='new'
        },
        E03002 : {
            token : 'allowance',
            X01   : 'ta',        //subForm='E03002X01', token='ta'
            X02   : 'da'         //subForm='E03002X02', token='da'
        },
        E03003 : 'performance',  //token='performance'
        E03004 : 'attendance',   //token='attendance'
        E03005 : 'payrolls'      //token='payrolls'
    },
    Q : {
        Q03001 : {
            token : 'recruits',
            X01   : 'new',       //subForm='Q03001X01', token='new'
            X02   : 'old'        //subForm='Q03001X02', token='old'
        },
        Q03002 : {
            token : 'allowance',
            X01   : 'ta',        //subForm='Q03002X01', token='ta'
            X02   : 'da'         //subForm='Q03002X02', token='da'
        },
        Q03003 : 'performance',  //token='performance'
        Q03004 : 'attendance',   //token='attendance'
        Q03005 : 'payrolls'      //token='payrolls'
    },
    R : {
        R03001 : {
            token : 'recruits',
            X01   : 'new',         //subForm='R03001X01', token='ta'
            X02   : 'old'          //subForm='R03001X02', token='ta'
        },
        R03002 : {
            token : 'allowance',
            X01   : 'ta',          //subForm='R03002X01', token='ta'
            X02   : 'da'           //subForm='R03002X02', token='ta'
        },
        R03003 : 'performance',    //token='performance'
        R03004 : 'attendance',     //token='attendance'
        R03005 : 'payrolls'        //token='payrolls'
    },
    S : {
        S02003 : 'gender',         //token='gender'
        S02004 : 'marital/status', //token='marital/status'
        S02005 : 'relation',       //token='relation'
        S02006 : 'religion',       //token='religion'
        S02007 : 'nationality'     //token='nationality'
    },
    T : {
        T05001 : 'appointment',    //token='appointment'
        T07001 : 'promotion'       //token='promotion'
    }
};

Logical Representation of Route

CKi.ebis.route={
    getRoutes : function(){
        var ebis       = CKi.ebis,
            route      = ebis.route;
            
        route.getModuleRoutes(ebis, route);
    },
    getModuleRoutes : function(ebis, route){
        var modules    = ebis.modules,
            subModules = ebis.subModules,
            basePath   = ebis.getContexPath(),
            baseToken  = basePath + '#!/',
            module, modObj, modToken;
            
        console.log(baseToken);
        for(module in modules){
            if(modules.hasOwnProperty(module)){
                modObj = modules[module];
                if(CKi.isString(modObj)){
                    modToken = baseToken + modObj + '/';
                    console.log(modToken);
                    route.getSubModuleRoutes(ebis, route, module, modToken);
                }
            }
        }
    },
    getSubModuleRoutes : function(ebis, route, module, modToken){
        var subModules = ebis.subModules,
            subModule, subModObj, subModToken;
        
        for(subModule in subModules){
            if(subModules.hasOwnProperty(subModule)){
                subModObj = subModules[subModule];
                if(CKi.isString(subModObj)){
                    subModToken = modToken + subModObj + '/';
                    console.log(subModToken);
                }
            }
        }
    }
};