Babel: Bridging Modern JavaScript to Older Browsers.

1. Babel Compiler
S.B.S.Younus, M.Sc., M.Phil., NET.,
Assistant Professor,
Department of Information Technology,
Sadakathullah Appa College,
Rahmath Nagar, Tirunelveli - 627 011.
Youtube: SBS Digital Learning.

2. What is Babel
• Babel is a JavaScript compiler.
• Babel is a toolchain that is mainly used to convert
ECMAScript 2015+ code into a backwards compatible
version of JavaScript in current and older browsers.

3. Example
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n)
{
return n + 1;
});

4. Transpiler and Polyfill
• Babel transpiler converts the syntax of modern JavaScript
into a form, which can be easily understood by older
browsers.
• A Polyfill is a piece of code (usually JavaScript on the
Web) used to provide modern functionality on older
browsers that do not natively support it.

5. Why Babel?
• JavaScript is the language that the browser understands.
• We use different browsers to run our applications such as
Chrome, Firefox, etc.
• It is now uncertain when it will be possible for all
browsers to be compatible with all the ES versions that
released.

6. • ECMA Script is the JavaScript language specification.
• 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.
• 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 called Babel that will compile our final
code in ES5.

7. Features of Babel
• Babel-plugins
• Babel-presets
• Babel-polyfills

8. Advantages of Babel
• 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.

9. Advantages of Babel
• 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.

10. Disadvantages of Babel
• 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.

11. Thank You