khakiout

ruen's drawings and stuff

AEM Clientlibs: Difference between Dependencies and Embed — 2/23/16

AEM Clientlibs: Difference between Dependencies and Embed

AEM Clientlibs: Difference between Dependencies and Embed

For quite some time, I keep getting confused between the difference of the ‘dependencies[]’ and ’embed[]’ properties of AEM clientlibs. I found help by reading the documentation and other sites. I created a chart below to explain their behaviors when used in a project.

But first let’s explain what each property does:

‘Category’ : This is the identifier into which categories a clientlib belongs. A clientlib can have one or more categories.

‘Dependencies’ : This defines the other categories that the current clientlib depends upon. The dependencies will be included in the page along with the dependent clientlib.
This property is transitive – if Clientlib A depends on Clientlib B which depends on Clientlib C, then all clientlibs will be included in the page.

‘Embed’ : This defines the categories which will be combined to the current clientlib. AEM will merge all clientlib into the current clientlib. This is usually used for minimizing requests and for accessing clientlibs which are not supposed to be exposed to public.

Take note that the embed property is not transitive – If Clientlib A embeds Clientlib B which embeds Clientlib C, then only Clientlib A and B will be included in the page. Clientlib A and B will be combined into one CSS and JS files as well. In order to include Clientlib C, it must be added to the embed property of Clientlib A as well. Another note, the order of embed is important for the CSS and JS to work properly.

For my diagram I have 5 clientlib categories: myproject.all, myproject.site, myproject.components, myproject.bootstrap, myproject.jquery.
Only ‘myproject.all’ will be included in the template while the rest will be either dependencies or embeds to myproject.all.

DIAGRAM 1: ALL DEPENDENCIES
For Diagram 1, myproject.all depends on myproject.site and myproject.components. In turn, myproject.site depends on myproject.bootstrap which depends on myproject.jquery.

HTML Output:

/apps/myproject/components/content/pdf-viewer.js
/apps/myproject/components/content/carousel.js
/etc/designs/myproject/jquery.js
/etc/designs/myproject/bootstrap.js
/etc/designs/myproject/site.js
/etc/designs/myproject/all.js

DIAGRAM 2: ALL EMBED
For Diagram 2, myproject.all embeds myproject.site and myproject.components. In turn, myproject.site embeds myproject.bootstrap which embeds myproject.jquery.

HTML Output:

/etc/designs/myproject/all.js
There are now two files but only the CSS and JS files from myproject.all, myproject.site and myproject.components were included.

DIAGRAM 3
For Diagram 3, myproject.all embeds both myproject.site and myproject.components. In turn, myproject.site depends on myproject.bootstrap which embeds myproject.jquery.

HTML Output:

/etc/designs/myproject/bootstrap.js
/etc/designs/myproject/all.js

Here, all.css contains the CSS files from myproject.all, myproject.site and myproject.components. While bootstrap.css contains the Bootstrap CSS files (jQuery has no CSS files).
all.js is combined JS files from myproject.all, my.project.site and myproject.components. While bootstrap.js contains both the Bootstrap and jQuery JS files.

DIAGRAM 4
For Diagram 4,
For Diagram 1, myproject.all embeds both myproject.site and myproject.components. In turn, myproject.site depends on myproject.bootstrap which depends on myproject.jquery.

HTML Output:

/etc/designs/myproject/jquery.js
/etc/designs/myproject/bootstrap.js
/etc/designs/myproject/all.js

all.css contains the CSS files from myproject.all, myproject.site, and myproject.components. While bootstrap.css contains the Bootstrap CSS files (jQuery has no CSS files).
all.js is combined JS files from myproject.all, my.project.site, and myproject.components. bootstrap.js contains both the Bootstrap JS files and jquery.js contains the jQuery JS files.

A useful tool for tracing dependencies can be found in at http://localhost:4502/libs/cq/ui/content/dumplibs.html

Hopefully, these diagrams helped you to understand how embed and dependencies work together for Client Libraries. It’s up to your architecture on how you will mix and match this combinations between your clientlibs and components.

Sources:
https://docs.adobe.com/docs/en/cq/5-6-1/developing/clientlibs.html Using Client-Side Libraries (AEM 5.6.1)
https://docs.adobe.com/docs/en/aem/6-1/develop/the-basics/clientlibs.html Using Client-Side Libraries (AEM 6.1)
http://stackoverflow.com/questions/13052261/what-is-the-difference-between-embed-and-dependencies-for-type-clientlibrary stackoverflow: What is the difference between embed[] and dependencies[] for type ClientLibraryFolder?
http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/ Clientlibs explained by example by Feike Visser

[myproject.bootstrap]-embeds->[myproject.jquery]
[myproject.jquery]
[myproject.components]
[myproject.site]-.-depends-.->[myproject.bootstrap]
[myproject.all]-.-depends-.->[myproject.components]
[myproject.all{bg:tomato}]-embeds->[myproject.site]

http://yuml.me/

Continuation — 2/11/16

Continuation

I plan to bring this blog back. But I’ll be posting more on things related to work. Hopefully, this will work out. This will serve as a reference for me as I tend to remember better the things that I write.

I guess, welcome back?

New website — 6/14/14

New website

New website

Hello everyone! I have this new website khakiout.com. I will be posting most of my drawings there more. Actually, it’s just a tumblr website with a custom domain, but I might migrate it to a different hosting service someday. For now, tumblr does the trick.

The illustration above is a catburglar. Catburglar is inspired from a theme given by Sketch Dailies on twitter. I used copics and some Uni pens to create this work.

Mythspace — 4/7/14

Mythspace

I just participated in a fan art contest! There is this local comic series that I’ve been hooked on. The title’s Mythspace. Mythspace is a compilation of stories about characters based from Philippine folklores such as nunos, manananggals, and tikbalangs. Only, this is set in the distant future!

I managed to get only 3 issues from their series. The others were already sold out. I bought the Unfurling of Wings, Humanity, and Uncommon Ground. My favorite among the three is Humanity. Thus, my fan art entry is Marta – the heroine of the story. A scene from the Unfurling of Wings reminded me of Ocean’s Eleven.

I’ll be going to Komikon this Saturday in hopes that I can complete the current series. I am looking forward for more issues and more to stories to enjoy from the Mythspace universe. You can find out more about Mythspace in their Facebook page.

Here are my sketches of Marta. :) You may notice the difference in her hairstyle. I got the hair wrong at my first try.

marta

marta

Thranduil preparing for Christmas — 12/24/13
New stuff! — 10/24/13
travel around — 9/7/13
Follow

Get every new post delivered to your Inbox.

Join 224 other followers