The ES2017 Bar

The ES2015 Bar

A document.write Alternative

<!-- targeting native async/await as ES2017 target -->
<script type="module" src="es2017.js"></script>
<!-- targeting ES2015 with ES5 fallback -->
<script nomodule>(function(g,d,s){
// Safari 10.1 is compatible with ESM
// but it ignores the nomodule attribute
if(!/\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(navigator.userAgent)){
// grab last script node
s=d.getElementsByTagName('script');s=s[s.length-1];
// append before it a new script (IE < 9 compatible)
s=s.parentNode.insertBefore(d.createElement('script'),s);
// set it up deferred and with a good'ol mime
s.defer=!0;
s.type='text/javascript';
// load the ES2015 bundle, fallback to the ES5 one
s.src=g.Reflect?'es2015.js':'es5.js';
}}(this,document));
</script>
<script>(function(g,d,s){
s=d.getElementsByTagName('script');s=s[s.length-1];
s=s.parentNode.insertBefore(d.createElement('script'),s);
s.defer=!0;s.type='text/javascript';
s.src=g.Reflect?'es2015.js':'es5.js';
}(this,document));</script>

About that User Agent sniff …

Without User Agent sniff

<script type="module">window.ESM=!0;import'./es2017.js';</script>
<script nomodule defer src="ubl.js"></script>
(function(g,d,s){if(!g.ESM){
s=d.documentElement;
s=s.insertBefore(d.createElement('script'),s.lastChild);
s.defer=!0;
s.type='text/javascript';
s.src=g.Reflect?'es2015.js':'es5.js';
}}(window,document));

Other Techniques or Alternative Opinions

As Summary

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store