Brendan Eich created JavaScript in 10 days for Netscape and changed the landscape of web development. While I’m not claiming that JavaScript is THE most popular programming language out there, it’s influence and power certainly cannot be denied. I got to the party a little late and only recently started working with JavaScript. But then I came across numerous other xyz-Scripts, and was left curious by terminologies like ‘syntactic sugar’ and ‘convention-over-configuration’. Trying to make sense out of all this led to transpilers and this post is a result of that.

The simplest answer is that it is a source-to-source compiler. Okay, maybe that’s still not very simple. A source-to-source compiler (or transcompiler, or transpiler, call it what you want!) , in simple terms, takes code written in one programming language and converts that into code for a target language. And of course, the target language, in this case, is JavaScript.

Well, because everyone does not access the web in the same way. Netscape first had SpiderMonkey as its JavaScript engine but since then numerous competing browsers and JavaScript engines have come into the market. Apple’s Safari uses the Nitro engine, Google’s Chrome redefined speed with the V8 engine aided by Crankshaft, and Mozilla’s JavaScript engine is no longer SpiderMonkey in it’s original form, having come through iterations of IonMonkey and OdinMonkey. Bottom line is that users could access a site via many possible platforms and even within them, they could be using older versions of these browsers — all of which do not provide the same level of compatibility.

As a developer, people may prefer using transpilers for ease of use with a specific paradigm or language. CoffeeScript provides a familiar feel for those acquainted with Ruby or Python, Google Web Toolkit compiles Java code to JavaScript, and TypeScript may be preferred simply because of its object oriented programming features.

So, if all of that got you up to speed on why transpilers are here, following up is a list of popular transpilers for JavaScript that could work for you.

TypeScript is maintained and developed by Microsoft and extends the functionality of JavaScript to include class based object oriented programming. TypeScript is referred to as a ‘strict super set of JavaScript’. Because of its super set characteristic, the TypeScript compiler can even compile a pure JavaScript program. Other features that have been added to TypeScript include Type annotations, Type interface, Interfaces, Enumerated types, Tuples, Generic etc. Being supported by Microsoft also has benefits as there is first party Visual Studio support matching that for C# such as syntax sensitive statement completion.

This is an informative post by Raphael Fang at App Dynamics, that talks about the benefits of TypeScript, and what could be better, after their experience of migrating the Browser Real-User Monitoring agent from JavaScript to TypeScript.

Ever since Jeremy Ashkenas gave the first whiff of CoffeeScript in 2009, the language he calls ‘unfancy JavaScript’, has been one of the most popular transcompilers for JavaScript. Inspired by the syntactical flow of Ruby, Python and Haskell, the focus is on readability and brevity. For the latter reason, even Dropbox re-wrote their entire browser code from JavaScript to CoffeeScript. In their blog post about the same, the developers who accomplished this, posted that over 23,000 lines of JavaScript code was cut down to about 18,000 lines of CoffeeScript code. That is a 21% reduction!

This is a simple example highlighting the difference between CoffeeScript code and JavaScript code. A small, but essential difference is that the ‘var’ keyword does not have to precede each variable in CoffeeScript. For functions, instead of using braces, as is the case with JavaScript, an arrow ‘ -> ‘ is used, and no ‘return’ statement is used because CoffeeScript returns the last line of code by default. Andrew Chalkley did a more in-depth post on how CoffeeScript adds syntactic sugar to JavaScript and is different.

Additionally, CoffeeScript also supports pattern matching and list comprehension.

Dart is an application programming language that among other implementations, can also be compiled as JavaScript. It was developed by Google with the principles of providing a solid foundation through libraries, simplifying common problems such as string interpolation and early error detection, minimizing surprises for the programmer (things work the way a programmer would expect them to in C, C++ or Java), and being a stable, pragmatic solution to users. Dart is already used to power Google web applications such as AdWords, Fiber, and even the internal CRM for Google. A highlight of Dart is that it provides support for asynchronous programming. This post by Christian Grobmeier highlights other points where Dart can be improvement on JavaScript.

