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.
\nThe 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.
\nBased 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.
\nShall we as developers be excited? Definitely, cause we love bleeding-edge features, however we should also consider the browsers' compatibility list.
\nIt 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?
\nAs 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.
\nIn 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.
\nOpen your editor and create babel-standalone.html file, pasting in the following snippet
\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Babel Standalone Example</title>\n</head>\n<body>\n<h1>Babel Standalone Example</h1>\n\n<script src=\"https://unpkg.com/babel-standalone@latest/babel.min.js\"></script>\n<script type=\"text/babel\"> \n const getCompanyStreet = (street) => `Your company's street is ${street}`;\n console.log(getCompanyStreet('Fideliolaan'));\n\n let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };\n console.log(z);\n</script>\n</body>\n</html>Several important things to note here
\ntext/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\">Babel.transform('const getMessage = () => \"Hello World\"', { presets: ['es2015', 'es2016', 'stage-2'] }).codeHead over to Babel REPL and tinker with your modern JavaScript straight away.
\nEverything 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.
\nHead over to JSFiddle, an online JavaScript browser editor, and play around with your modern JavaScript syntax.
\nEvery time you create new fiddle, make sure you have chosen Babel + JSX as Language and added Firebug Lite as an External Resource.
\nHead over to Codepen and enjoy another online JavaScript browser editor.
\nEvery 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.
\nHead over to JSBin, yet another online JavaScript browser editor and find your way around it.
\nSadly 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.
\nIf you are interested what are those Stages about, please read the ECMA T39 Process document.
\nThe 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.
\nBrowsers 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.
\nIf you are an adventurous soul, definitely take a look at another transpiler, such as Buble.
\nWith 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.
\nAdditionally, 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.
\nLastly, expect another few blog posts about pre-compiling your scripts for production with Babel presets and Webpack.
"}},"pageContext":{"postId":"7d9789b2-dc6e-5015-9957-f7f495352d9a","slug":"how-to-start-using-modern-javascript-syntax-within-minutes"}}}