Load client side resources in a content centric application

We saw in a previous post, best-practices to optimize the client-side resources load, and by the way, reduce our web page’s loading time. Let’s keep in mind these concepts and solutions and assume that we develop a content-centric application in Java/JSP.

This application contains components that have many renditions for multi-channel usage. (As explained in our previous webmardi about content-centric application.)

Let’s take a component with a “in page” rendition, and a “standalone” rendition. So this component can be displayed integrated to a page, for example by sling or the JCR api, and as standalone HTML by a direct HTTP request. And in both cases, this component requires some client-side resources to be well displayed.

In the “standalone” usage of the component: We must refer the resources inside the component’s “standalone” rendition script:

Then in the “in-page” usage: We refer the resources in our “container” page rendition’s script.

We see in this inclusion that we must specify a “in-page” rendition that doesn’t include the resource again. And here is this “in-page” rendition:

Again we include our script in our container page rather than in the component, exactly to manage coherence of the resources inclusions.

This content centric application model, doesn’t solve the problem described in previous post: We still have to find the golden mean between too much or not enough granularity in the categories of the client-side resources.

But we see that renditions of a component are not dependent each other. Meaning, we can choose what resource to load in “standalone”, “in-page”, or any else renditions.

Note that if it’s not a problem to make “standalone” and “in-line” renditions dependent each other, you can put all the common code (the ul and foreach loop) in a common script, and include it with standard JSP methods.

AEM ClientLibs

The JCR/Sling based CMS “Adobe Experience Manager” comes with a great feature, designed to automate all these inclusions and to ensure a good coherence of your resources categories. This is the “clientlib” system.

First we create somewhere in the JCR, a node with the primary type “cq:ClientLibraryFolder”. This node will have a property “categories” where we’ll name one or many categories (for example “my-internal-lib”). In this node, we put our scripts (JS and CSS), that we want to be loaded, when we call (in a rendition jsp) the previously named category. That is the basic concept.

Added to this, “cq:ClientLibraryFolder” have these very useful properties:

Property Type Description
dependencies String[] List categories this one depends on
categories String[] List the categories that this folder constitute
embed String[] Embed the code of listed categories, in the categories this folder constitute.
channels String[] List the channels (related to devices or sites) for which the constituted categories are valid

Here’s a client-library-folder for our carousel component example:

  • carousel-clientlib – cq:ClientLibraryFolder
    dependencies: modernizr, internallib → any dependencies you need.
    categories: carousel → We call it “carousel”.

    • carousel.js → any external library you need)
    • carousel-init.js → any custom specific code you need).

In the rendition JSP, I call this category with a jsp tag:

  • The HTML will contain inclusions of all dependent scripts.
  • The call order is automatically calculated by the system, base on the dependencies chain.
  • A script will never be included more than once.
  • We don’t need two different renditions anymore. This one works fine for “standalone” and “in-page” usage of the component.

Use of clientlib system is not required by AEM, but at Liip in the AEM squad, we find the feature great. So we use it.

Unfortunately there’s a little performance problem with this. We know that JS should be loaded at the end of the body. To stay compliant to the content-centric model while providing these features, or for any reason I don’t know, AEM decided to print the inclusions right where the tag is used.

The easy solution we found at Liip to resolve this last problem is just to encapsulate the AEM tag in a custom tag:

In this encapsulation, we buffered the output generated by AEM’s clientlib system, until we print this output with:

A way to do big, clean, and scalable content-centric application, with very good client side performance.

AEM dedicated squad @Liip LS

In 2013, two of our big clients started considering Adobe Experience Manager (AEM) for their CMS needs. In the market of integrated mega-CMS we at Liip came under the impression that Open Source solutions were most of the time not considered by potential clients. To continue collaboration with these key clients, and to offer our high-quality services in this specific market, we have decided to invest in the creation of a dedicated project squad.

We were in contact with AEM before, working on a PHP connector for its data-storage layer (Jackrabbit JCR). Also this new line of service complements rather than replaces our existing service offer.

The partnership with Adobe started at the beginning of 2014. It let us explore the product deeper and assess the market opportunity behind it. By february 2015, the “AEM Startup Squad” was launched. This squad is composed of Fabrice, a senior Java developer with an already solid AEM background, four experienced “bizdev”-people and myself. This is our task force dedicated to reach our goals.

We are presently working on a few business opportunities to realize complete AEM projects or to develop interconnected applications to plug on existing AEM systems. For example Richemont group, which has to resolve many interconnection issues between the brands. Some client projects will therefore start soon.

At the same time, we continue building up our know how and get involved in the community by doing an internal project and by participating to learning sessions and meetups. It’s really a chance to have some time to grow up our skills without the constraints of client-projects. Thank to this, we are now confident to offer a very good expertise in AEM, with focus on following features:

  • The data storage layer and requests resolutions with JCR and Sling ;
  • Authoring concepts and processes ;
  • Components architecture and development ;
  • AEM Key features such as user management, client-context and workflows ;
  • Continuous Integration process & integration tests.

As new projects are coming very soon, we are still looking for developers to extend the squad and build many awesome project based on AEM at Liip. We are now well launched on our roadmap to have a cross-functional team focused on Adobe Marketing Cloud solutions at Liip.

Tags: , ,