However, there are a few downsides to Dart. One of them is interoperability issues between JavaScript and Dart. Another is the lack of static typing.

Emscripten works as the back-end to a low level virtual machine (LLVM) — which is an umbrella project for modular and reusable compiler technologies. Without getting into the details of LLVM, what’s interesting about Emscripten is that it serves as nifty transpiler for C and C++ languages, allowing programs written on these to be inserted into client side projects. Emscripten compiles programs into asm.js format. asm.js is a strict subset of JavaScript. Performance improvements stem from the fact that web browsers can compile asm.js code ahead of time and the code delivers near native levels of performance. Emscripten uses Clang to compile C or C++ code to LLVM bitcode, and then uses Fastcomp to compile this bitcode to JavaScript.

Real world applications of Emscripten include its use to port the Unreal game engine and also the Bullet physics engine.

Code to calculate string length in C:

Corresponding code translated to asm.js:

A few issues with using Emscripten exist mainly because of the downsides to using C and C++. One of these is the lack of unit testing, which makes it difficult to employ it in large projects.

The Google Web Toolkit (GWT) is not the most popular transpiler for JavaScript, but for those who love Java, and do not want to migrate, it is the best resource for building front-end applications. This is an open source set of tools that compiles all Java code to JavaScript, allowing the same language to be used on both server and client side. It provides a set of Java APIs and widgets that can be used to develop AJAX applications that can run across multiple platforms.

For developers who prefer the strongly typed features of Java, with IDE support in areas such as error correction, auto-completion etc., this is ideal. The benefits extend to debugging as well. Client side applications can be debugged just as any other Java application. The three main parts of Google Web Toolkit include the Java to JavaScript compiler, the Java Runtime Environment Emulation library — which consists of standard Java packages such as java.lang, java.math, java.io — and the UI building library, which includes RPC support, history management etc.

If integrating the GWT into the NetBeans IDE, there is extensive documentation to accomplish this. There are similar docs for using GWT with Eclipse, IntelliJ and most Java IDEs.

These were some of the more commonly used transpilers that a beginner could try and work with. Of course, before trying out any transcompiler or transpiler, it is recommended that a basic level of familiarity with JavaScript has been achieved. However, the list of possible transpilers in humongous! To see an exhaustive list of languages that compile to JavaScript, see this page on Jeremy Ashkenas’s GitHub.

A few honorable mentions for those that might be worth more attention.

Clojure is a dialect of Lisp that compiles to JavaScript, in which form it is also called ClojureScript. Clojure focuses on functional programming and borrows Lisp concepts such as code as data. Another plus point is an active community. Check out this post by Jared Forsyth for more insight into the pros and cons of ClojureScript.

Haxe is a multi-paradigm programming language that can be implemented across a number of platforms. Apart from JavaScript, target languages include Java, C++, Python, and PHP. It is powerful, yet uses few keywords. Some key benefits include catching errors at compile time and the ability to use existing JavaScript libraries. Haxe shares some similarities with TypeScript such as the syntax and static-typing. Haxe is open source and is used mainly by companies looking at cross-platform implementation from a single source. It has use cases across gaming, web development, and mobile. It’s popular users include Coca Cola, Disney, and BBC.

Elm has interoperability across HTML, CSS, and JavaScript. Elm claims ‘no run-time exceptions’, mainly because of static type checking by the compiler. The target for Elm is robust, good performing web applications. The basic architecture for an Elm program comes down to Model — state of the application, Update — way to update the state, and View — way to view the state as HTML. Elm also has some syntactic differences to JavaScript.

Looking Beyond JavaScript: A Beginner’s Guide to JavaScript Transpilers was originally published in zipBoard, Online visual bug tracker for web and e-learning developers on Medium, where people are continuing the conversation by highlighting and responding to this story.