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='old'
        },
        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='new'
            X02   : 'old'          //subForm='R03001X02', token='old'
        },
        R03002 : {
            token : 'allowance',
            X01   : 'ta',          //subForm='R03002X01', token='ta'
            X02   : 'da'           //subForm='R03002X02', token='da'
        },
        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);
                    route.getFormRoutes(ebis, route, module, subModule, subModToken);
                }
            }
        }
    },
    getFormRoutes : function(ebis, route, module, subModule, subModToken){
        var modObj = ebis[module],
            forms  = modObj&&modObj[subModule],
            form,  formObj, formToken;
            
        for(form in forms){
            if(forms.hasOwnProperty(form)){
                formObj = forms[form];
                if(CKi.isString(formObj)){
                    formToken = subModToken + formObj + '/';
                    console.log(formToken);
                }else if(CKi.isObject(formObj)&&formObj.token){
                    formToken = subModToken + formObj.token + '/';
                    console.log(formToken);
                    route.getSubFormRotues(formObj, formToken);
                }
            }
        }
    },
    getSubFormRotues : function(subForms, formToken){
        var subform,
            subFormObj,
            subFormToken;
        
        for(subForm in subForms){
            if(subForms.hasOwnProperty(subForm)&&subForm!='token'){
                subFormObj = subForms[subForm];
                if(CKi.isString(subFormObj)){
                    subFormToken = formToken + subFormObj + '/';
                    console.log(subFormToken);
                }
            }
        }
    }
};

Generated SPA Routes

CKi.ebis.route.getRoutes()
/*
-------------------------------------------------------------------------------
generate route for CKi.ebis.M03
-------------------------------------------------------------------------------
http://chorke.org/ebis/en/#/
http://chorke.org/ebis/en/#/human/resource/
http://chorke.org/ebis/en/#/human/resource/entries/
http://chorke.org/ebis/en/#/human/resource/entries/recruits/
http://chorke.org/ebis/en/#/human/resource/entries/recruits/new/
http://chorke.org/ebis/en/#/human/resource/entries/recruits/old/
http://chorke.org/ebis/en/#/human/resource/entries/allowance/
http://chorke.org/ebis/en/#/human/resource/entries/allowance/ta/
http://chorke.org/ebis/en/#/human/resource/entries/allowance/da/
http://chorke.org/ebis/en/#/human/resource/entries/performance/
http://chorke.org/ebis/en/#/human/resource/entries/attendance/
http://chorke.org/ebis/en/#/human/resource/entries/payrolls/
http://chorke.org/ebis/en/#/human/resource/queries/
http://chorke.org/ebis/en/#/human/resource/queries/recruits/
http://chorke.org/ebis/en/#/human/resource/queries/recruits/new/
http://chorke.org/ebis/en/#/human/resource/queries/recruits/old/
http://chorke.org/ebis/en/#/human/resource/queries/allowance/
http://chorke.org/ebis/en/#/human/resource/queries/allowance/ta/
http://chorke.org/ebis/en/#/human/resource/queries/allowance/da/
http://chorke.org/ebis/en/#/human/resource/queries/performance/
http://chorke.org/ebis/en/#/human/resource/queries/attendance/
http://chorke.org/ebis/en/#/human/resource/queries/payrolls/
http://chorke.org/ebis/en/#/human/resource/reports/
http://chorke.org/ebis/en/#/human/resource/reports/recruits/
http://chorke.org/ebis/en/#/human/resource/reports/recruits/new/
http://chorke.org/ebis/en/#/human/resource/reports/recruits/old/
http://chorke.org/ebis/en/#/human/resource/reports/allowance/
http://chorke.org/ebis/en/#/human/resource/reports/allowance/ta/
http://chorke.org/ebis/en/#/human/resource/reports/allowance/da/
http://chorke.org/ebis/en/#/human/resource/reports/performance/
http://chorke.org/ebis/en/#/human/resource/reports/attendance/
http://chorke.org/ebis/en/#/human/resource/reports/payrolls/
http://chorke.org/ebis/en/#/human/resource/settings/
http://chorke.org/ebis/en/#/human/resource/settings/gender/
http://chorke.org/ebis/en/#/human/resource/settings/marital/status/
http://chorke.org/ebis/en/#/human/resource/settings/relation/
http://chorke.org/ebis/en/#/human/resource/settings/religion/
http://chorke.org/ebis/en/#/human/resource/settings/nationality/
http://chorke.org/ebis/en/#/human/resource/schedules/
http://chorke.org/ebis/en/#/human/resource/schedules/appointment/
http://chorke.org/ebis/en/#/human/resource/schedules/promotion/
-------------------------------------------------------------------------------
*/

Updates Recommended

CKi.ebis.route.getRoutes()
/*
-------------------------------------------------------------------------------
generate route for CKi.ebis.M03
-------------------------------------------------------------------------------
http://chorke.org/ebis/en/#/human/resource/batches/
http://chorke.org/ebis/en/#/human/resource/batches/appointment/
http://chorke.org/ebis/en/#/human/resource/batches/promotion/
-------------------------------------------------------------------------------
*/