Clientlibs in AEM

Hi, welcome to another learning

Clientlibs in AEM

Here we will learn what are clientlibs, properties in clientlibs and how to include them in aem component.

Introduction

Clientlibs are cq:ClientLibraryFolder which help an aem developer to segregate css and js. There are two types of clientlibs, one at component level which is created within the component itself (generally they are bound component specific clientlibs) and global level clientlibs (they are common for more than one components) which are present within the clientlibs folder of the project it self.

We will be understanding the concept of clientlibs using a democomponent, having simply 3 h1 tags.

In order to create a clientlib, simply right click, create, in type select cq:ClientLibraryfolder and provide name.

Here in clientlibs, you can segregate css and js files, hence you need to create css folder, js folder, css.txt file and js.txt file.

Properties in Clientlibs

Clientlibs have a few special properties each proving an additional functionality

• Categories : It is a multi property that adds a clientlib to a group that is when referred, the clientlib gets loaded.

• Allow Proxy : It is a boolean property which allows the clientlibs to load at dispatcher level via a proxy servlet

• Embed : It is a multi property that allows inclusion of various other clientlibs by adding their respective categories such that they combine together to form one single clientlib.

• Dependency : It is again a multi property that actually adds refers another clientlib by adding its category to it such that the clientlib do not merge with the original clientlib rather loads itself. also it helps to add other dependencies like that of jQuery.

Including Clientlibs

Now we have an idea about how exactly the clientlibs are created. Now we need to add the html and css to them and understand how do we include clientlibs to our component.

• In democlientlibs, we have created hey.css and hi.css within css folder and hey.js and hi.js in js folder. In base file, we actually add the entries of the js as well as css files that will load along with the clientlibs and also these files load as per the sequence added.

  
  
  
  
  
  
  
  
  
  
  
  
  
  

• Now we need to add properties to democlientlibs

  

• Now inorder to add the clientlibs to component, just add the following snippet as shown. Here we have added name of the categories. Also we have stated clientlib.all this means alls the js as well as css files will load. We can specify which type of files do we want to load, clientlib.css will load only css files and clientlib.js will load only js files.

  
  
  
  

• Now as we can see the heading tags have changed their colours as per the clientlibs added. Also one thing to be noted that we have added hey.js first and then hi.js and hence hey is getting printed first and then hi in the console.

• Now let us understand dependency. Let us create a glbal level clientlibs named helloclientlibs, under the clientlibs folder of local-project.

  
  
  
  
  
  
  
  
  
  

• Having created the helloclientlibs, now we will add it as a dependency. In dependency property of democlientlibs,we have added categories of helloclientlibs.

  

• We can clearly see that hello.css and hello.js is applied.

  

• Similarly we will create functional clientlib. As you can see, it is a component level client created just like democlientlibs with only morning.js that has a function which prints greeting message.

  

• We will call this method in hi.js. Here we are simply calling the greet functional reference when we click on hi heading.

  
  
  
  

• In inspect element, source tab, we can find two network calls, one to democlientlibs and other to helloclientlib whereas functional clientlib merges with democlientlib to form an embed clientlib.

  

Core Componnet Clientlibs Model

Okay so till now we have understood how a set of stylesheets and js script files are included in slightly. Now there comes a question what if a developer need more control over the clientlibs. He wants a certain set of stylesheet to be applied only to a printed copy of the page or ensure the clientlibs to load after completion of html parsing. Well these things cannot be achieved by including clientlibs in this way. AEM provides Core Component's Clientlibraries model to achieve this.

Here we have created a simple demonstration component with editconfig as dialog. Also we have added a simple paragraph and provided a class called para to it. Also we have creared a clientlib folder called coreclientlib and added a stylesheet.css and script.js flies in the same way as demonstrated earlier.

Now we have included this clientlib as a core component model clientlib and also we have specified a few attributes to it.

                        
                <sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ 
                    categories='demonstration.coreclientlibs',
                    media='print',
                    async=true,
                    defer=true, 
                    onload='console.log(\'loaded: \' + this.src)',
                    crossorigin='anonymous'}">
                    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
                </sly>
                
                <div>
                  <p class="para">Hello Learner</p>
                </div>
                        
                    

Let us understand every attribute.

• media='print' : This ensures that the stylesheet css properties will be applied only to the printed copy. media='screen' and media='all' ensures that the css gets applied during on-screen rendering and for all the media types respectively.

• async='true' : This is an important parameter that contrtols the loading of the provided javascript files asynchronously. This means the javascript will keep on loading along with other resources and the page will also keep on rendering simultaneously. Now there could be some functions in the script which must load only after completion of page loading. In such scenarios, these functions must be added within DOMContentLoaded event listner explicitely.

• defer='true' : Now this ensures that javascript is loaded only after completion of parsing of all the escaped html characters and when the page content is ready to render. async and defer actually increase the page performance.

• onload : This attribute defines a simple function that gets called after complete loading of javascript.

• crossorigin='anonymous' : This handles Cross Origin Resurce Sharing. anonymous in this case is allowing all the other resources to load without authentication (both cookie creds authentication and HTTP authentication). This is dangerous. crossorigin='use-credentials' is always preferred.

• ${clientlibs.jsAndCssIncludes @ context="unsafe"} is actually an alternative to clientlib.all where context="unsafe" tells that output is treated as raw HTML. ${clientlibs.cssIncludes @ context="unsafe"} and ${clientlibs.jsIncludes @ context="unsafe"} are again self expalinatory.

• The component is added on the page. The text colour remains as it is even if the css has loaded successfully. Also the console prints the onload function even if it is not written in script.js file. Also in the printed preview of the page, the css gets applied properly. All these observations hereby justify the conditional attributes applied.

  
  
  
  
  
  
  

Conclusion

We have now a clear idea of what exactly are clientlibs, how to ceate them, which property provides which feature and how to include them in any component.

I hope you enjoyed the learing and have found the blog informative.