Technical Articles
#ABAPers – What the heck is Polyfill and Shim?
Trigger
Happy New Year everyone! Off late i have started with #100DaysOfCommunityQA to learn, share and help if possible. During one of those days, a post regarding synchronous request came, that is where our community member suggested the OP to use promises asynchronous way. Eventually that is where the topic of Polyfill came up. I was like what the heck is Polyfill started digging more. So rest of this blog will talk about the experience, read on!
Search begins – Demystifying PolyFill
As always the first step was to google, the first link takes me to the creator Remy Sharp who coined this term. Polyfill has a background in the product Polyfilla quoting Remy Sharp.
Polyfill is backfilling the missing functionality,the miss can be due to different version or new features being launched recently. For example in SAP 4.6 we do not have some ABAP classes but in ECC. What if we need to use those classes in 4.6. What we do is create them as custom class in 4.6 and proceed. This is nothing but getting missing functionality enabled by copying it to lower version.
On a similar lines our browser are mostly powered by Javascript Engine(lets focus on Javascript), and it may happen some object functions are available IE11 but not in IE9 or some work in Chrome but not in IE.So Polyfill helps in filling this gap We will see a basic example soon, read on!
Okay if this is Polyfill what the heck is Shim?
Polyfill is a subset of Shim or a type of Shim.Let me explain Shim with an example.Imagine hypthetically if we were suppose run below mentioned code on lower version less than 750 source code.
REPORT demo_reduce_simple.
CLASS demo DEFINITION.
PUBLIC SECTION.
CLASS-METHODS main.
ENDCLASS.
CLASS demo IMPLEMENTATION.
METHOD main.
DATA itab TYPE TABLE OF i WITH EMPTY KEY.
itab = VALUE #( FOR j = 1 WHILE j <= 10 ( j ) ).
cl_demo_output=>write( itab ).
DATA(sum) = REDUCE i( INIT x = 0 FOR wa IN itab NEXT x = x + wa ).
cl_demo_output=>write( sum ).
cl_demo_output=>display( ).
ENDMETHOD.
ENDCLASS.
START-OF-SELECTION.
demo=>main( ).
It will fail as statement like Reduce, For etc. are not understood by lower versions. What if still we need to run this code on lower version what we need is kind of an intermediator/transpiler whatever you want to call it, which takes in this code, make it compatible with lower versions. This intermediator is nothing but Shimmer. It is basically first intercepting the calls and converting it as per compatibility with lower versions. Shim kind of gives us the abstraction over all the conversions from higher level to lower one. This was still a hypothetical example considering ABAPers is the focus, for more explanation and a common faced by all JS guys is described here .
Enough of Theory let’s look at an example
Everyone uses array in his/her day today life. Lets have a look at a method of array which is Include it find out if an element exist in the array return true else false. Source code from W3School
<!DOCTYPE html>
<html>
<body>
<h1>Array includes()</h1>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in IE 11 (and earlier versions).</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>The issue here is this code works only in chrome but not in IE as shown below.
Typical case where we need a Polyfill to be implemented. Most of the cases you don’t need to code you will find it on MDN site. For our missing include method as can be seen below we found the Polyfill code all we need to do is add it to our sample HTML file. The sample code first check if the method does not exist then only code its implementation else use the standard one.
Updated code after adding Polyfill code.
<!DOCTYPE html>
<html>
<body>
<h1>Array includes()</h1>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in IE 11 (and earlier versions).</p>
<script>
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function(valueToFind, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If len is 0, return false.
if (len === 0) {
return false;
}
// 4. Let n be ? ToInteger(fromIndex).
// (If fromIndex is undefined, this step produces the value 0.)
var n = fromIndex | 0;
// 5. If n ≥ 0, then
// a. Let k be n.
// 6. Else n < 0,
// a. Let k be len + n.
// b. If k < 0, let k be 0.
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
function sameValueZero(x, y) {
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
}
// 7. Repeat, while k < len
while (k < len) {
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
// b. If SameValueZero(valueToFind, elementK) is true, return true.
if (sameValueZero(o[k], valueToFind)) {
return true;
}
// c. Increase k by 1.
k++;
}
// 8. Return false
return false;
}
});
}
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
Now our code works like a charm
What next?
I believe the show must go on. One thing which i have realized about my trials with Javascript is it never stop amazing you. Off late ABAP has also introduced very cool constructs which we were missing earlier for example Reduce, value on and on, will be digging more into those. Feel free to provide your feedback and comments happy to hear.
Polyfilla - yep - a paste for filling holes in walls
Shim - normally metal it acts as a spacer between for example a bearing and it's cover to stop rotational vibration - a spacer in other words. So analagous to what you are describing.
yes totally agree.
Nice Blog and That was a very good initiative. I started being active in the community recently and I agree that being active here surely increased my knowledge by many times. It has changed my way of learning forever.
Feeling is mutual my friend.Let keep rolling:)