Front-End Adventures in AEM: Part I

What’s in a Clientlib?

Nobody writes about the Front-End and AEM…

  • Part I: What’s in a Clientlib? [this Article]
  • Part II: SPA Day
  • Part III: What a Sightly
  • Part IV: The Bundling [Coming Soon!]
  • Part V: Sync (and Hot Module Replacement!) [Coming Soon!]
  • Part VI: That’s So Maven [Coming Soon!]

The Client Library (Clientlib)

AEM ships front end assets to end users via Client Libraries or clientlibs. It composes these clientlibs via a .content.xml file; and then optionally a css.txt file, a js.txtfile, and zero to many .css/.less and .js source files that are listed in their respective .txt file. I’ll cover these files in more detail later in this article.

A typical clientlib folder

A clientlib’s .content.xml file

A clientlib’s .content.xml file

Resources Folder

Your clientlibs may have external dependencies. For example, a CSS file may depend on a WOFF file for a custom font or a SVG file for a background image. Similarly, a JS file may have an asynchronous JavaScript dependency that loads in at a certain viewport location. In AEM, these are considered “resources” and belong in a resources sub directory under the clientlib’s directory.

@font-face {
font-family: "Open Sans";
src: url("resources/font.woff") format("woff");
}

Component Dependent Clientlibs

In an increasingly HTTP/2 world one may be tempted to author individual clientlibs for each component and to deliver them on an as needed basis. This can make a lot sense, especially when dealing with multiple sites sharing components on a single AEM instance. AEM doesn’t currently support HTTP/2 for all requests but it can be configured to use HTTP/2 for content delivery.

Conclusion

Clientlib’s take a little getting used to for the first-time Front-End AEM Developer. It’s not as simple as dropping your static assets in a bin and referencing them with <script> and <style> tags. But now that we know the in’s and out’s of making clientlib’s tick we can build on that foundation to build truly inspiring and accessible experiences.

Next: Part II: SPA Day

--

--

Christian, husband, father, web developer, gamer, scuba diver, @Vikings fan, and aquatic biology enthusiast. Soli Deo gloria!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Benjamin Solum

Christian, husband, father, web developer, gamer, scuba diver, @Vikings fan, and aquatic biology enthusiast. Soli Deo gloria!