What are transpilers and how code transpilation works?

In this are article we are going to look at a basic transpilers and how they transpile a source-code in to another source-code.

A transpiler is a computer program which translate entire high-level source code in to different source-code before start the execution.The most ubiquitous myth among the developers about the transpiler is, only nerdiest of the nerds can understand and write a transpiler .Actually that’s not true.

Transpiler are large programs with parsing , error handling and debugging mechanism which written in may be millions of code lines. But the core logic of a transpiler is pretty simple.

Mainly transpilation task can be break in to 3 major steps

1. Parsing
2. Transformation
3. Code generation

1. Parsing

Parsing is taking raw code and turning it into a more abstract representation of the code.Parsing typically gets broken down into two phases:

parsing mechanism

a) Lexical Analysis : Break raw code in to smaller units called tokens using a tokenizer.

Basic idea behind tokenization

b) Syntactic Analysis: takes the tokens and reformats them into a representation that describes each part of the syntax and their relation to one another. This is known as an intermediate representation or Abstract Syntax Tree.

Abstract syntax tree (AST)

2. Transformation

In this step it takes the previously generated AST and make changes to it.It can manipulate the AST in the same language or it can translate it into an entirely new language.

Assume that a node is an object which consist of attributes like below:

{ 
    type: 'Number', 
    value: '2'
}

In transformation process AST can be manipulated by adding or removing attributes to the nodes and adding or deleting entire nodes.

{ 
    type: 'Number', 
    value: '2',
    length: 12
}

3. Code Generation

The final step of the of the transpilation is code generation. Sometimes compilers will do things that overlap with transformation, but for the most part code generation just means take our AST and stringify code back out.

In code generation while some transpilers use tokens from the previous step, some transpilers will use entirely new representation to print nodes linearly.

Popular JavaScript transpiler : Babel

Babel is javaScript to JavaScript transpiler where it takes higher version of JavaScript code and transpiles it in to lower versions of JavaScript.

transpiling ES6 code in to ES5

If any queries :

ping me on Linked in : linkedin.com/in/lakshan-bandara-9917a588