December 20, 2012
  |   AEM, Blog

Best Approaches to Client Libraries in Adobe CQ5, Part 2

In our latest post Best Approaches to Client Libraries in Adobe CQ5, Part 1, we explored the functionality of the Client Library Folder in Adobe CQ5, known as the clientlib, and how it can be properly utilized to create a well-designed application.
Continuing on the different approaches, we will also discuss dependencies and how you can optimize performance through clientlibs.

Dependencies

One nifty feature of clientlibs is the dependencies property, which allows you to define dependencies between clientlibs. One example of dependencies is that a component may be dependent on jQuery to function. If the dependencies property of “cq.jquery” is added to the template-level clientlib node, this clientlib can be ‘coupled’ with the template-level clientlib.
For example: <cq:includeClientLib js=”project.all” />
Will then result in: <code><script type=”text/javascript” src=”/etc/clientlibs/foundation/jquery.js”></script><script type=”text/javascript” src=”/etc/designs/{project}/clientlib.js”></script></code>
With all of these features in mind, you can structure your application in a secure, optimized and logical fashion.

Optimizing Performance

When it comes to the production environment, page load performance is of the utmost importance. The more files that need to be fetched and the greater their size, the longer it will take for the page to be loaded and dispatched to the user.
CQ5 can deliver enhanced performance by enabling Minify and Gzip in the Day CQ HTML Library Manager of the Felix Configuration console. Minify compresses JS and CSS using the YUI compressor, removing all comments and whitespace. This not only obfuscates the source code but also reduces the file size for faster load time.
You can also save even more bandwidth and increase speed by enabling Gzip compression in the Felix console. Gzip is an algorithm that can compress a file ten-fold. The server sends compressed content to the browser of the Gzip encoding, and the browser accepts its compression scheme and decompresses it before loading it into the cache. These are two simple ways of improving overall performance.

Summary

We have covered the centralized, modular, and hybrid approaches to setting up clientlibs in your CQ5 project as well as a few simple tips for optimizing your dependencies and page load performance. A wonderful thing about the organization of clientlibs in CQ5 is that any combination of these strategies can be utilized within your project. You may prefer to always keep “global” clientlib resources at the template level (the centralized approach), and component-specific clientlibs at the component level (the modular approach). Then, you can couple clientlib dependencies and optimize page performance with ease!
No matter what you choose, utilizing clientlibs is essential to well-organized code and will assist you on your path to success.
Happy coding!

Paul Goodrich
Paul is a web development consultant at iCiDIGITAL with a long history of system analysis. He has a strong commitment to leveraging the best-fit technology and processes for the situation. His current development focuses are in AEM, Java, JavaScript, and responsive design. In his spare time he can be found reading, practicing the viola, enjoying the great outdoors, or planning for and playing any number of team-based tactical games such as Ultimate Frisbee.
View All Posts By This Author

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi

Let's build something together.