Sunday, July 9, 2017

Adobe Granite HTML Library Manager : A Configuration for ClientLibs


Hello Everyone,

This is one of my most awaited blog,So I am glad to share this with you all.

ClientLibs is having an OSGi Configuration in the felix console named:
Adobe Granite HTML Library Manager
Here ,We are going to explain each and every option in this configuration in detail.

1.Minify:
  • If we checked minification,it will compress all the js/css files by removing all the spaces and extra lines of files.
  • To enable this configuration in Production server is mandatory,because it will decrease the  response time of the page.But not use in Dev Server,because css/js files will become difficult to debug.
Check the response time of every network call in the below images.
beforee min.PNG
Fig- Network Calls(CSS/JS)Before Minification 
after min.PNG
Fig- Network Calls(CSS/JS)AfterMinification 
  • It minifies all the css /js files by renaming it like fileName.min.js.
Minify.png
Fig-removes extra space after minification

2.Debug:

  • This configuration is checked in Dev Server,because this configuration doesn’t concatenate the clientlibs and serve js and css files individually.
  • Helps in debugging.
  • This will prevent the CQ clientlibs files from being combined into one file, and makes troubleshooting JavaScript and css issues significantly easier.
  • Enable this configuration is equivalent to adding ?debugClientLibs=true.

3.Gzip:

  • This is also a mandatory configuration in Production server because it also helps in loading the page quickly.

Without Gzip:

unzipped request.PNG
Fig-Response Without Gzip

In the above diagram:

  • The browser requests a file index.html from the server.
  • The server provides the html as a response.
  • The response provides a 100KB file and Browser displays a page after downloading so much data.

Let’s find out a better solution.
The Server is sending a large amount of data.If we have a large file and we need to send it to someone,what we use to do?
We just Zip it and send it to the receiver.So if we could send a zip file to the  browser,it will save a lot of download time and bandwidth.
How GZip works?
  • Capture.PNG
    Fig-Reduced Response after GZip
    The browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes): Accept-Encoding: gzip, deflate
  • The server sends a response if the content is actually compressed: Content-Encoding: gzip
If the server doesn’t send the content-encoding response header, it means the file is not compressed (the default on many servers). The “Accept-encoding” header is just a request by the browser, not a demand.
Our job is to configure the server so it returns zipped content if the browser can handle it, saving bandwidth for everyone and giving us a happy user.
before Gzip.PNG
Fig-Network calls without Gzip
withZipping.PNG
Fig-Network calls withGzip
An ideal Request and Response for Gzip is:
zip.PNG
 Gzip,saves a lot of bandwidth and the response time of each network call.

Note: While enable Gzip in the OSGi Configuration,activate the bundle (Adobe Granite Ui Clientlibs Bundle) and clear the cache.Sometimes after enabling it, It serves the request from the cache.So to clear the cache is important.Also don’t forget to check the Accept-Encoding in the request headers and Content-Encoding in the response headers.
The Demonstration video on Minify, Debug and GZIP :

4.Timing: This enables the JS Load timing statistics.
So add a query Parameter ?debugClientlibs=true in the page url and hit Ctrl+Shift+U.
timing.PNG
Fig:Timing
5.FireBug Lite Path:Path in the workspace where the firebug-lite.js file is located. The script should make sure it does not activate if the real firebug is present. Default: "/libs/widgets/cq-widgets.js/files/endorsed/ firebug/firebug-lite.js "
Browsers has online plugins to install FireBug Lite in the browser that help to debug the css/js files.So the workspace firebug-lite.js will executed if it doesn’t find the file in the browser.

6.Debug Console: To activate this configuration is equivalent to adding "debugConsole=true" in the page Path.If we activate this configuration, FireBug Lite gets activated in the browser.
7.Force CQURLInfo:
Enabling this configuration provides "CQURLInfo" jquery object in the AEM page console.If disabled,this object will come as "undefined" in browser console.
CQURLInfo.PNG
Fig-Implicit Object CQURLInfo in the AEM Page
8.Max Age:This directive specifies the maximum time in seconds that the fetched response is allowed to be reused from the browser cache within that time of the request. For example, "max-age=50" indicates that the response can be cached and reused for the next 50 seconds.
cache-age.PNG
Fig-Max Age in the Response Header
You can check the cached files in chrome from here “chrome://cache/”.
9.Allowed Library path:This configuration indicates that from which locations clientlibs are allowed to be loaded.The default values are “/apps,/libs,/etc”.
allowed Library.PNG
Fig-Allowed Library Path
The Demonstration video on CQURLInfo, Max-Age and Allowed Library Path:


