Polyfills and shims

Hello folks!! Let's understand what is polyfill and shim in simple terms and will move ahead with examples and difference between them.

First will start with,

what is shim?

A shim is a piece of code used to correct the behavior of code that already exists,usually by adding new API that works around the problem.

for sure many of you not understood what it means actually just by definition 😃. so let's understand with an example.

For example : if es5-shim npm package which allows to write ECMAScript-5 (ES5) syntax and will not care if the browser is running have ES5 supported or not. If you take Date.now as an example. This is a new function in ES5 where the syntax in ES3 would be new Date().getTime(). If you use the es5-shim you can write Date.now and if the browser you’re running in supports ES5 it will just run without any hassle. However, if the browser is running with the ES3 engine, then es5-shim will intercept(examine or evaluates) the call to Date.now and then just returns new Date().getTime() instead of Date.now . This interception is called shimming. The relevant source code from es5-shim looks like this👇:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

• so,shim is a library that brings a new API to an older environment, using only the means( particular method or process) of that environment where it is running and

• Shim is a script as well which mostly provided as a plugin or library.

How it works?

Actually, it will override an already existing API and implements a different behavior in order to support new APIs in older browsers (Backward compatibility).

now will quickly jump into ,

what is polyfill?

A small story on how the name polyfill is given to polyfills 🤔 excited to know!! 😬

Polyfilla is a UK product known as Spackling Paste in the US, that can be put into walls to cover cracks and holes.(spackling means:To fill gaps with something) the person( Remy Sharp) who coined this term polyfill has come up with an idea of visualising browsers as a wall with cracks in it. These polyfills helps in smoothing out the cracks and give us a nice smooth wall of browsers to work with it without any hassle.

Definition:

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

😀again i know that you have not understood just by defining it, so let's go with an example for polyfill to understand it better.

• Polyfill is a type of shim, Polyfilling is really just a specialized version of shimming.

• Polyfill is just a script that will check a certain API existence in the browser, if present ? then ok. If the API do not exists in the browser, then polyfill(which is a simple script) will act something like this:

for example, If I'm using Bluetooth API in the browser and I know some browser do not support such API so I will write something like this in order to check my API existence:

if(!navigator.bluetooth) { // write polyfill here }

another example to make you better understand: For instance there is no support for sessionStorage in IE7, but the polyfill in the sessionstorage npm package will add this feature in IE7 and in older versions of IE as well, by using techniques like storing data in the name property of the window or by using cookies.

Difference between polyfill and shim

shims are used for covering up old sins,

polyfills are used for bringing future enhancements back in time.

👆 I think by this difference you got more clarity on polyfill and shim 😎. Polyfill is about implementing missing features in an API, whereas a shim is about correcting features.

Thanks for reading till the end!!

Bye👋 for now, take care!!😇