What Is Babel and Why Use It?

In this tutorial, you will learn about a useful Javascript tool that will help you build a website that works in all browsers.  As any frontend developer will know writing code that works in all browsers is tough.  Back in the days, a good portion of a front-end developers life would be figuring out hacks to get some design to work in IE5 or 6.  Luckily now, life is easier and you are about to find out why.

What's The Issue?

The rate at which Javascript changes is accelerating.  There is a constant new stream of frameworks and features.  Couple this ever-evolving language with the fast pace of new phones, laptops, and tablets being released.   Each with their own ways of allowing users to connect to your website.  Trying to manage this yourself is close to impossible.  

This is why when you write production Javascript you need to rely on tools.  ES6 came out quite a while ago now and the 'class' keyword is hopefully familiar to you.  If you head over to the Mozilla docs about javascript classes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you will see that the latest version of IE doesn't support them:

Writing Javascript using the 'class' syntax is just sugar-syntax, but, using it will make your code easier to read and maintain.  Instead of never been able to use the latest features, if you output your code through babel, it will take your code and then convert it into Javascript that all browsers will be able to understand.  

To test this out yourself, head over to (https://babeljs.io/repl) and try creating a class with the try it out page:

The code on the right is the JAvascript babel will automagically create for you.  TO write browser compatible Javascript all you need to do is install Babel via NPM, compile the code you write through it and then link to the outputted file in your HTML. 

To install babel in your project, type in this command:

npm i -g babel-cli

Babel on its own doesn't do much. To get it to do something meaningful for you, you will need to install some additional presets. To convert ES6 into normal JS, you would use, like this.

npm i babel-preset-env

Let's say you have the following script in a file called, example.js'

class Steve
{
}

If you run this command in the terminal:

babel example.js output.js

If you look on your file system, you should see that a new file called output.js has been created. If you look at this you will see your converted code.

If you were writing production code you wouldn't want to have to manually type in these commands, you would want to use babel with a tool like web-pack, so everything is automatically done for you.  As you can see babel is a very useful tool to ensure that your code works on all browsers.  It's easy to install and get it working, so I would recommend that you give it a try today, enjoy!

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top