10.JS/CSS Processor Default Config:
The default value of this configuration is "min:yui".
The full form of yui is  Yahoo! User Interface Library.
  • According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all pageviews are done with an empty cache.
  • This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy.
  • With the right design in place, there are many secondary strategies for improving performance such as minification of the code,
So YUI is a tool that helps in compression of js/css files.
processor.PNG
Fig-JS/CSS Processor
  You can use any other compressor as well, As i tried with min:jquery. You can find alternatives of yui from here https://w3techs.com/technologies/compselect/js-yui.

11.Max Data URI Size: The minification of css-files can auto-inline small resources (e.g. icons). The config-parameter “htmllibmanager.maxDataUriSize”  steers maximum size for resources to be auto-inlined.

Let’s understand this with an example:
I have a css file like this:

#tiny-icon { height: 32px; width: 32px; background-image: url("tiny-icon.gif"); }
If sample-icon has a size of 360 bytes. With maxDataUriSize <= 360, the minified css file will look: 
#tiny-icon{height:32px;width:32px;background-image:url("test-alex/tiny-icon.gif")}
With maxDataURI Size > 360, the icon will be auto-inlined as data-url:

#tiny-icon{height:32px;width:32px;background-image:url("data:image/gif;base64,R0lGODlhIAAgAIQQAEeczSqmzligoGmarl6khnCdy3CpaBj
The format of data URI is:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

To understand the benefits of data URI, You can go to this website.
The Demonstration video on Max Data URI Size:

Note: Sometimes the configurations may not work because some of the configurations gets its value only when bundle is activated.So just restart the bundle shown below and everything will work fine.
bundle.PNG
Fig-Adobe Granite UI Clientlibs Bundle
I am still exploring rest of the options related to this configuration. We will share an another blog on the same.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com


Hope it will help you guys !!
Thanks and Happy Learning .

14 comments:

  1. When css or js issues appear it is useful to have a mapping option (where did the offending line originate). Are you aware of such an option is Granite HTML config?

    ReplyDelete
    Replies
    1. Hi David,I think there is no need of any configuration.Where you see the error,You can directly go to the js/css and open it in new tab.It will show you in the url from where the file is getting loaded.

      Delete
  2. Nice blog. Could you add more details about "CQURLInfo".. Why and when it is needed?

    ReplyDelete
    Replies
    1. Thanks Vivek.Great Input. I will study this and will add this part in the blog asap.

      Delete
    2. Hi vivek, As per my understanding it is something like I used to do in servlets.I can fetch request Resource,Selectors and suffixes in the servlet same as if we need all such things in JS to write our logic based on a selector, an extension or may be runMode ,It can help me.
      Go through this sample example:https://optimum.com/etc/clientlibs/foundation/shared.js;70727

      let me know Is this answers your query!
      Thanks.

      Delete
  3. Minifying Angular JS code using YUI compressor may throw error. We are facing that issue. Eventhoug we included our clienlib path in the excluding list issue persist. We tried to use gcc compressor but not luck.

    ReplyDelete
    Replies
    1. Hi Adarsh, I have seen this issue very frequently, even excluded list option is not working that's why i have not included that option in my blog. One suggestion is you put minified version of your clientlibs in aem.That thing can help you.

      Delete
    2. For Angular, you need to use grunt to minify it using uglify, concat and ng-annotate to safeguard it from minification screwing up the dependency injection. After that you can clientlibify it, you can use the one by Michael Leroy or Wcmio's. You can have these grunt tasks as a part of your maven build process.

      Delete
    3. You will need to use the gcc minifier for the latest js files, YUI is at EOF and does not support these. The gcc jar files will have to be installed. Post that for the job files you need gcc to kick in add the below property :

      jsProcessor="[min:gcc]" (the property is String Multi valued)

      Hope this answers the query.

      Delete
  4. Adarsh, if you have an example just file that fails with gcc pass those on and let me know the version of AEM that you are trying this on.

    ReplyDelete
  5. Hi when I enable Debug .. my targeted offers stop loadibg

    ReplyDelete
    Replies
    1. We disable minify option and enabled debug option

      Delete
  6. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

    ReplyDelete