ICEfaces
  1. ICEfaces
  2. ICE-10290

Rationalize ACE JavaScript Resource Dependencies

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 4 ACE Components
    • Assignee Priority:
      P1

      Description

      With the resource coalescing and head-update capabilities provided in ICEfaces 4, we need to review the ace-components.js file contents to see if we can lower it's footprint by selectively removing JS for certain components, especially those with larger JS footprints.

        Issue Links

          Activity

          Hide
          Ken Fyten added a comment - - edited

          Based on my analysis of JS dependencies and JS files sizes, frequency of component usage, etc. I have the following recommended changes:

          • Refactor the ace-jquery.js merged file into the following separate files to improve the ability of components to load just those resources required on the page (esp. important for mobile devices):
            • ace-core.js - includes util/core.js and util.util.js only. util.js needs to be modified to not depend on jQuery itself.
            • jquery/jquery.js (unmerged natural jQuery file).
            • ace-jquery-ui.js - merged jquery/ui/jquery-ui.js and jquery/ui/jquery.ui.touch-punch.js
          • This makes ace-core.js the baseline mandatory .js library that virtually any ace comp. that requires JS will depend upon. Also allows ace:ajax to only depend on ace-core.js.
          • Remove completely the ace-components.js merged file, instead have each component declare all of their actual dependencies independently in their meta classes. In addition, remove the use of the "<requires>" entries in the ACE resource-dependency.xml file (use meta class dependency declarations instead).
          • Establish any necessary "<depends>" entries in the ACE resource-dependency.xml file to ensure that when resources are required by components that they are loaded in the correct order.
          Show
          Ken Fyten added a comment - - edited Based on my analysis of JS dependencies and JS files sizes, frequency of component usage, etc. I have the following recommended changes: Refactor the ace-jquery.js merged file into the following separate files to improve the ability of components to load just those resources required on the page (esp. important for mobile devices): ace-core.js - includes util/core.js and util.util.js only. util.js needs to be modified to not depend on jQuery itself. jquery/jquery.js (unmerged natural jQuery file). ace-jquery-ui.js - merged jquery/ui/jquery-ui.js and jquery/ui/jquery.ui.touch-punch.js This makes ace-core.js the baseline mandatory .js library that virtually any ace comp. that requires JS will depend upon. Also allows ace:ajax to only depend on ace-core.js. Remove completely the ace-components.js merged file, instead have each component declare all of their actual dependencies independently in their meta classes. In addition, remove the use of the "<requires>" entries in the ACE resource-dependency.xml file (use meta class dependency declarations instead). Establish any necessary "<depends>" entries in the ACE resource-dependency.xml file to ensure that when resources are required by components that they are loaded in the correct order.
          Hide
          Arturo Zambrano added a comment -

          The initial work has been completed. However, there are multiple issues with missing references. Some are due to incorrect loading order, while some others are due to global objects. So, probably all source files might need an entry in resource-dependencies.xml and they might also need to be added some code to resolve some global objects when they're loaded.

          Show
          Arturo Zambrano added a comment - The initial work has been completed. However, there are multiple issues with missing references. Some are due to incorrect loading order, while some others are due to global objects. So, probably all source files might need an entry in resource-dependencies.xml and they might also need to be added some code to resolve some global objects when they're loaded.
          Hide
          Arturo Zambrano added a comment -

          Made initial commit at revision 42694: ace-jquery.js was divided into ace-core.js and ace-jquery-ui.js; ace-components.js was dissolved and now each resource that previously belonged to this bundle is loaded individually; made all the necessary changes to build.xml, *Meta classes, and resource-dependency.xml. The issues reported above were fixed by tweaking resource-dependencies.xml and correcting some resource dependency declarations in Meta classes.

          Testing notes: please test all components individually in their respective test applications to see if they load all the necessary resources they need to work properly.

          Show
          Arturo Zambrano added a comment - Made initial commit at revision 42694: ace-jquery.js was divided into ace-core.js and ace-jquery-ui.js; ace-components.js was dissolved and now each resource that previously belonged to this bundle is loaded individually; made all the necessary changes to build.xml, *Meta classes, and resource-dependency.xml. The issues reported above were fixed by tweaking resource-dependencies.xml and correcting some resource dependency declarations in Meta classes. Testing notes: please test all components individually in their respective test applications to see if they load all the necessary resources they need to work properly.
          Hide
          Mircea Toma added a comment -

          To reproduce this issue a fresh server start is needed (the state of the browser does not matter).

          Show
          Mircea Toma added a comment - To reproduce this issue a fresh server start is needed (the state of the browser does not matter).
          Hide
          Arturo Zambrano added a comment -

          r42702: moved split pane resources to the icefaces.ace library.

          Show
          Arturo Zambrano added a comment - r42702: moved split pane resources to the icefaces.ace library.
          Hide
          Mircea Toma added a comment - - edited

          Removed dependency of ace-jquery-ui.js on ace-core.js.
          At some point ace-jquery-ui.js was defined as depending on ace-core.js even if in reality ace-jquery-ui.js code doesn't use anything from ace-core.js. The resulting side effect was that ace-core.js who is going to load before ace-jquery-ui.js will hide the global jQuery variable that ace-jquery-ui.js needs while evaluating, thus causing JS error during page load. Another scenario that ace-jquery.js evaluation will fail is when it is added dynamically to the page.

          Show
          Mircea Toma added a comment - - edited Removed dependency of ace-jquery-ui.js on ace-core.js . At some point ace-jquery-ui.js was defined as depending on ace-core.js even if in reality ace-jquery-ui.js code doesn't use anything from ace-core.js . The resulting side effect was that ace-core.js who is going to load before ace-jquery-ui.js will hide the global jQuery variable that ace-jquery-ui.js needs while evaluating, thus causing JS error during page load. Another scenario that ace-jquery.js evaluation will fail is when it is added dynamically to the page.
          Hide
          Ken Fyten added a comment -

          Consolidated all tabset js resources into a single new util/ace-tabset.js (YUI, component.js, tabset.js).

          (svn rvn # 42710)

          Show
          Ken Fyten added a comment - Consolidated all tabset js resources into a single new util/ace-tabset.js (YUI, component.js, tabset.js). (svn rvn # 42710)
          Hide
          Ken Fyten added a comment -

          Re-opened.

          Need to add all the ACE component .js files not already included in the merged .js files in build.xml to the minify task!

          This was mostly covered previously by most of the components in the components.js file, but these must be added now.

          Show
          Ken Fyten added a comment - Re-opened. Need to add all the ACE component .js files not already included in the merged .js files in build.xml to the minify task! This was mostly covered previously by most of the components in the components.js file, but these must be added now.
          Hide
          Arturo Zambrano added a comment -

          Completed task for minifying the rest of the javascript resources at revision 42722.

          Show
          Arturo Zambrano added a comment - Completed task for minifying the rest of the javascript resources at revision 42722.
          Hide
          Krashan Brahmanjara added a comment - - edited

          Unfortunaltely last patches for ICE-10290 doesn't resolve any problem.
          I got complex app based on last Ice 4 from trunk and in javax.faces.PROJECT_STAGE = production mode ... after revison 42691 number of downloaded files grows twice.

          I suggest to cancel whole ICE-10290 refactoring - scripts and stylesheets should be definitely combined, compressed and gzipped on package compilation phase.
          Also less number of resources is less number of problems is future because sometimes resource dependency fails and resource files are missing.

          Footprint at revision 42640

          Footprint at revision 42886

          Show
          Krashan Brahmanjara added a comment - - edited Unfortunaltely last patches for ICE-10290 doesn't resolve any problem. I got complex app based on last Ice 4 from trunk and in javax.faces.PROJECT_STAGE = production mode ... after revison 42691 number of downloaded files grows twice. I suggest to cancel whole ICE-10290 refactoring - scripts and stylesheets should be definitely combined, compressed and gzipped on package compilation phase. Also less number of resources is less number of problems is future because sometimes resource dependency fails and resource files are missing. Footprint at revision 42640 Footprint at revision 42886
          Hide
          Krashan Brahmanjara added a comment -

          Added footprint for revision 42640

          Show
          Krashan Brahmanjara added a comment - Added footprint for revision 42640
          Hide
          Krashan Brahmanjara added a comment -

          Attached footprint at revision 42886

          Show
          Krashan Brahmanjara added a comment - Attached footprint at revision 42886
          Hide
          Arturo Zambrano added a comment -

          You can use resource coalescing to serve all javascript resources in just one file.

          http://www.icesoft.org/wiki/display/ICE/coalesceResources

          Show
          Arturo Zambrano added a comment - You can use resource coalescing to serve all javascript resources in just one file. http://www.icesoft.org/wiki/display/ICE/coalesceResources
          Hide
          Krashan Brahmanjara added a comment -

          True resource coalescing helps

          revision 42640
          pageLoad:1.56s, javascripts:10, script size: 477kB
          revision 42886 org.icefaces.coalesceResources=false
          pageLoad:1.31s, javascripts:17, script size: 206kB
          revision 42886 org.icefaces.coalesceResources=true
          pageLoad:1.22s, javascripts:2, script size: 201kB

          But it can't be used immediately. CoalesceResources true change something and page with primeface schedule component isn't displayed correctly anymore.

          Show
          Krashan Brahmanjara added a comment - True resource coalescing helps revision 42640 pageLoad:1.56s, javascripts:10, script size: 477kB revision 42886 org.icefaces.coalesceResources=false pageLoad:1.31s, javascripts:17, script size: 206kB revision 42886 org.icefaces.coalesceResources=true pageLoad:1.22s, javascripts:2, script size: 201kB But it can't be used immediately. CoalesceResources true change something and page with primeface schedule component isn't displayed correctly anymore.
          Hide
          Ken Fyten added a comment -

          Note that as of rvn #42722 all the ACE component .js files are now being minified.

          Show
          Ken Fyten added a comment - Note that as of rvn #42722 all the ACE component .js files are now being minified.
          Hide
          Krashan Brahmanjara added a comment -

          Ken. MInification was available many years before 42722 (no-compress flag). We use this solution (minification and compression) in production systems with success.

          Solution added after #42640 is good idea but is unnecessary.
          Also coalescing isn't compatibile with this patch. It disables caching and creates new javax.faces.resource/coalesced.js.iface file on each request - I definately see different sizes of this file on each request.

          Summary the I can suggest to restore previous solution with selection based on development mode (orignal or minified js send to client) also coalesce should generate stable cacheable (on client and server) response

          Show
          Krashan Brahmanjara added a comment - Ken. MInification was available many years before 42722 (no-compress flag). We use this solution (minification and compression) in production systems with success. Solution added after #42640 is good idea but is unnecessary. Also coalescing isn't compatibile with this patch. It disables caching and creates new javax.faces.resource/coalesced.js.iface file on each request - I definately see different sizes of this file on each request. Summary the I can suggest to restore previous solution with selection based on development mode (orignal or minified js send to client) also coalesce should generate stable cacheable (on client and server) response

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Ken Fyten
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: