Polyfills in JavaScript

Understanding JavaScript();

Hello, Welcome back JavaScripters 😎, let’s dive deep into Polyfills.

“POLYFILLS” sounds huge right? but it's not actually (or it is 😬 but let’s understand it in some simple terms with simple examples)

I heard this term a long back in some conference and some devs were talking about it, after listening to those conversations I was so fascinated about the word polyfills, but also it is like, the words that you haven’t heard about sound huge and it makes you afraid of learning it in deep (it happens to me 😓 or other guys feel the same).

no worries, don't get afraid it's all about how someone explains it, let me give it a try 😄

Story covers:

• what are Polyfills? also, what is Transpiling?
• Why it's needed?
• Some famous polyfill packages/code files
• How can you write a polyfill snippet?

What are Polyfills and Transpilers?

Polyfills

• Polyfills act as a browser fallback, if your browser doesn’t have the support for the functionality, polyfill helps you get that functionality.
• in simple terms, polyfills are missing pieces of code, now you might be thinking what code is missing I develop my app and I know what to code and what not to do, yes you are correct.
• A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.
• confused? okay… let me make it more simple, for example, you used JSON.stringfy in your code and that is an inbuilt function that you can simply use without any external support added in the latest browser, but if you pick some older version of the same browser this JSON.stringify functionality might not be supported and your application will start breaking.
• Polyfills were introduced to fill these gaps between old and new browsers.
• Polyfills help you in providing the same functionality in the old versions of the browsers which are by default supported in the new versions of the same browser.
• there are some awesome polyfill packages present on the web, so you don’t need to write your own, they are already written and maintained by huge communities and organisations. Even though you can write your polyfills.

Transpiler

• Every day there are some new updates in the JS world, and with new updates, new features and new syntaxis are introduced.
• This tool helps in Transforming and Compiling the newer code into the older code so that the old browser can understand
• You will write the code in the newer style and it will get deployed in the older style, now you might have the question if it will get deployed in the older style why write in the newer style right?
• it has got a few advantages to writing the code in the newer style
  - new style codes are more readable and maintainable than the older ones.
  - transpiring is just for older browsers, with new code and new syntax we get the advantage of browser performance.
  - and much more.
• For example, Transpiling the below-written ES6 (what is ES6? give it a read here) arrow function(newer code) to the older code

right swipe function in es6, arrow function

Transpiler helps in transforming the above code to the below style code

The older version of the browser doesn’t understand the arrow functions, so we need to transpile it.

transpired to the old format of code

Why it’s needed?

using the classic example, a dating app.

you have a function that swipes the profile right and left and you have your code base in ES6

right swipe function in es6, arrow function

All new version of browsers supports ES6 but you have some oldies (old age users, around 90 years) who are familiar with old browsers only, and those browsers have not heard about ES6 in their entire life. 😬

what now, will this piece of code get executed there? The simple answer is no because those old browsers don’t know what is an arrow function, for that we need transpilers, that will convert the new style code to the old style so that, the browser can understand that this is a function and it can get executed and oldies can enjoy using your app

wait, is only transpiring enough? No 😬 it’s not, modern code uses some modern built-in JS function, that is available with the latest JS versions.

for example, if you have used the .bind() [don’t know what bind is? give it a read here] method on any function in your code, old browsers won’t understand what is .bind() method as it doesn’t exist for them, it only comes with the latest browsers, and there is a lot of function and piece of code those are supported by the new browsers and not the old ones. so to make your dating app run in all the browsers we need to use polyfills.

using polyfills we can achieve the goal of using new browser functionality in the older ones, without forcing the user to change or update their browser.

Some famous polyfill packages/code files

• my personal favourite is Babel, this is very clear and simple to understand, give it a read
• you can also check out the coffee-script, and webpack as an alternative to babel

Write your bind() function polyfill in a few simple steps.

• step 1: understand what bind does (explained here)
• step 2: where does it reside? so that it will be accessible to all functions (as the bind method is accessible to all functions)
• step 3: it should return a function
• step 4: it should accept multiple arguments while binding and also while calling the bounded method.

what are you waiting for, let’s get started!

What does the original bind method implementation look like?

Original Bind method implementation

creating our bind method, naming it as mybind

by adding a method to Function.prototype we make sure that the mybind() method is accessible to every function.

also, the mybind method returns a function as the original bind method does

now moving forward, the first arg in the bind method is the object, followed by other params.

args[0] refers to the user object here, we need to pass other arguments to fill the value of college, state and country.

as we passed the args to the mybind method also this need to be passed in the apply method as a second param (var params will be an array of args when passed to ap)

what if we have some runtime args that need to be passed in printUserInfo()

you can simply pass the args while calling printUserInfo(), and any args passed to printUserInfo() will be accessed in the return function(), now we have args coming from 2 places parent function mybind and the function which is returned i.e. args and args2.
apply method takes the 2nd arg as an array so we can merge those arrays in the apply method.

obj.apply(args[0], […params, …args2])

and boom, now your mybind() method is ready to replace bind()

Of course, this is the basic implementation, you can add more checks to make it more robust, this was just a basic explanation of how you can write your polyfill code.

what next, start building your polyfills, and let me know in the comment section how was your read and if I missed anything.

every ready to learn new things 😎

do you guys know what is function currying, let’s see it next.