JavaScript Transpilers

Feb 21, 2020 • ☕️ 2 min read

Transpilers (also called transcompilers) in JavaScript are source-to-source compilers that transform source code in non-JavaScript languages (CoffeeScript, TypeScript, LiveScript, etc.) or in modern JavaScript versions (ES2015, ES2017, ESNext, etc.) to equivalent JavaScript source code that meets some conditions (browser compatible, minified, strict, etc.)

Most transpilers use Abstract Syntax Tree (AST) as intermediate format while processing source file, transforming syntax, performing optimizations.

Code --(parse)-->AST--(transform)-->AST--(generate)-->Code

The Abstract Syntax Tree (AST) allows for this to take place because it breaks down code and organizes it with all of its metadata in a hierarchical tree.

You might see people use compiler and transpiler interchangeably in JavaScript world. But keep in mind a source-to-source compiler translates between programming languages that operate at approximately the same level of abstraction; while a traditional compiler translates from a higher-level programming language to a lower-level programming language like C to assembler or Java to bytecode.

Babel is the most dominant JavaScript transpiler, a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments. Babel can transform syntax, polyfill features that are missing in your target environment, transform source code, and many more.

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript ,adds optional static typing to the language, and ultimately transpiled to JavaScript.

As well as extending JavaScript, TypeScript also transpiles your code to match multiple ECMAScript standards, which gives you a way to support multiple browsers with less effort, and to try out proposed ECMAScript standards early on.

JavaScript is the only programming language beside HTML and CSS has the privilege to run on browsers, that’s why there are so many languages used JavaScript as transpile target.

Transpilers allow developers to write future facing code, even though the current version of the language isn’t supported in all environments. (Henry Zhu)

Check out the list of languages that compile to JavaScript and many other transpilers for more information.

Reading More

The hype microservices. Should I switch to it?

Microservices is an architectural and organizational approach to software development where software is composed of small independent services

Extending standard CSS by preprocessors

CSS preprocessors empower CSS with variables, nesting, inheritance, mixins, functions, and mathematical operations

Lerna - the best tool to manage JavaScript monorepo

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm

Polynomial Rolling Hash

A hash function used in Rabin–Karp's string search algorithm