Skip to content

WIP defer and async loading of JS in themes and templates#11202

Closed
sonOfRa wants to merge 1 commit intokeycloak:mainfrom
sonOfRa:defer-async-scripts
Closed

WIP defer and async loading of JS in themes and templates#11202
sonOfRa wants to merge 1 commit intokeycloak:mainfrom
sonOfRa:defer-async-scripts

Conversation

@sonOfRa
Copy link
Copy Markdown
Contributor

@sonOfRa sonOfRa commented Apr 8, 2022

This is a start for an implementation of the change I suggested in #11201

<script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
</#list>
</#if>
<#if properties.asyncScripts?has_content>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This allows a theme extending base (or another theme that extends base) to add scripts that should be loaded with the async or defer parameters

@sonOfRa
Copy link
Copy Markdown
Contributor Author

sonOfRa commented Apr 8, 2022

Obviously this is incomplete (there are several more theme bases that would need to incorporate the changes), but for a basic discussion whether or not this is a feature that might be accepted, this should be enough.

The basic idea is introducing a new ScriptBean type for the LoginFormsProvider, and introducing a new method that allows the user of the API to select whether or not the loading of a script should be async or defer. With the implementation of the toString method on the ScriptBean, this should retain backwards compatibility with themes that use the previously present way of loading those scripts into the template.

Copy link
Copy Markdown
Contributor

@jonkoops jonkoops left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no problem with adding this feature, but someone has to take a look at the Java code.

@edewit
Copy link
Copy Markdown
Contributor

edewit commented Sep 20, 2022

I'm wondering how much sense this makes as more and more themes are moving away from using the velocity templates

@sonOfRa
Copy link
Copy Markdown
Contributor Author

sonOfRa commented Sep 21, 2022

I'm wondering how much sense this makes as more and more themes are moving away from using the velocity templates

That is not something I was previously aware of! For our use case, this is mostly about custom authenticators, but also to some degree about themes for the login/register/otp forms. Those are, in our use case mostly built around looking at the base or keycloak templates, and modifying them to reflect our needs. Is that functionality going to go away or be replaced with another mechanism? If that is the case, then I would tend to agree, and we would start moving to whatever is the intended replacement for this mechanism, rather than working with an older approach

@jonkoops
Copy link
Copy Markdown
Contributor

I think what we are going to end up with is that all scripts included in the new UIs (see keycloak/keycloak-ui) will end up with type="module" by default.

So perhaps it might be a better solution to not merge this PR.

@ssilvert
Copy link
Copy Markdown
Contributor

Since this PR only affects login, we might still want to consider it. Login flow will probably be the last thing to move to keycloak-ui.

And even then, I'm not sure exactly what we are going to do. There is a good argument for keeping login lean, quick, and universally compatible. The current implementation does that nicely.

Copy link
Copy Markdown
Contributor

@stianst stianst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to close this as all it does is allow a custom theme to load scripts asynchronously, that can easily be done by modifying the template.ftl without adding this additional complexity in KC.

@stianst stianst closed this Mar 15, 2024
@jonkoops
Copy link
Copy Markdown
Contributor

jonkoops commented Apr 2, 2024

@stianst we'll eventually have to create a more flexible system to load assets, which could include this feature. I've drafted an idea on how that could work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants