1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Switzerland
    Posts
    24
    Vote Rating
    6
    g.sidler is on a distinguished road

      1  

    Default Lessons learned using the Sencha SDK tools

    Lessons learned using the Sencha SDK tools


    Recently I created an optimized extjs build for my application using the Sencha SDK tools. The goal was to improve loading performance of my application by creating a leaner build of all JS classes (Ext JS framework and my own classes) that my application uses but nothing more. I just spent a painful day of debugging the compiled build and thereby learned some surprising facts about the Sencha SDK tool and the extjs builds coming with the distribution. I wanted to share this with you.

    My application has been in heavy production use for about nine months now and I recently upgraded to ExtJS 4.1. To compile an optimized build I used the Sencha SDK tools and followed the instruction in this document (See chapter 3 Deployment). Only later I discovered this excellent document.

    When I tested the optimized build the application was throwing an exception:

    Uncaught Ext.Error: Registering duplicate id "XYZ" with this manager app-all.js:6

    This exception was thrown in function register() of class Ext.AbstractManager. Puzzling! How come the optimized build throws an exception that the default ext-all.js build does not throw? After all, the optimized build is supposed to be a subset of all used classes of the default build. I got some hints from Evan in another thread. He suggested that the presence of debug code could be the reason for the exception thrown by my optimized build. At first this didn't make sense to me. The Sencha SDK tool certainly would not compile an optimized build with debug code in there, right? Wrong!

    I looked at the source code of the function throwing the exception and I discovered that it does contain a block of debug code, marked with <debug></debug> tags on comment lines.

    Code:
    register: function(item) {
        //<debug>
        var all = this.all,
            key = all.getKey(item);
        if (all.containsKey(key)) {
            Ext.Error.raise('Registering duplicate id "' + key + '" with this manager');
        }
        //</debug>
        this.all.add(item);
    }
    I concluded that the SDK tool removes this block of debug code when it compiles an optimized build. Wrong. When I checked the optimized build I found that the debug code was there; only the comment lines had been removed. This explained why the optimized build was throwing an exception while the default ext-all.js build was not. It was not running the same code. I find this a really unexpected default behavior of the SDK tool and something important to know.

    Then I discovered that the jsb3 config files used by the Sencha SDK tool support a debug option for each build target which controls if debug code is included in the output or not. After I disabled the output of debug code, my application again was working identically to the version using the full ext-all.js build.

    I went on to check the different builds of extjs delivered with the distribution for debug code:
    • ext-all.js: No. As expected, the debug code is not present in the production build.
    • ext-all-debug.js: No! Surprise! The debug build does not contain debug code!
    • ext-all-debug-w-comments.js: No! No debug code and no comment lines with debug tags.
    • ext-all-dev.js: Yes!
    To summarize, I learned two lessons today:
    • By default the Sencha SDK tool compiles a minimal and compressed build but does not remove debug code. That needs to be configured explicitly by the user.
    • The debug versions of the extjs builds do not contains debug code. Only the dev-version does.

    Gabe
    Last edited by g.sidler; 29 Jun 2012 at 4:51 AM. Reason: Fixed broken document link.
    Check out Teamup Calendar - Easy-to-use planner and calendar built on Ext JS4

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    -3
    AlphaBravo can only hope to improve

      0  

    Default


    "Only later I discovered this excellent document." refers to no document

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Switzerland
    Posts
    24
    Vote Rating
    6
    g.sidler is on a distinguished road

      0  

    Default


    Fixed the broken link. Thanks for the feedback. Gabe
    Check out Teamup Calendar - Easy-to-use planner and calendar built on Ext JS4

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default


    I have the same error and I'm trying to figure why?

    My situation is that I've downloaded and I can run the following example (http://try.sencha.com/extjs/4.1.0/co...al/viewer.html ). I've started to modify the code and noticed that the index.html page was loading ext-all.js, but some tutorials I've read say to use ext-debug.js for development.

    If I run the downloaded app with the all.js file, the app loads fine. But if I change it to debug.js then I get the same error as you found.
    Your link to the document (as others have mentioned) doesn't link to anything.
    I'm not using the sdk tools for building as I'm only wishing to code and test. Not bothered about shrinking the JS or similar yet. Any ideas.
    Cheers.

  5. #5
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    abhijit is on a distinguished road

      0  

    Default


    Thanks a lot for that comprehensive explanation. Seeing that error all of a sudden was more frustrating than worrying because of being unable to figure out how it appeared!

  6. #6
    Sencha User
    Join Date
    May 2013
    Location
    Hyderabad, India
    Posts
    16
    Vote Rating
    1
    hmnth1 is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thank you very much. It helps me when choosing ext-all-dev or ext-all-debug for my product