Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Firefox issue when doing production build using google closure.

  1. #1
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    42

    Default Firefox issue when doing production build using google closure.

    Hi all,

    I've found a issue with firefox and production build. The compressor that I use is google closure.
    The application does not works because for firefox sencha has a specific optimization in the code.

    Here is the sample:

    PHP Code:
    Ext.define('Ext.util.XTemplateCompiler', {
        
    extend'Ext.util.XTemplateParser',
        
    // Chrome really likes "new Function" to realize the code block (as in it is
        // 2x-3x faster to call it than using eval), but Firefox chokes on it badly.
        // IE and Opera are also fine with the "new Function" technique.
        
    useEvalExt.isGecko
    // This triggers the optimization.... 

    evalTpl: function($) {    

    // We have to use eval to realize the code block and capture the inner func we also
        // don't want a deep scope chain. We only do this in Firefox and it is also unhappy
        // with eval containing a return statement, so instead we assign to "$" and return
        // that. Because we use "eval", we are automatically sandboxed properly.
        
    eval($);
        return $;
    }, 

    What happens in google closure compiler?
    It renames the evalTpl from function($) { to evalTpl: function(a)
    so now the variable is "a" and not a dollar anymore, so it returns a string, instead of compiled function.


    My temporal solution is to use:


    "compressor": {
    "type": "closure",
    "languageIn": "ECMASCRIPT5",
    "variableRenaming": "OFF"
    }


  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579

    Default

    Hi,

    Just to confirm, are you using Google Closure with Sencha Cmd?

    Thanks,
    Tristan

  3. #3
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    42

    Default

    Quote Originally Posted by tristan.lee View Post
    Hi,

    Just to confirm, are you using Google Closure with Sencha Cmd?

    Thanks,
    Tristan
    Yes, I've changed my app json to use closure as compressor type. Please see the snippet presented above. Without variable renaming parameter, the production file is broken for firefox.


  4. #4
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579

    Default

    Hi -

    Google Closure does optimization that the ExtJS library is not suited for since it does internal code building (such as with XTemplates). If turning off variable renaming works for you, great. There are also advanced optimization options which may help with this too. Otherwise, you may want to switch back to using the default YUI Compressor.

    Thanks,
    Tristan

  5. #5

    Default

    Hi,


    I am observing the same problem. With FF, in production, I am getting other errors in Ext framework classes. For example: in Ext.util.FocusTrap the method initTabGuards is compiled to:


    Code:
    var a = this.tabGuardPositionAttribute, b = this.tabGuardBeforeEl, c = this.tabGuardAfterEl, d = this.tabGuardIndex, e;
        this.rendered && (e = this.el.findTabbableElements(!0), e[0] && e[0].hasAttribute(a) && e.shift(), e.length && e[e.length - 1].hasAttribute(a) && e.pop(), e.length ? (b.dom.setAttribute(Ext.dom.Element.tabIndexAttributeName, d), b.on("focusenter", this.onTabGuardFocusEnter, this), c.dom.setAttribute(Ext.dom.Element.tabIndexAttributeName,
            d), c.on("focusenter", this.onTabGuardFocusEnter, this)) : (b.dom.removeAttribute(Ext.dom.Element.tabIndexAttributeName), b.un("focusenter", this.onTabGuardFocusEnter, this), c.dom.removeAttribute(Ext.dom.Element.tabIndexAttributeName), c.un("focusenter", this.onTabGuardFocusEnter, this)))
    And when evaluating that code I am getting a "TypeError: b is undefined", despite of it being defined in the first line. That very same code works in Chrome, but it fails to run in Firefox.


    In our case, using YUI is not an option (for example, it's not compatible with RSVP, a library we use heavily). In fact, YUI is deprecated and many libs won't work with it. Not renaming vars is not an option either (.js file is much bigger and legible). Could you recommend a solution here? I know YUI is the first choice but extjs supports closure. What's the point of supporting closure if it can't be used properly?

    Thanks

  6. #6
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579

    Default

    YUI is the recommended (and default) compiler since it uses a safe form of variable renaming, which is local variables only. Closure is a bit more aggressive with this. There are some options that you tweak specific to Closure that have to do with variable renaming, but I can't guarantee it will solve the issue you are facing.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  7. #7

    Default

    Thanks for your response Tristan.

    I tried with different closure options with no luck. I ended up disabling sencha compression and using "UglifyJS" manually in our deployment script. It works like a charm in FF and offers a compression level identical to closure in our case.Just to make my point of view clear:

    1) Sencha supports "closure" as an option with sencha CMD

    2) Closure generates a code that won't run on Firefox when compiling certain ExtJS 6 classes.

    3) Closure options that will prevent (2) are unknown/uncertain. I tried with "variableRenaming": "LOCAL" and "ALL" with no luck.

    4) The problem only happens in Firefox. It was not exactly the same that the one @demongloom commented. It was a fragment of code that was neutral (not firefox-related). Compiled with closure worked in Chrome but not in FF. And there was a bunch of cases like that.

    I think Sencha should, at least, document this problem or show a warning when using closure (or maybe remove support for closure completely), if you don't intend to fix it. Right now, you can develop an app, test it in development perfectly with Firefox, only to discover production build won't work. Sencha 6 + closure just won't work in firefox

    I fixed this anyway using uglify out of sencha cmd chain, so I don't really care too much, other than helping others that might find the same problem.

    Thanks

  8. #8
    Sencha Premium Member
    Join Date
    Jul 2015
    Posts
    1

    Default Thanks @demongloom, you really saved me

    This is what i was looking for but I just wanted to ask if anybody knows if this is going to be fixed in CMD?

    Also, do anybody know how can I use this "variableRenaming": "OFF" flag from command line when running Closure Compiler?
    I need to use it to create source maps (another thing that CMD isn't helping me with ), so another question is will CMD support creating source maps in the future?

  9. #9
    Sencha Premium User
    Join Date
    Jun 2008
    Posts
    132

    Default

    I'm also having this issue. For me the "languageIn" and "variableRenaming" options suggested by demongloom are fixing the problem (at the cost of a 25% increase in the size of my app.js) - but I would like to know if Sencha has a better recommendation than using YUI, which as others have mentioned is deprecated... (and which will not compile jsPDF, which we're dependant on)

  10. #10

    Default

    EDITED:

    With Sencha Cmd 6.2.2.36 the solution from @demongloom does not work, but it works with Sencha Cmd 6.5.3.6

    My solution bellow does not work because although those evals success, variable renaming affects more code and fails elsewhere.

    Thanks, @demongloom!


    * OLD USELESS MESSAGE:


    In my case I set "variableRenaming": "OFF" but closure ignores it and keeps renaming the variable "$".

    I know it is taking the value "OFF" because if I just write a "false" value, the closure compressor complaints with:

    Code:
    com.sencha.exceptions.ExConvert: Cannot convert java.lang.Boolean to com.google.[read 1].jscomp.VariableRenamingPolicy (value=false)
    Any idea why it is not working to me?


    At this time I am workarounding it with this two overrides:

    Code:
    Ext.define('Overrides.Template', {
    override: 'Ext.Template',
    
        useEval: false
    }) ;
    
    Ext.define('Overrides.util.XTemplateCompiler', {
    override: 'Ext.util.XTemplateCompiler',
    
         useEval: false
    }) ;
    Sencha Cmd 6.2.2.36


    [1] - This is the word "j a v a s c r i p t", that seems to be a forbidden word.

Page 1 of 2 12 LastLast

Similar Threads

  1. Google Maps InfoBubble not working correctly after production build
    By parky128 in forum Sencha Touch 2.x: Discussion
    Replies: 0
    Last Post: 5 Mar 2015, 9:35 AM
  2. Google Closure Compiler
    By hitman01 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 17 Feb 2011, 6:34 AM
  3. Google Closure Compiler
    By Beginner1971 in forum Community Discussion
    Replies: 3
    Last Post: 3 Dec 2010, 3:48 AM
  4. Ext equivalent of the Google Closure XhrManager
    By benshort in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 15 Apr 2010, 6:22 AM
  5. Ext JS vs. Google Closure
    By Steffen Hiller in forum Community Discussion
    Replies: 2
    Last Post: 17 Nov 2009, 7:46 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •