Polyfill - Cross-Browser Support

What are Pollyfills

Pollyfills are a way to add support for newer JavaScript features in older browsers, such as Internet Explorer (IE). In this blog post, we will be discussing some of the most useful pollyfills for React that can be used to ensure compatibility with IE.

Note:

Using too many pollyfills in a project can have a negative impact on the performance, it's always a good idea to test the performance and decide which ones are necessary.

Lets begin then

A pollyfill is a JavaScript library that allows you to use modern JavaScript features in older browsers that do not natively support them. It essentially "fills in the gaps" in older browsers' support for newer web technologies. They are used to ensure that web applications work correctly in older browsers and reach a wider range of users.

Pollyfills are designed to be used in conjunction with feature detection, which is a technique that allows you to check if a specific feature is supported by the user's browser. If the feature is not supported, the pollyfill is loaded and used as a substitute. This approach ensures that the web application works correctly in older browsers, but also takes advantage of the native support for the feature in modern browsers, which can result in better performance.

Pollyfills can be used for a wide range of features, such as:

• ECMAScript features, like Promise, Object.assign(), Array.prototype.includes()
• Web APIs, like Fetch, XMLHttpRequest, WebSockets
• HTML5 elements, like canvas, audio, video
• CSS3 features, like media queries, transitions, animations

It's also worth noting that, while pollyfills can be a great solution for adding support for older browsers, they can also have a negative impact on performance and how ???

• Increased file size: Pollyfills are JavaScript libraries that need to be loaded along with your application, which can increase the overall file size of your application, resulting in slower page load times.

• Extra processing time: Pollyfills need to be parsed and executed by the browser, which can require additional processing time, especially on older or less powerful devices.

• Testing: When using pollyfills, you should always test them on the targeted browsers to ensure that they work as expected and don't have a negative impact on performance.

• Some pollyfills might have their own dependencies, which need to be loaded and executed along with the pollyfill

How to use then 🤔

Once you have identified the pollyfills that are needed for your React application to work in IE, the next step is to implement them in your codebase. There are different ways to use pollyfills, but one of the most common ways is to use a package manager, such as npm or yarn, to install the pollyfill packages and import them into your codebase.

Here are some example of how to use the Object.assign(), includes(), Promise's, Compose pollyfill in a React application:

• Install the Object.assign() pollyfill package using npm or yarn:

npm install object.assign --save
or
yarn add object.assign 

• Import the Object.assign() pollyfill in the entry file of your application (usually index.js or app.js):

import 'object.assign/polyfill';

• Use the Object.assign() method as you would normally in your code:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = Object.assign(obj1, obj2);
console.log(obj3); // { a: 1, b: 2 }

Array.prototype.includes()

Install the array.prototype.includes pollyfill package using npm or yarn:

npm install array.prototype.includes --save
or 
yarn add array.prototype.includes

import 'array.prototype.includes';

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

Promise

Install the es6-promise pollyfill package using npm or yarn:

npm install es6-promise --save
or
yarn add es6-promise

import 'es6-promise/auto';

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 1000);
});

promise.then(console.log); // "Hello, World!"

Implement the compose() polyfill

if (!Function.prototype.compose) {
  Function.prototype.compose = function (fn) {
    return (...args) => this(fn(...args));
  };
}

const add = (a, b) => a + b;
const double = (x) => x * 2;
const addAndDouble = add.compose(double);
console.log(addAndDouble(1, 2)) //6