In order to get out of this availability and compatibility problem, there are a couple of transpilers that you can use. Transpilers take your original ES10 code, which might use the most modern JavaScript features, and transforms it into equivalent JS5 code. It's a source-to-source transformation, instead of a source-to-object code that would be used in compilation. You can code using advanced ES10 features, but the user's browsers will receive JS5 code. A transpiler will also let you keep up with upcoming versions of the language, despite the time needed by browsers to adopt new standards across desktop and mobile devices.
If you wonder where the word transpiler came from, it is a portmanteau of translate and compiler. There are many such combinations in technological speak: email (electronic and mail), emoticon (emotion and icon), malware (malicious and software), or alphanumeric (alphabetic and numeric), and many more.
The most common transpilers for JavaScript are Babel (at https://babeljs.io/) and Traceur (at https://github.com/google/traceur-compiler). With tools such as npm or webpack, it's fairly easy to configure things so that your code will get automatically transpiled and provided to end-users. You can also carry out transpilation online; see Figure 1.2 for an example of this using Babel's online environment:
Figure 1.2 - The Babel transpiler converts ES10 code into compatible JS5 code
If you prefer Traceur, you can use its tool at https://google.github.io/traceur-compiler/demo/repl.html# instead, but you'll have to open a developer console to see the results of your running code (see Figure 1.3 for an example of transpiled code). Select the EXPERIMENTAL option to fully enable ES10 support:
Figure 1.3 - The Traceur transpiler is an equally valid alternative for ES10-to-JS5 translation
Using transpilers is also a great way to learn new language features. Just type in some code on the left and see the equivalent code on the right. Alternatively, you can use the command-line interface (CLI) tools to transpile a source file and then inspect the produced output.
There's a final possibility that you may want to consider: instead of JavaScript, opt for Microsoft's TypeScript (at http://www.typescriptlang.org/), a superset of the language that is itself compiled to JS5. The main advantage of TypeScript is the ability to add (optional) static type checks to JavaScript, which helps detect certain programming errors at compile time. But beware: as with Babel or Traceur, not all of ES10 will be available.
You can also perform type checks without using TypeScript by using Facebook's Flow (see
https://flow.org/).
If you opt to go with TypeScript, you can also test it online at their playground (see http://www.typescriptlang.org/play/). You can set options to be more or less strict with data type checks, and you can also run your code on the spot (see Figure 1.4 for more details):
Figure 1.4 - TypeScript adds type-checking features for safer programming
By using TypeScript, you will be able to avoid common type-related mistakes. A positive trend is that most tools (frameworks, libraries, and so on) are slowly going in this direction, so work will be easier.
