Origami Frontend Components & Services

Compatibility

Core & enhanced experiences

core and enhanced are definitions we have for ‘experiences’ that we serve to a browser. The experience we serve depends on the presence of some features within the browser.

Generally, older browsers that don’t support newer JavaScript features will get a core experience, and modern browsers will get the enhanced experience.

To determine whether or not a browser supports those features, we use a ‘cuts the mustard’ test.

Cuts the mustard

Defining a CTM test

This test checks browsers for some features that are only implemented by modern browsers. We recommend the following test:

var script = document.createElement('script');
var supportsDeferredScripts = "defer" in script && "async" in script;
window.cutsTheMustard = (typeof document.documentElement.dataset === 'object' && ('visibilityState' in document) && supportsDeferredScripts);

Toggling styling

The styling we choose to display rely on class names. Keeping with the experiences, we will be using core and enhanced. Origami components contain fallback styling for the browsers that fail the test. We need to toggle the class names based on the result of the test, and to avoid flashes of content we’ll always assume that the experience we will be served is core, until proven otherwise.

Your <html> will need the core class:

<html class="core">

And we’ll want to add a script to replace that class with enhanced if the browser does pass the test:

if (window.cutsTheMustard) {
	document.documentElement.classList.replace('core', 'enhanced');
}

Finally, we need to add instructions for our styling to handle the html class:

.core .o--if-js,
.enhanced .o--if-no-js {
	display: none !important;
}

Loading JavaScript asynchronously

If our browser passes the test and there is JavaScript that should only be served for the enhanced experience, we can load the JavaScript dynamically.

If there is JavaScript to execute regardless of the experience served to the browser, we should add a <script> element to load that JavaScript.

<script>
	(function(src) {
		if (window.cutsTheMustard) {
			script.async = script.defer = true;
			script.src = src;
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(script, s);
		}
	}('https://example.com/main.js));
</script>

Browser support

Origami components conform to the FT’s browser support standard, which looks like this:

DESKTOP
Browser Enhanced Core
Chrome Latest
Chromium Latest
Edge Latest
Firefox Latest
IE 11 9
Opera Latest
Safari 10 (6.1) 6
MOBILE
Browser Enhanced Core
Android Native 4
BlackBerry Native 10
Chrome Latest
Firefox Latest
Safari 9 4
Samsung Native 5 (3)
INTERNAL PRODUCTS
Browser Enhanced Core
Chrome Latest
Firefox Latest
IE 11
Safari Latest

Polyfill service

In the physical world, ‘Polyfilla’ is a type of plaster that is used to fill in small holes in walls. In web development, polyfills are snippets of code that implement a feature on browsers that do not natively support that feature. It means that we can write modern JavaScript without having to invest a large amount of time in making it work in older browsers.

What can be time consuming, is identifying the polyfills we need, so for that, we use and maintain the Polyfill Service which hosts all of its own documentation.