Supporting older browsers (part 1) – JavaScript

Introduction

We have many ways to support writing javascript for older versions of the browser (IE 8, IE 9 …), one of them is to use Polyfill .

What’s a polyfill?

Polyfill is a piece of code that tells the browser how to implement javascript features. Once we have used polyfill for a function, then we will not need to worry about whether the function or method we just wrote will have browser support or not.

Polyfill has a fairly simple method of operation:

• check if the feature has browser support or not
• If the browser does not support, it will add code to support the implementation of the feature

For example, the Array.prototype.find method, in case the browser does not support Array.prototype.find , it will instruct the browser how to implement:

We can easily find this polyfill of Array.prototype.find above MDN .

Using Polyfills

Basically, there are 2 ways to use polyfill:

• Polyfill manually : manually (same as we did above)
• Polyfill library : add multiple polyfill at a time via library

Polyfilling manually

First we have to search the polyfill we need, maybe via google, now almost every new function or method that older browsers have little support for has polyfill available on MDN .

After finding the appropriate polyfill, we can add it as the above code.

Polyfill library

There are many libraries that contain lots of polyfill, one of which is ES6-shim , it provides all the ES6 polyfill features.

Note polyfill is part of the shim . Shim is a library that provides completely separate APIs for older browsers that do not support the same name APIs.

Using cutting-edge JavaScript features

In addition, we can use Babel – a tool with the main function of compile Javascript, in the process of compile it can read js files, then convert those files to a format that the browser can understand.

What if polyfills aren’t enough?

If in case polyfill is still not enough to support a certain feature, then we should reconsider a little:

• Is it necessary to use the exact same feature for different browsers? We can use one of the other equivalent features but make sure all browsers support it
• Or can we handle it in a different direction without using the feature, or even javascript?

There is no optimal solution, depending on the circumstances, we can use different solutions to best suit.

How to tell if a browser supports the feature?

To check which features we are using are supported by browsers, we can use caniuse.com . Write the javascript feature we want to check, then we can see the result, like with Array.prototype.find :

Another way we can check on MDN :

Beware the cost of JavaScript

When we use polyfill, it means we will add more lines of javascript code. Once the number of js files is too large, it will also cause many effects:

• Old browsers are often used on older systems, which means downloading large amounts of js files will affect performance.
• The larger the number of js files, the longer the Javascript bundle process will take

Summary

The article is about sharing how to support javascript with old browsers through the use of Polyfill and related libraries or tools. Posts are limited, thank you for taking the time to track.

Source: https://zellwk.com/blog/older-browsers-js/