Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Can we async or defer referencing Client side Libraries

Avatar

Level 5

Hi Team,

I'm trying to load a client library using a helper template provided by AEM.

<sly data-sly-use.x="/libs/granite/sightly/templates/clientlib.html">

      <sly data-sly-call=${clientlib.js @@categories='x'}/>

</sly>

 

Do we need to still defer this if so how we can do it ?

 

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @JakeCham 

As of now this is not supported on any version of AEM as per Adobe. Few months back I too reached out to Adobe with similar query and they asked us to do some custom implementation on our own as they do not have any such implementation available OOTB.
Please refer https://github.com/nateyolles/aem-clientlib-async for reference.

Thanks,
Asutosh

View solution in original post

0 Replies

Avatar

Correct answer by
Community Advisor

Hi @JakeCham 

As of now this is not supported on any version of AEM as per Adobe. Few months back I too reached out to Adobe with similar query and they asked us to do some custom implementation on our own as they do not have any such implementation available OOTB.
Please refer https://github.com/nateyolles/aem-clientlib-async for reference.

Thanks,
Asutosh

Avatar

Administrator
@Asutosh_Jena_, thank you for sharing the answer. Keep on answering the questions in the AEM community. AEM community needs SMEs like you.

Avatar

Level 5

Hi Asutosh_Jena_ 

Thank you for the response. Tried the above solution where dependencies and embedded categories are not building as clientlibs .Only specified categories are coming when we used newly created template ''/apps/clientlib -async/sightly/templates/clientlib.html''. Any input highly appreciated.

 

Avatar

Level 4

@JakeCham ,

 

If you want to add any attribute in the clientlib load syntax, it needs to be customized.

Please refer to the below link to add 'defer' or 'async' in clientlib.

https://github.com/nateyolles/aem-clientlib-async

http://www.nateyolles.com/blog/2016/06/custom-aem-html5-async-clientlibs

 

Avatar

Community Advisor

Hello,

 

That's correct, you have to do custom implementation. I have done similar via sightly and biding the config properties from clientlibraries node to process accordingly.

 

https://github.com/nateyolles/aem-clientlib-async

 

share if you need more details.

 

THanks!!

Avatar

Community Advisor

@JakeCham there are two scenarios.

Scenario 1, where the client library has no dependencies

With scenario one, simple implementation with no dependencies, you can simply call the absolute path to the client library, for example:

 

<script defer src="/etc.clientlibs/my-site/clientlibs/clientlib-site.js"></script>

 

 

Scenario 2, the client library has dependencies

then like what the others say, nateyolle's solution looks like an option.