Babel: Javascript Compiler
BabelJS is a JavaScript transpiler which transpiles new features into old standard. With this, the features can be run on both old and new browsers, hassle-free. An Australian developer, Sebastian McKenzie started BabelJS.
Why BabelJS?
JavaScript is the language that the browser understands. We use different browsers to run our applications − Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser etc. ECMA Script is the JavaScript language specification; the ECMA Script 2015 ES6 is the stable version which works fine in all new and old browsers.
After ES5, we have had ES6, ES7, and ES8. ES6 released with a lot of new features which are not fully supported by all browsers. The same applies to ES7, ES8 and ESNext (next version of ECMA Script). It is now uncertain when it will be possible for all browsers to be compatible with all the ES versions that released.
Incase we plan to use ES6 or ES7 or ES8 features to write our code it will tend to break in some old browsers because of lack of support of the new changes. Therefore, if we want to use new features of ECMA Script in our code and want to run it on all possible browsers available, we need a tool that will compile our final code in ES5.
Babel does the same and it is called a transpiler that transpiles the code in the ECMA Script version that we want. It has features like presets and plugins, which configure the ECMA version we need to transpile our code. With Babel, developers can write their code using the new features in JavaScript. The users can get the codes transpiled using Babel; the codes can later be used in any browsers without any issues.
BabelJS manages the following two parts −
- transpiling
- polyfilling
What is Babel-Transpiler?
Babel-transpiler converts the syntax of modern JavaScript into a form, which can be easily understood by older browsers. For example, arrow function, const, let classes will be converted to function, var, etc. Here the syntax, i.e., the arrow function is converted to a normal function keeping the functionality same in both the cases.
What is Babel-polyfill?
There are new features added in JavaScript like promises, maps and includes. The features can be used on array; the same, when used and transpiled using babel will not get converted. In case the new feature is a method or object, we need to use Babel-polyfill along with transpiling to make it work on older browsers.
Here is the list of ECMA Script features available in JavaScript, which can be transpiled and polyfilled −
- Classes
- Decorators
- Const
- Modules
- Destructing
- Default parameters
- Computed property names
- Object rest/spread
- Async functions
- Arrow functions
- Rest parameters
- Spread
- Template Literals
ECMA Script features that can be polyfilled −
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- includess
- Array.from, Array.of,Array#find,Array.buffer, Array#findIndex
- Object.assign,Object.entries,Object.values
Advantages of using BabelJS
In this section, we will learn about the different advantages associated with the use of BabelJS −
- BabelJS provides backward compatibility to all the newly added features to JavaScript and can be used in any browsers.
- BabelJS has the ability to transpile to take the next upcoming version of JavaScript — ES6, ES7, ESNext, etc.
- BabelJS can be used along with gulp, webpack, flow, react, typescript, etc. making it very powerful and can be used with big project making developer’s life easy.
- BabelJS also works along with react JSX syntax and can be compiled in JSX form.
- BabelJS has support for plugins, polyfills, babel-cli that makes it easy to work with big projects.
Disadvantages of using BabelJS
In this section, we will learn about the different disadvantages of using BabelJS −
- BabelJS code changes the syntax while transpiling which makes the code difficult to understand when released on production.
- The code transpiled is more in size when compared to the original code.
- Not all ES6/7/8 or the upcoming new features can be transpiled and we have to use polyfill so that it works on older browsers.
To set up the environment for BabelJS:
To work with BabelJS we need following setup −
- NodeJS
- Npm
- Babel-CLI
- Babel-Preset
- IDE for writing code
Promises
JavaScript promises are used to manage asynchronous requests in your code.
It makes life easier and keeps code clean as you manage multiple callbacks from async requests, which have dependency. Promises provide a better way of working with callback functions. Promises are part of ES6. By default, when you create a promise, the state of the promise is pending.
Promises come in three states −
- pending (initial state)
- resolved (completed successfully)
- rejected(failed)
new Promise() is used to construct a promise. Promise constructor has one argument, which is a callback function. The callback function has two arguments — resolve and reject;
both these are internal functions. The asynchronous code which you write, i.e., Ajax call, image loading, timing functions will go in the callback function.
If the task performed in the callback function is a success, then the resolve function is called; otherwise, the reject function is called with the error details.
The following line of code shows a promise structure call −
var _promise = new Promise (function(resolve, reject) {
var success = true;
if (success) {
resolve("success");
} else {
reject("failure");
}
});
_promise.then(function(value) {
//once function resolve gets called it comes over here with the value passed in resolve
console.log(value); //success
}).catch(function(value) {
//once function reject gets called it comes over here with the value passed in reject
console.log(value); // failure.
});ES6 Promise Example
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});timingpromise.then((msg) => {
console.log(msg);
});Output
Promise is resolved!
