Introduction
Everyone, including browsers, got used to the JavaScript syntax from 90-ties. But time passes by and JavaScript becomes more and more popular, so ECMA, the committee behind the changes in JavaScript, woke up and started to release new features.
The most recent major update to the specification was approved on 17th of June 2015 and is called by many names: ECMAScript 6, ES6, ES2015, and ES6Harmony.
Based on current plans, new specs will be released on a yearly cycle. Please monitor ECMA's news page, especially changes related to the ECMA-262 document, if you are really interested.
Shall we as developers be excited? Definitely, cause we love bleeding-edge features, however we should also consider the browsers' compatibility list.
It turns out that main players as Google Chrome, Mozilla Firefox, Apple Safari, and Windows Edge adopt new JavaScript syntax slowly, each one in different pace and priority, so it's literally impossible to write modern Javascript syntax as it is. So what is the way then?
As you know JavaScript is an interpreted language: the browser interprets the code as text, so there is no need to compile JavaScript. Since we want to use the latest features, we need a way to convert fancy source code into something that poor browsers can interpret. This process is called transpiling, and it is what Babel is designed to do.
In this tutorial I will show you a few easy ways of tinkering with modern JavaScript syntax, without the need of installing anything nor going into complexity of Nodejs, NPM and Module bundlers.
Assumptions
- you have your favorite browser and you know your way around Browser Developer Tools (like Firebug, Chrome Developer Tools)
- you have your favorite IDE or simple text editor
Solution I - Babel Standalone
Open your editor and create babel-standalone.html file, pasting in the following snippet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Babel Standalone Example</title>
</head>
<body>
<h1>Babel Standalone Example</h1>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
<script type="text/babel">
const getCompanyStreet = (street) => `Your company's street is ${street}`;
console.log(getCompanyStreet('Fideliolaan'));
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(z);
</script>
</body>
</html>Several important things to note here
- We have used unpkg, the global CDN, to get the latest version of babel-standalone package. If you require other version, you may explore possible options here https://unpkg.com/babel-standalone/
- You don't need to use unpkg, feel free to choose other CDNs such as https://cdnjs.com/libraries/babel-standalone
- You don't even need to use the global CDN, instead you can grab babel.min.js file from Babel Standalone releases, saving it locally inside your project
- As you see, modern JavaScript we wrote was placed inside script tag of type
text/babel. You may also use an external JavaScript file with src attribute or even define data-presets or data-plugins as<script src="test.js" type="text/babel" data-presets="es2015,stage-2"> - Once you have included babel.min.js into your page, you automatically got global Babel object which you can use in Developers Console as
Babel.transform('const getMessage = () => "Hello World"', { presets: ['es2015', 'es2016', 'stage-2'] }).code - When you open your Developers Console, you will probably see this message: You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ - don't worry about it for now.
Solution II - Babel REPL
Head over to Babel REPL and tinker with your modern JavaScript straight away.
Everything you write on the left pane becomes dynamically transpiled in the right pane. You may choose from multiple presets and plugins. As you may have also noticed, there is no option to choose the version of Babel, since always the most stable release is used.
Solution III - JSFiddle
Head over to JSFiddle, an online JavaScript browser editor, and play around with your modern JavaScript syntax.
Every time you create new fiddle, make sure you have chosen Babel + JSX as Language and added Firebug Lite as an External Resource.
Solution IV - Codepen
Head over to Codepen and enjoy another online JavaScript browser editor.
Every time you create new pen, configure Babel as the JavaScript preprocessor. In order to do it, click on Settings button, choose JavaScript tab and pick up Babel from the drop-down list.
Solution V - JSBin
Head over to JSBin, yet another online JavaScript browser editor and find your way around it.
Sadly there is only option to tinker with ES6 syntax. You cannot play with the bleeding-edge proposals like Object Rest/Spread Properties which is at the Stage 3 at the time of writing.
If you are interested what are those Stages about, please read the ECMA T39 Process document.
Summary
The latest JavaScript features become more and more interesting. Also the ECMA's plans of adding them every year seems more mature and promising than ever before.
Browsers will always lag behind the newest JavaScript syntax, so better get used to it and don't worry much. Thanks to tools like Babel, you can fully enjoy the modern JavaScript and leave the compatibility issues to the Babel engineers.
If you are an adventurous soul, definitely take a look at another transpiler, such as Buble.
With all the solutions provided in this tutorial, it should be a breeze to start tinkering with the latest JavaScript syntax. If you are not experienced in ES6, head over to ES6 Features and get some inspiration.
Additionally, I will prepare a series of tutorials about modern JavaScript syntax, so stay tuned - it will be full of examples available in Github, JSFiddle, Codepen, and JSBin.
Lastly, expect another few blog posts about pre-compiling your scripts for production with Babel presets and Webpack.