UI5 Internet Explorer 11 support is almost phasing out, support it without much effort (with polyfills)

Your UI5 app runs on everything, even on toaster, but for unexplained reasons is broken on Internet Explorer? Your main support line is newer browsers but you are concerned to keep it running on IE? You simply hate IE debugger? Welcome aboard to helltrocompatibility!

We’ve been through this such a long long time just tryin’ to kill the pain.
‘Cause nothin’ lasts forever even cold November rain.

Good news everyone! SAPUI5 support for Internet Explorer 11 is planned to phase out on Q1/2021!
Bad news everyone: it’s still not Q1/2021.

You, as a good developer, try to keep support on same Product Availability Matrix as SAP, or as a cursed one is haunted by enforced browser policy that only allows IE11 and need to make it work there.

Looking at JavaScript, it evolved (and continues evolving) since IE11 launch, a lot of cool stuff was introduced that make our lives as developers easier. It’s a double edge sword because using them makes your code incompatible with IE11 since it is not natively implemented on this browser.

Does it worth reimplement in a way that works on IE11? No, because Life found a way to solve this problem: polyfills. In simple terms: a polyfill recreates a missing function in browser with JavaScript code, you can loosely think as a compatibility layer. One example is Object.values method, it simply extract object properties values into a array. This is not natively available on IE11. A naive polyfill for it is:

if (!Object.values) {
  Object.values = function(object){
    return Object.keys(object).map(function(key){
      return object[key];
    });
  };
}

But I’m not here today to talk about polyfills, I’m here to provide a simple tip: how to put them in your UI5 project in a organized way to make IE11 transition to freedom easy, and also a easy task to clean up code after Q2/2021.

UI5 apps have manifest.json as main ruler, let’s have some benefit from it

Create a folder to store polyfills (like polyfill), put your polyfills files there, and link them in manifest.json, inside sap.ui5 namespace.

{
  . . .
  "sap.ui5": {
    . . .
    "resources": {
      "js": [{ "uri": "polyfill/Object.values.js" }]
    }
    . . .
}

That’s all for today…

But what about a external polyfill?

Bad news everyone: manifest.json resource entry only accepts relative path.

Good news everyone! It is JavaScript, you can create a local script to load a external script!

WebIDE will complain about DOM manipulation (you shouldn’t do it on UI5 common development), we are doing pro business here so we disable eslint for this snippet.

/*eslint-disable sap-no-dom-access*/
/*eslint-disable sap-no-dom-insertion*/
/*eslint-disable sap-no-element-creation*/
if (!document.getElementById("polyfill_loader")) {
	var script = document.createElement("script");
	script.id = "polyfill_loader";
	script.src = "//polyfill.io/v3/polyfill.min.js";
	document.head.appendChild(script);
}
/*eslint-enable sap-no-dom-access*/
/*eslint-enable sap-no-element-creation*/
/*eslint-enable sap-no-dom-insertion*/

With my last breath, I curse Zoidberg!