1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default Ext Application design question

    Ext Application design question


    Hi, Im working on a ext based application with a frame loading 15+ different pages with the updater. And I'm having trouble with where to put the scripts.

    For example there's a page with a user grid and dialogues to add or remove users. Should I put this in the page itself or load a global js file with all the scripts for all pages?

    Right now I'm doing the first thing but now scripts get loaded every time I reload a page. This way more variables and functions are loaded on every page view. And some code is executed more then once.

    What would be the best solution?

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Maybe I cannot answer your question fully but what works for me are the following policies. Understand, these policies are fully based on my experiences with Ext and they are not the "official" Ext policies. Also I would welcome Jack or somebody of Ext team to review them, add to them or correct them.

    So here they are:

    1. Distinguish between instantiation time and runtime. During instantiation time the objects are created which does not necessarily mean that they are initialized or that the UI is in its final appearance.
    2. Minimize the instantiation code. This is espacially important when extending Ext classes because putting a complex processing in constructors impairs the application load time.
    3. Use lazy (only when needed) creation or initialization whenever possible. Let's say you have a context menu with 20-30 items in some submenu structure. What may happen is that user never right-clicks the page. Therefore, create and initialize components only when they are really needed.
    4. Avoid using undocumented Ext functions and variables as much as possible. The reason for this is that if a function or variable is undocumented it may easily change in next versions which would lead to breaking the functionality of the app on Ext upgrade.
    5. If you add a method to an Ext class and if you are going to use this method more than once, consider extending the base class. It's really pain and waste of time to find a bug in such a method and then go through code to fix it many times.
    6. Avoid addressing of Ext objects directly use getXXX methods instead. For example: layout.regions.center is same as layout.getRegion('center'). Use the latter.
    7. Do not try to use "clever tricks" in your code. They are nice for sure but you yourself may forget how they work in a couple of weeks. If you cannot refrain from doing so, write detailed comment that fully describes how such trick works.
    8. Write your application in one file if possible.
    9. Write your extended classes in separate files one file per extension and include only if needed.
    10. Create your own namespace and keep it clean an well maintained.
    11. Write your code as if you would write it for somebody else to read and understand easily. This includes good variables and functions naming, putting related parts of code as close to each other as possible, consistent indenting and bracketing, writing commas at the beginning of lines, rich and descriptive commenting, etc.

    I hope it helps.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Hi thank you for your reply. This is something I came up with. Would this be a good approach? (sorry for long reply )

    Code:
    MyApp = function(){
    }();
    
    MyApp.Frame = function()
    {
    	var _userid = 0;
    	var _username = "";
    	var _isAdmin = false;
    	
    	var _updater = new Ext.UpdateManager("content"); ;		
    	_updater.loadScripts = true;
    		
    	return {
    		login : function(u, p) {
    		},
    		
    		navigate : function(url) {
    		
    		}
    }();
    
    MyApp.Users = function(){
    }();
    
    MyApp.Users.Grid = function() {
    	var _ds;
    	var _cm;
    	var _grid;
    	
    	function _init() {
    		_ds = new Ext.data.Store(...);
    		_cm = new Ext.grid.ColumnModel(...);
    	}
    	
    	function _renderCell(value, cell, record) {
    		// Custom render a cell
    	}
    	
    	return {
    		
    		render : function(container) {
    			if(!_ds) _init();
    			
    			var grid = new Ext.grid.Grid(container, ...);  
    			// Add toolbar etc
    			
    			newUserButton.handler = MyApp.Users.AddUserDialog.show;
    		}
    		
    	}
    
    }();
    
    MyApp.Users.AddUserDialog = function() {
    	var _store;
    	var _showBtn;
    	var _dialog;
    	var _form;
    	
    	function _init()
    	{
    		_dialog = new Ext.BasicDialog(...);
    		_form = new Ext.form.Form(...);
    	}
    	
    	function doSubmit()
    	{
    		// Submit form
    		// Add data to store
    	}
    	
    	return {
    		
    		init : function(store, showBtn) {
    			if(!_dialog) _init();
    			
    			_store = store;
    			_showBtn = showBtn;
    		},
    		
    		show : function() {
    			_dialog.show(_showBtn.dom);
    		},
    		
    		close : function() {
    			_store.add(record);
    		}
    }();

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Hmmm,

    it's quite unusual, although, it would maybe work. Have you studied examples? You should also watch Douglas Crockford videos http://www.crockford.com/javascript/ bottom left of page.

    The overall app structure would be:
    PHP Code:

    myNameSpace 
    myNameSpace || {};
    myNameSpace.myApp funcion() {

        
    // private stuff (variables, methods) e.g.
        
    var myPrivateVar 4;
        
        function 
    myPrivateFun() {
        };

        return {
            
    // public stuff
            
    init: function() {
                
    // your init here
            
    }
        };
    }();

    Ext.onReady(myNameSpace.myApp.initmyNameSpace.myApp); 

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,503
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, the usual thing would be to return your application object, fully initialized in one call:

    Code:
    MyApp = function()
    {
        var private = "nobody gets to see this";
        return {
            Frame: function() {
            }(),
    
            Users: function() {
            }(),
    
        };
    }();
    You can create the returned application object before the actual "return" statement, so you can put properties into it:

    Code:
    MyApp = function()
    {
        var private = "nobody outside this gets to see this, " +
            "but all the application singletons can";
    
    //  nobody outside this gets to call this...
        function privateFunc() {
        };
    
    //  Initialization-time function used below
        function createFrame() {
            var userId = 0;
            return {
                login: function() {},
                navigate: function() {}
            };
        }
    
    //  Set up the returned "application" object
        var result = {};
    
    //  Put publically accessible properties into it
        result.Frame = createFrame();
    
        result.Users = {}
    
    //  Return the fully initialized application object to user code
        return result;
    }();
    This way, all your singletons can access the private variables in your app, so they can cooperate.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Ok that makes sence. and thank you for the videos

    But this way when I have methods like myNameSpace.myApp.Users.AddDialog.show() I've got like 5 or six levels of identation. Whats wrong with adding things to the myApp object? (myApp.Users = function () {...}) Isn't Ext doing this the same way?

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    You see, I would add another levels only if it would be extension classes. Like this:

    PHP Code:
    myNameSpace.myGrid = function() {
        
    // constructor here
    };

    Ext.extend(myNameSpace.myGridExt.grid.Grid, {
        
    // public methods here
    }); 
    Then, you do not address that long paths from within myApp. Instead:

    PHP Code:
    myNameSpace.myApp funcion() {

        
    // private stuff (variables, methods) e.g.
        
    var myPrivateVar 4;
        
        function 
    myPrivateFun() {
        };

        return {
            
    // public stuff
            
    init: function() {
                var 
    grid = new myNameSpace.myGrid('container', {
                    
    // grid config here
                
    });
                
    grid.render();
                
                
    // rest of your init here
            
    }
        };
    }();

    Ext.onReady(myNameSpace.myApp.initmyNameSpace.myApp); 
    Note: In the above example: To extend the standard Ext.grid.Grid would make sense only if you would add your functionality that you want to use more than once (Policy #5).


    I'll give you an example: I've created Ext app for managing privilege system of my application. There I needed to use clients grid, users grid and privileges grid. The overall framework is same as above and what I do in the init function is roughly this:

    PHP Code:

    var clientGrid = new Ext.grid.EditorGrid(....);
    var 
    userGrid = new Ext.grid.EditorGrid(....);
    var 
    privGrid = new Ext.grid.EditorGrid(....); 
    Then I add grids to panels, there are event handlers, XHR communication with server, etc, but the point is: I have three variables and that's it.

    Hope it helps.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Ok you've got a point there. But what if for user management I've got a grid, and some dialogs. Wouldn't it be better to have these grouped together in a object?

    PHP Code:
    myNameSpace.myApp.Users = function() {
        var 
    grid;
        var 
    addDialog;

        function 
    initGrid() { }
    }


    myNameSpace.myApp.Users.addDialog = function() {
        var 
    theDialog;
        var 
    theForm;
        var 
    fields;

        ...

    This way I also can split my application in seperate files (Frame.js, Users.js etc, Will pack them together again afterwards) This makes it easier to maintain. Or are there really bad downsides to this approach?

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Well, it's up to you if you write your app in separate files in fact. My experiences are against it (Policies #8 and #9) and the main rationale behind those two policies is maintainability.

    You see, Ext is very powerful and it makes the majority of dirty work for you. The consequence is that your app is quite short. My privilege system app is cca 600 lines (excluding my extended classes) and I have everything together in one file. If I need to debug I just open this file and use editor's (I use vim) search functions and I'm where I want to be in a second. Don't need to first figure out in which file is the part causing troubles, then click through project tree to find the file and wind up in 10 open files and forgetting where I've changed and what.

    Further, if my debugging is a disaster I'll just undo in one file and can start all over again.

    Understand, I do not want to force on you my programming or debugging style or habits. Just take it as a viewpoint of the experienced coder. (Maybe not that much in Ext but also in another languages.)

    Therefore, in Ext, I use the following:
    1. One app = one file
    2. One class = one file
    unless there are really strong reasons for splitting.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Haha I understand you dont want to force anything on me, but I respect your opinion. I'm working on a pretty big project so I'm trying to think of a good way to organize things, so any suggestions are welcome.

    I'll use a php script to pack all the files together (Example: source / join / compress) This way I have a good overview when coding, while still being able to debug as you say.
    Last edited by JorisA; 13 May 2007 at 7:07 AM. Reason: example links updated

Thread Participants: 2