Babel Compiler - Transforming JavaScript for All Browsers.pptx

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 P olyfill 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? J avaScript 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. I f 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