Let's Talk Code Toolings: Transpilers

A transpiler (short for "translating compiler") is a tool that converts code from one language or version to another while preserving its core functionality. Unlike traditional compilers, which translate high-level code into low-level machine code, transpilers transform code between similar programming languages or different versions of the same language without changing the underlying structure.

Transpilers are widely used beyond web development. In mobile development, React Native’s Metro Bundler transpiles modern JavaScript and JSX into JavaScript that runs efficiently on mobile devices. In game development, Unity’s IL2CPP translates C# into C++ to optimise performance. In systems programming, tools like Cheerp convert C++ into JavaScript or WebAssembly for running native applications in the browser.

However, in this article, we will focus on transpilers in web development, exploring how they enhance JavaScript compatibility, performance, and maintainability.

Why Are Transpilers Important?

Browser Compatibility

Modern JavaScript (ES6+) includes features that older browsers don't support. A transpiler can convert new syntax into older JavaScript so that it works everywhere.

Developer Productivity

Developers can write clean, modern code without worrying about browser limitations because transpilers handle compatibility issues automatically.

Cross-Language Development

Some transpilers allow you to write in one language and output another. For example, TypeScript is transpiled into JavaScript.

Examples of Transpilers

Here are some common transpilers in web development and what they do:

Note:

Although some of these tools are called "compilers", they are technically transpilers because they do not generate low-level machine code. Traditional compilers optimise code and convert it into machine instructions that the CPU can execute directly. Transpilers, on the other hand, rewrite code into a different syntax while preserving its original structure and functionality.

The confusion arises because some transpilers, like the TypeScript compiler, perform additional tasks such as type checking, while others, like the Svelte compiler, apply optimisations. Since these tasks are commonly associated with compilers, the names can sometimes be misleading.

However, the key difference remains: transpilers do not produce native machine code but instead transform code to improve compatibility, maintainability, or performance.

Some Applications of Transpilers

1. Modern JavaScript (ES6+) to ES5

Before Transpiling (ES6+ Code)
Let's say we write JavaScript using arrow functions and template literals:

const sayHello = (name) => {
  console.log(`Hello, ${name}!`);
};

sayHello("World");

Older browsers don’t support arrow functions (=>) and template literals (`Hello, ${name}!` ). To ensure our code runs everywhere, we can use Babel or SWC to transpile it.

After Transpiling (ES5 Code by Babel)
Babel converts the modern JavaScript into older syntax:

"use strict";

var sayHello = function(name) {
  console.log("Hello, " + name + "!");
};

sayHello("World");

What Changed?

• The arrow function (=>) was converted into a traditional function (function).

• The template literal (`Hello, ${name}!` ) was converted into string concatenation ("Hello, " + name + "!").

• const was replaced with var since older JavaScript versions don’t support const

• Babel adds "use strict" at the top. This is a directive in JavaScript that enforces a stricter set of rules, helping to catch common coding mistakes.

After Transpiling (ES5 Code by SWC)

var sayHello = function sayHello(name) {
  console.log("Hello, " + name + "!");
};

sayHello("World");

What Changed?

• Like Babel, the arrow function (=>) was converted into a traditional function (function).

• The template literal (`Hello, ${name}!` ) was converted into string concatenation ("Hello, " + name + "!").

• const was replaced with var

  However, there are key differences:

• SWC does not add "use strict" by default. Unlike Babel, SWC leaves it out unless explicitly configured.

• SWC adds a function name (sayHello) for better debugging.

2. TypeScript to JavaScript

Before Transpiling (TypeScript Code)

TypeScript introduces static types, which are not supported in JavaScript. Here’s an example:

const add = (a: number, b: number): number => a + b;

let result: number = add(5, 10);
console.log(result);

TypeScript Features:

• : number specifies that a, b, and result must be numbers.

After Transpiling (JavaScript Code by tsc)

JavaScript doesn't support TypeScript's type annotations, so tsc (TypeScript Compiler) will remove them. The resulting JavaScript code will also depend on the target you specify in the configuration (tsconfig.json) file, which determines which version of JavaScript to transpile to.

If the target is ES5:

TypeScript will convert any modern features (like arrow functions or let/const) to older JavaScript syntax (like var and regular functions). The result would look like this:

var add = function (a, b) { return a + b; };

var result = add(5, 10);
console.log(result);

