Hi all,
I'm wondering what the most performant way to include client-side clientlibs is.
Example: Assume you have to develop a couple of components each including their own client-side JavaScript, like a Google Map component and a carousel component (e.g. Slick) .
As far as I can see, there are a couple of options:
Am I missing another (better) option that only includes client-side JavaScripts that are required and allows code separation per component?
If not, which of these options above is considered best practice?
Thanks!
Solved! Go to Solution.
Views
Replies
Total Likes
Hi,
I would use a pragmatic approach:
And of course:
Jörg
Views
Replies
Total Likes
Most of the components are loading ClientLibs when they need to - so this would line up with #2. If a libs is only required in a specific component - then there is no need to load it for all pages. Only the component's script should include logic to load the client lib,
Views
Replies
Total Likes
Thanks for the reply.
Wouldn't this mean though that the script is loaded as many times as there are components present on the page since calling the clientlib.html actually generates <script> tags at the location it is called?
In a context where you have 3 components that include a clientlib with listeners, the script would try to bind them 3 times, while the initialization should only occur once for all components.
Let's assume these components rely on jQuery, if you include jQuery at the location the clientlibs are loaded, it's possible that jQuery is loaded very soon in the DOM rendering process, while ideally it should be loaded after all the content.
How do you deal with a situation like this when lining up with #2?
Thanks again!
Views
Replies
Total Likes
That is a good point - i was thinking from the perspective of 1-1. Say you had a JQuery plug-in used in a component and that component was to be used once in your site, Then you would want to load it at the component level.
Views
Replies
Total Likes
Hi,
I would use a pragmatic approach:
And of course:
Jörg
Views
Replies
Total Likes
IMO, Clientlib makes sure that even if you include a clientlib multiple times, only one of its instances will be converted into <script> tag, so long as Category name is same.
Apart from dependency management challenge, I believe another issue will be a number of HTTP calls going up now since every component will now try to get it's JS file when it tries to render which could be a performance issue in HTTP 1.1 and how browsers work.
I would recommend going with template specific clientlibs since you will have less number of templates but more pages and browser will be easily able to cache it on the very first page using that template. Template could be as hardened as possible for example asking the designer to lock what all components can be part of this template. This approach is more inline of your #3 approach.
Views
Replies
Total Likes
I would recommend:
1. Writing template specific client libraries.
2. Consolidating all your client libraries basis component inclusion using custom code (that would be executed once in application lifetime) in to a single library and loading them at the end of the page.
3. Use caching if size of the client lib increases.
4. Above would not be applied for the third party libraries. And those would be loaded before solution libraries.
Views
Replies
Total Likes
Views
Likes
Replies