Degrade gracefully when external JS can’t be loaded

[robinwhittleton]

There are plenty of situations where external JS could fail to load and be unavailable. For performance reasons we apply the js-enabled class inline, which can lead to a mismatch between the JS availability and the styling hook.

To work around this, we can check at the end of the document to see whether GOVUK (our standard module namespace) exists. If not then the external JS hasn’t triggered: at this point we can remove the js-enabled class from the body and fall back to the non-JS styling.

[robinwhittleton]

I would love some discussion around this before it’s merged.

[tombye]

It seems a bit odd to use the js-enabled class to indicate the presence of window.GOVUK only as the words imply something else.

It also seems to assume all external JS that attaches to window.GOVUK will load in one file so if window.GOVUK exists they all do. Not sure it works if you're serving them from more than one file and not all load (for example if nodes of your CDN don't all update correctly so certain locations point to files the CDN doesn't possess).

Personally, my problem is with using js-enabled rather than this change. Unless I'm wrong, all js-enabled tells you is scripting is enabled on the client rather than certain scripts are running. This is the reason I'm sceptical of using it because that information doesn't help much. I much prefer your approach of each module adding classes to indicate it is present and running (in alphagov/govuk_frontend_toolkit#317) because I can declare styles specific to the module which are only activated when its JS runs.

[robinwhittleton]

Leaving aside the radio buttons work, this attempts to fix a more general situation. There will be exceptions yes (your single file from multiple failing is one) but it certainly resolves the broken connection to the CDN issue.

Regarding adding classes in the external JS, that swaps out that problem of potential broken connections for a delay in applying JS-specific styling. This can lead to a flash of unstyled content, for example panels that are meant to be hidden on page load showing for the time it takes to load, parse and run the JS. Either ways has pros and cons.

[tombye]

Looking at the alphagov repos is helpful for an idea of usage:

https://github.com/search?l=&p=1&q=js-enabled+user%3Aalphagov+language%3ASCSS&ref=advsearch&type=Code&utf8=%E2%9C%93

From that it looks like we do use js-enabled as a straight boolean in the CSS targeting a state when JS for the thing being styled is both available and runs. I also can't find anything there styling JS behaviours not part of the window.GOVUK namespace.

In other words, the way it's being used by us gives a pretty strong reason for this change as it would benefit the majority.

Conscious that it would be helpful if someone other than me to comment on this too :)

[NickColley]

LGTM 👍