Introduction To Polyfills & Their Usage
The Web had a beginning but it won’t have an end. As new technologies come out they won’t be supported by the older browsers immediately. This can be quite a challenge to incorporate the latest features into the browser so as to make our applications work successfully without sacrificing the usage of newest of features.
This is a major problem, isn’t it? But fear not as for every problem there is a solution to it. The Gods have produced a new term for it and they have called it “Polyfills”.
What Are Polyfills?
In layman’s terms, one can imagine a polyfill as a common paste which can be used to fill holes and cracks to smooth out any defects in a wall. In the UK there is a popular brand name for this paste which is called “Polyfilla”. On the usage of this paste its impossible to tell that there is a hole in the wall. Neat stuff eh?
For the web, a polyfill does the same thing. There might be some functionality missing in the browser that needs to be added or filled in.
This brings us to the following quote:
A polyfill (or polyfiller) is a piece of code (or plugin) that provides the technology that we, the developers, expect the browser to provide natively.
Common Browser Features Where Polyfills Are Used
JavaScript is the language used to create a polyfill, but a polyfill can be used to implement various browser features other than ECMAScript (ES5, ES6, etc.) standards:
- SVG
- Canvas
- Web Storage (local storage / session storage)
- Video
- Cross-Origin Resource Sharing (CORS)
- HTML5 elements
- CSS responsive design modules
- Accessibility / ARIA
- Web Sockets
- Geo Location
- Browser State Management and many others!
Some Real-World Examples
One example of a polyfill is the code below which is a polyfill for the new ES6 String method startsWith():
The above lines of code are just regular JavaScript which are needed for the browser to understand if the browser does not have native support for the specific feature startsWith().
Furthermore, if (!String.prototype.startsWith) is used to prevent overwriting of the browser’s native startsWith() method. If the feature is not present then the polyfill fills the hole in the browser’s feature set. Cool stuff!
Another example of a polyfill is for Web Storage (local storage or session storage). The code for it in rough is given below:
The above code defines an IIFE (Immediately Invoked Function Expression) where the web storage standards can be defined using JavaScript. The function before execution checks whether localStorage and sessionStorage are already present in the browser or not.
During Web Storage’s inception, it had to deal with inconsistencies hence polyfills for it had to come into the picture. Hopefully, this will paint an idea of how one can use polyfills in their own projects.
One can put a folder named polyfills in their application project structure and can put their JavaScript files in there to be linked and used while running the app. Especially, this is valid if someone is developing their own set of polyfills for their application.
Now you have the power to hack the browser to support the missing features.
But not so fast. The Web is a huge place, one can literally get lost in it. Before we hack the web, we must know what polyfills already exist and which ones we need to focus on.
The following resource gives a fair idea of which polyfills already exist: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
So, definitely remember to fix those cracks in the wall as and when required. Your wall will definitely get some undivided attention. You get the idea, don’t you?
Happy hacking! 😄
Other Posts By Me
Find me at: https://medium.com/@anurag.majumdar
➥ Web Development
- Progressive Web App Shell: The Key To Loading Your Site Under 1 Second!
- “Super” and “Extends” In JavaScript ES6 — Understanding The Tough Parts
- How to write simple modern JavaScript apps with Webpack and progressive web techniques
