Polyfilling is an invented term by Remy Sharp. It is one of the methodologies that can be used as a sort of backward compatibility measurement. The definition is best given by Remy himself.
“A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.”
— Remy Sharp
Note: All the new features are not polyfillable or it is not possible always to create polyfills without any deviation thus while implementing polyfills explicitly it is recommended to have a knowledge of the working on whole. But, many developers prefer using the polyfills that are already available. Some of these are mentioned below.
By development practice, while using Transpiling it is essential to write the code maintaining the newer syntax but while deploying the project use a transpiler similar to a minifier or a linter to deploy the transpiled old syntax friendly program. That raises the question why should we even bother writing in the newer syntaxial form while still deploying the older one? This is a very logical question to ask and has a lot of good points to give as answers out of which few are given below.
- It goes without saying that the newer syntax was added to the language to make the code more readable and easily maintainable i.e. the newer versions are simply better than The older equivalents. Thus it is recommended to
write newer and cleaner syntax to achieve a better result.
- Transpiling only for older browsers, while serving the newer syntax to the updated browsers, we can get the advantage of browser performance optimizations.
- Using the newer syntax earlier allows it to be tested more robustly in the real world, which provides earlier feedback and if found early enough, they can be changed/fixed before those language design mistakes become permanent. Thus using the newer syntax makes the syntax much more reliable in the long run.
Let us take some examples of Transpiling. ES2015 added a new syntaxial feature of default parameter value, it can be implemented using the following.
As you can see, if the parameter is not supplied we take the default parameter value in account but this syntax will not get recognized in pre-ES2015 engines. Thus after transpiling, we will get the older equivalent as the following.
As seen in the example above we can use a ternary operator to assign the default value if the argument is found to be undefined this will produce similar results to the ES6 equivalent. For next example let us see the thick arrow methods of ES6.
As you can see in the example above we can define a function without even using the keyword function and that also without hampering the readability, but this will not get recognized in pre-ES6 engines thus the equivalent code will be as following.
After learning about Transpilers it will be very odd to end this article without knowing some of the greatest of Transpilers available. The following is a small list of such tools.