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.
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.
There are now two files but only the CSS and JS files from myproject.all, myproject.site and myproject.components were included.
For Diagram 3, myproject.all embeds both myproject.site and myproject.components. In turn, myproject.site depends on myproject.bootstrap which embeds myproject.jquery.
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.
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.
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.
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