Hey Welcome Techies👋🏼

Hello everyone, my name is Aryan Sharma, and I hope you're all doing well.

I'm thrilled to begin this JavaScript blog on Transpilers and Pollyfills for absolute beginners.

You can find my other blogs on JavaScript here↗️

Polyfills and transpilers

JavaScript is dynamic language and evolves steadily, as the new requirement or proposal for changes appear regularly,

they are analyzed and are appended to the list at https://tc39.github.io/ecma262/

The basic idea:

As programmers, we’d like to use most recent features. The more good stuff – the better!

On the other hand, how to make our modern code work on older engines that don’t understand recent features yet?

Don't worry we have two concepts or tools for this:

1. Transpilers

2. Polyfills

In this blog, we 'd learn how to use them in real-life.

Transpilers

It is a type of compiler that translates source code from one programming language into source code in another programming language.

Transpilers are commonly used for various purposes, including:

1. Cross-Platform Development

2. Language Migration

3. Performance Optimization

So a JavaScript transpiler converts a form of JS code to another form of JS. There are several transpilers that translate ES6 code to ES5:

• Babel

• TypeScript

• Traceur

JavaScript before year 2020 didn’t have the “nullish coalescing operator” ??. So, if a visitor uses an outdated browser, it may fail to understand the code like height = height ?? 100.

A transpiler would analyze our code and rewrite height ?? 100 into (height !== undefined && height !== null) ? height : 100.

// before running the transpiler
height = height ?? 100;

// after running the transpiler
height = (height !== undefined && height !== null) ? height : 100;

Typically, a developer deploys the transpiled code to the server after running the transpiler on their personal computer.

Babel is one of the most well-known transpilers out there, to speak of names.

It's very simple to integrate a transpiler into the development process because modern project build systems, like webpack, offer a way to run one automatically on every change to the code.

Polyfills

The term "polyfill" is a blend of "poly" (meaning many) and "fill," indicating that it fills the gaps in older browsers,

And allowing them to handle features that are not natively supported.

A polyfill is a piece of code (usually written in JavaScript) that provides modern functionality to older web browsers.

New language features may include not only syntax constructs and operators, but also built-in functions.

For example, Math.trunc(n) is a function that “cuts off” the decimal part of a number, e.g Math.trunc(1.23) returns 1.

A script that updates/adds new functions is called “polyfill”. It “fills in” the gap and adds missing implementations.

For this particular case, the polyfill for Math.trunc is a script that implements it, like this:

if (!Math.trunc) { // if no such function
  // implement it
  Math.trunc = function(number) {
    // Math.ceil and Math.floor exist even in ancient JavaScript engines
    // they are covered later in the tutorial
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

Via javascript.info

I hope you get to know about the tools we covered in this blog

Don't forget to follow my blog.

Happy Learning And Coding!