What is a Transpilation?

Question

I started reading one article on Ecmascript 6 and I came across the term Transpilation, which in Portuguese would be Transpilation. In addition to this, I noticed that other articles use this term.

It is the first time in my programming life that I come across this term.

What does that mean? That one trans has to do with translating code or something?

Answer 1

I thought you already knew :P

In fact transpilation is a translation, in the background transpilation is a specialization of compilation. The whole process is done just like what the compiler does, the difference is only that in the traditional compiler the target is a lower level code, probably some form of assembly or machine code, whereas the transpilator targets a source code of a different high-level language or the same written otherwise.

Is used by Coffeescript, Typescript and Javascript itself to make versions compatible, only to mention the most obvious cases of Javascript. Has a lot of language that generates a C source instead of generating a low-level code.

So you can code on ES6 without fear because even if you want to support older browsers that are still in older version of the Ecmascript specification just transpose ES6 to an older version and be able to run everywhere. This is very easy since the novelties of JS are almost all syntax sugar. Other examples are Flow and Babel.

It can be advantageous to provide this language on several platforms and obtain optimizations that this language does. It may also have some disadvantages such as more difficulty for debugging needing to do a mapping, there may be memory model impedance between the source language and the one used as a target, among others.

A example of TS making transpilation.

Answer 2

Transpilar is a mix of compile and translate. In other words it is a tool to generate a new version of a given code.

In the last years in Javascript the language has advanced a lot. As browsers move more slowly and cannot keep up with the pace, solutions began to emerge for developers to use the new technologies in the code they write, and then when it’s time to use that code, it’s transposed into a Javascript version that browsers accept. Babel is the best example of this, and a practical example would be:

var optionsA = {um: 1};
var optionsB = {...optionsA, dois: 2};
console.log(optionsB);

using future technologies, already approved or in the process of approval and transpilated:

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var optionsA = { um: 1 };
var optionsB = _extends({}, optionsA, { dois: 2 });
console.log(optionsB);

Thus compatible with Ecmascript 5.

If we add to this the concept of AST, that allows us to analyze the code and its components, so we can transpose not only for different versions of Javascript but for other languages, raw or not.

Answer 3

It would be a conversion from one language to another.

When, for example, you program in Typescript, you need a transpiler to convert it to Javascript.

When you use React and write to Jsx, you need a transpiler to convert the code into Vanilla Javascript, or with Coffeescript, for example. Or when you use LESS or SASS, for example, a transpiler turns it into CSS.

There are even transpilers that allow you to write the Javascript language with features not yet compatible with all browsers (features still under test, "future" features such as classes, inheritance, spread Operator, Rest Parameters, async away, etc.) and convert your code to a more legacy version, making it available to all current browsers.