Client Libraries + Interview Questions

Clientlibs or Client libraries in aem is one of the most widely used features provided by Adobe, it allows us to not only manage our client side resources like ( JavaScript, CSS, images, fonts etc ), but also provide options to debug, minify,merge and gzip the client-side code.

The centralized approach entails bundling all client libraries into monolithic and all-encompassing.JS and .CSS files within /etc/designs/{project}/clientlibs. This type of clientlib is loaded by default for every page within a project and it doesn’t need to be called explicitly. The biggest obstacle to this is large files that load all the JS and CSS regardless of whether or not the page actually needs it, at the expense of page load performance.
Read more

Interview Questions
Note: For more on Client Library watch this video

1. How to create Client Library folder in AEM?
1. Open CRXDE Lite in a web browser (http://localhost:4502/crx/de/index.jsp).
2. Select the folder where you want to locate the client library folder and click Create > Create Node.
3. Enter a name for the library file, and in the Type list select cq:ClientLibraryFolder. Click OK and then click Save All.
4. To specify the category or categories that the library belongs to, select the cq:ClientLibraryFolder node, add the following property, and then click Save All:
Name: categories
Type: String
Value: The category name
Multi: Select
5. Add source files to the library folder by any means.
6. Select the client library folder and click Create > Create file.
7. In the file name box, type one of the following file names and click OK:
js.txt: Use this file name to generate a JavaScript file.
css.txt: Use this file name to generate a Cascading Style Sheet.
8. Open the file and type the following text to identify the root of the path of the source files:
     #base=[root]
9. On the lines below #base=[root], type the paths of the source files relative to the root. Place each file name on a separate line.
10. Click Save All.

2. What is categories, dependencies, embed and allowProxy properties in AEM?

• categories – This is the identifier into which categories a clientlib belongs. A clientlib can have one or more categories.
• dependencies - This defines the other categories that the current clientlib depends upon. The dependencies will be included in the page along with the dependent clientlib.
• This property is transitive – if Clientlib A depends on Clientlib B which depends on Clientlib C, then all clientlibs will be included in the page.
• embed - This defines the categories which will be combined to the current clientlib. AEM will merge all clientlibs into the current clientlib. This is usually used for minimizing requests and for accessing clientlibs which are not supposed to be exposed to public.
• Take note that the embed property is NOT transitive – If Clientlib A embeds Clientlib B which embeds Clientlib C, then only Clientlib A and B will be included in the page. Clientlib A and B will be combined into one CSS and JS files as well. In order to include Clientlib C, it must be added to the embed property of Clientlib A as well.
• allowProxy - In order for the client libraries under /apps to be accessible, a proxy servelt is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.

3. How to include Client Libraries into page?
1. In JSP
<cq:includeClientLib categories="yourcategoies"/>

2. In Sightly
     The best example is from the new foundation page component, this is located at
          /libs/wcm/foundation/components/page/head.html.
     There, you see the following thing:
          data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
      This declares a “clientlib” object, which is implemented as a template.
     After that, you see statements like following one:
          data-sly-call="${clientlib.all @ categories='cq.jquery'}"
     This will output <script> and a <style> includes to all CSS and JS contained in the parameter “categories”.
     You can also call “clientlib.css” and “clientlib.js” if you only want to output the CSS or JS:
           data-sly-call="${clientlib.js @ categories='clientlib1,clientlib2'}"
           data-sly-call="${clientlib.css @ categories='clientlib1,clientlib2'}"     Notice that the “categories” option can be a comma-separated string, or a list of category names.

4. Where are the generated client library files stored/cached in CQ?
They are in /var/clientlibs

5. Is there a console where I can see all client libraries and their dependencies?
Yes, look at this page http://localhost:4502/libs/cq/ui/content/dumplibs.html

6. How I can debug client library files in the browser?

1. Yes, ?debugClientLibs=true writes out single files                    or
2. Yes, ?debugClientLibs=true and CTRL+SHIFT+U gives you timing info

7. Is there a console available to invalidate and rebuild the ClientLibs?
Yes, via url: /libs/granite/ui/content/dumplibs.rebuild.html, we can invalidate or rebuild the clientlibs.

8. How to Minify, debug, and restrict Client Libraries creation under libs?
Go to <host>:<port>/system/console/configMgr
Click on Adobe Granite HTML Library Manager below pop up will show up.

• Minify - AEM handle minify automatically in non-development environments by checking the “Minify” checkbox.
• debug - Developers, check the “debug” option on your local instance. This will prevent the CQ clientlib files from being combined into one file and makes troubleshooting javascript and css issues significantly easier.
• Gzip - gzip is a file format and a software application used for file compression and decompression. To deliver a better performance you can enable the “Gzip” option for the “Adobe Granite HTML Library Manager”.
• restrict - List of paths that you are allowed to create CQ client libraries under. (htmllibmanager.path.list). In this way, we can restrict clientlib creation.

9. You want to debug a CQ HTML client library in the author's instance. You want to avoid compressing the JavaScript file. What must you do?
Add a query parameter to the URL called debugClientLibs with the value true.

10. You want to create a CQ HTML client library. What is the file js.txt used for?
It will contain the paths to all the JavaScript files that will be included in the client library.

11. What is the best practice with regard to performance and caching?
Via mod_expires / mod_deflate and the use of cache-busting you can cache the css/js files on the browser to increase overall performance of your pages. All of this will happen in combination with the dispatcher.

12. What is the use of channels property in clientlib?
It is used to add some additional functionality for different channels. For example: if you want to perform some JS functionality only for ie6, not for other browsers, or you want to add some CSS or JS for only touch UI. here you can use channels property.