Effective Ways to Call Client Libs in AEM: A Guide for Developers

Client Libraries in AEM — A client library is a folder where you store related CSS and JavaScript files. Client libraries can help improve performance by reducing the number of network requests that need to be made.

Basic Properties of Client libs

• Client libraries categories property This allows you to call them by category.
• You can also set the allowProxy property to true. This will allow client libraries to be fetched over the publisher and beyond /apps.
• The embed property can be used to merge multiple client libraries to one file to minimize the request calls.
• The dependencies property can be used to specify which client libraries need to be called before current client libs.

You can also minify files using Adobe Granite HTML Library Manager in OSGI configuration to reduce size of file.

Way to Calls Client Libs on page.

1. Add client Libs to page policies— Suppose we want to create pages where we need to show a specific font on a few pages. In that case, we can create CSS for the font and add it to a client library. Then, we need to add the client library to the page policies, as shown in the screenshot below.

2. Add client Libs from page type — The problem with the above approach is that the .js and .css files are called in the header of the page, which can increase page loading time. A best practice is to call all CSS files in the header and JavaScript files in the footer. To do this, we can override the page component to add a new page property called pageType. We can then modify the customheaderlibs.html and customfooterlibs.html files to call CSS and JavaScript file respectively. here in Demo We can select the loginPage page type to load the login page-related client libraries and client libraries restrict to page level only.

modified customheaderlibs.html and customfooterlibs.html

//customheaderlibs.html
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientLib.css @ categories='aempanda.base'}"/>

<sly data-sly-test = "${pageProperties.pageType == 'loginPage'}">
<sly data-sly-call="${clientLib.css @categories = 'apps.aempanda.components.content.login'}">
</sly>
</sly>
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

//customfooterlibs.html
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='aempanda.base'}"/>
    <sly data-sly-test= ${pageproperties.pagetype == 'login'}>
    <sly data-sly-call="${clientlib.js @categories = 'apps.aempanda.components.content.login'}"/>
    </sly>

</sly>

3.Add client Libs to component —When you want to call client libraries that are specific to your component, not for entire pages, you can add client libs call in the .html file of the component using. Wherever a component is added, the client libraries will load. However, you need to consider that a component can be added twice on a page so client libraries will load twice on page. This is a better approach for small or commonly used components, such as buttons, titles, and textboxes.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
  <sly data-sly-call="${clientlib.all @ categories='apps.aempanda.components.content.login'}">
  </sly> 
</sly>

Client libraries can be a valuable tool for improving the performance of your AEM website. By following the best practices outlined in this blog post, you can ensure that you are using client libraries in the most effective way possible.