What Changed:

• Type annotations (: number) are removed.

• Arrow function is converted to a regular function.

• const and let are converted to var.

If the target is ES6 or newer:

TypeScript will keep the modern JavaScript features intact. The output would look like this:

const add = (a, b) => a + b;

let result = add(5, 10);
console.log(result);

What Changed:

• Type annotations are removed, but modern syntax (like const, let, and arrow functions) is kept.

3. JSX to JavaScript (for React)

JSX (JavaScript XML) allows you write HTML-like syntax directly within your JavaScript code. This approach, often referred to as syntactic sugar, makes it easier to create React elements in a more readable and concise way.

However, while JSX is more intuitive, it isn’t valid JavaScript. Since browsers can't directly understand JSX, it needs to be transpiled into regular JavaScript before it can run. This transformation is usually handled by tools like Babel, which is widely used in React applications to make sure JSX code works in the browser.

Before Transpiling (JSX Code)

In JSX, you can write HTML-like syntax directly in your JavaScript code. For example:

const App = () => {
  return <h1>Hello, World!</h1>;
};

• Here, <h1>Hello, World!</h1> looks like HTML, but it's actually JSX (a syntax extension for JavaScript).

After Transpiling (JavaScript Output by Babel)

• Babel converts JSX into standard JavaScript, which browsers can understand.

• The JSX code is transformed into a call to the React.createElement function.

• This function is used by React to create virtual DOM elements, which are JavaScript representations of UI components.

• These virtual DOM elements are then compared with the actual DOM to determine the most efficient way to update the user interface.

The output after Babel transpiles the JSX will look like this:

const App = () => {
  return React.createElement("h1", null, "Hello, World!");
};

What changed?

• The JSX <h1>Hello, World!</h1> is converted into a React.createElement call.

• React.createElement("h1", null, "Hello, World!") is the JavaScript equivalent that creates a virtual DOM representation of the <h1> element.

4. Svelte Code to JavaScript

Just like Babel in React, the Svelte compiler converts Svelte-specific syntax into JavaScript that browsers can understand.

Before Compilation (Svelte Code)

In Svelte, components are written using a combination of HTML, JavaScript, and CSS all in the same file.

Here's an example of a simple Svelte component. This component displays a greeting and a button. When the user clicks the button, the greeting changes:

<script>
  let name = 'World';
  function changeName() {
    name = 'Readers';
  }
</script>

<main>
  <h1>Hello, {name}!</h1>
  <button on:click={changeName}>Change Name</button>
</main>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

After Compilation (JavaScript Output by Svelte)

• The Svelte compiler takes this .svelte file and converts it into plain JavaScript.

• It removes Svelte-specific syntax like {name} and on:click.

• The compiled JavaScript directly manipulates the DOM and handles state changes, making the page update efficiently.

The compiled output might look like this:

// Function to create the HTML structure for the component
function createFragment() {
  let name = 'World'; 
  let h1 = document.createElement("h1");
  let button = document.createElement("button");

  // Set the initial content of the <h1> and button
  h1.textContent = "Hello, " + name + "!";
  button.textContent = "Change Name";

  // Function to update the name when the button is clicked
  function changeName() {
    name = 'Svelte'; 
    h1.textContent = "Hello, " + name + "!"; 
  }

  // Return the element creation and interactions
  return {
    create: function() {
      // Append <h1> and <button> to the page
      document.body.appendChild(h1);
      document.body.appendChild(button);

      // Add event listener to button to change the name when clicked
      button.addEventListener("click", changeName);
    },

    destroy: function() {
      // Remove the <h1> and <button> elements from the page
      document.body.removeChild(h1);
      document.body.removeChild(button);
    }
  };
}

// Create the component and display it on the page
const app = createFragment();
app.create();

Key Changes After Compilation:

• {name} (used for dynamic data binding in Svelte) is replaced with standard JavaScript to directly manipulate the DOM.

• on:click (the event binding syntax in Svelte) is replaced with a native JavaScript event listener (addEventListener).

In Conclusion,

Transpilers are essential in modern software development, helping developers write cleaner, more efficient code that works across different environments. By converting code to be compatible with older browsers or different versions of a language, transpilers save time and reduce compatibility issues. As technology evolves, understanding how transpilers work will help you choose the best tools for your projects, driving innovation and improving efficiency in web, mobile, or game development.