Can we async or defer referencing Client side Libraries

Avatar

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

75 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

75 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
JakeCham
Level 2

15-03-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

15-03-2021

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

Answers (3)

Answers (3)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

15-03-2021

@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.

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

15-03-2021

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

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile
Rohit_Utreja
Level 4

15-03-2021

@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