What is Transpiling?

An honest approach to a controversial idea.

Introduction

To start, I want to preface by saying this isn’t an end-all guide on transpiling. In fact, as I go deeper down the rabbit hole of transpiling, threads like this and this have me questioning the very word. What is the difference between transpile and compile? When I’m met with articles spouting the clear distinction and forums negating the distinction, I’m left with a healthy dose of skepticism on the term itself.

As a programming student I’m looking to explore what transpiling is (especially now that I’m picking up libraries and frameworks like React and Vue.js ). Be warned, while I hope my first transpiling review can reduce your 50 tabs on the topic down to 10, you’re probably going to walk away with the same questions I’m still asking myself. For the purpose of narrowing my scope, I’ll be focusing on transpiling within the context of Javascript.

What is Transpiling?

The most promising understanding of transpiler was from this discussion on stack overflow where the highest rated answer (with a humble 300 votes) defined transpiling as:

“A subset of compilers which take in a source code file and convert it to another source code file in some other language or a different version of the same language. The output is generally understandable by a human. This output still has to go through a compiler or interpreter to be able to run on the machine.”

While I find this definition to be a starting point, I would be cautious about committing to this. It’s safe to say it’s a subset of compiler (at the very least colloquially), although the lines when it comes to its functional difference get quite blurry.

In contrast, I enjoyed this definition provided from a user on reddit who defined transpiler as “a fancy term for a compiler that emits code in a high-level language. It still performs all the formal lexing and parsing, AST construction, and semantic analysis you would find in a traditional compiler. The biggest difference is the ability to rely on the target language for things like optimizations and low-level state management. The overall architecture remains fundamentally the same as any other compiler. You want to aim for a design where the backend could be swapped between different output languages without requiring changes to the frontend.”

While this has me slightly in the weeds, it works to create an effective distinction which appears to happen at a deeper level.

Does Transpiling Differ from Compiling?

While I thought this was going to be a straightforward answer, it’s really not. For example, various articles and sites including wikipedia define Babel, a tool that converts ECMAScript 2015+ code into a version of JavaScript that’s compatible with current and older browsers/environments, as a transpiler. However Babel doesn’t prescribe itself that terminology, instead referencing itself as a compiler.

What I think is safe to assume that transpilers are compilers, the difference really comes down to output. While compiling can output to a language that’s a similar level of abstraction, the term is more often used when you provide input in a higher level language and produce a lower level language as output. By contrast, those who use transpile, think of it as a specific compiling term where the output is still human-readable (compared to machine code / binary).

Until I find a satisfying definition or I’m told otherwise, I’ll be using both terms to cover myself.

Why use transpiling/compiling?

The new advancements in JavaScript help us build better and faster, giving users new experiences online, but ensuring these advancements work everywhere is where it gets tricky. We need our code to work in different environments, and especially those environments that aren’t up to speed with the latest in JavaScript.

This is where compilers and transpilers come in. They basically translate the new, advanced JavaScript we write into a version that’s digestible for outdated browsers. They turn our modern code into something compatible, making sure we don’t leave anyone behind because their browser is outdated.

Simple Example of Transpiling

Let’s say we have a piece of modern JavaScript code (ES6) like this:

const greet = () => {
    console.log('Hello, World!');

Now, not every browser understands this arrow function syntax, especially the older ones. If we want to make sure our code runs on those browsers as well, we need to transpile our modern JavaScript code to an older version (ES5) that is more universally understood by browsers. When transpiled, our code might look something like this:

var greet = function() {
    console.log('Hello, World!');
}

How do I start transpiling / compiling?

Where do you begin? Well, one of the common tools out there is Babel. To get it going, you’re going to need a package manager. You’ve probably heard of Node (NPM). It’s the big one, with over a million packages available. But it’s not the only one. There’s also Yarn and pnpm, which try to address some of the hassles with NPM, like installation speed and how much disk space it eats up.

Get Edgington M W’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Whichever package you decide you’re comfortable using, the best place is to then visit the Babel Docs to install its packages. The quickstart guide included here takes you through installation to creating a babel.config.json file which enables you to convert your JavaScript for ES2015+, ensuring that the new syntax you’re using is understood by older browsers.

How does React utilize Babel?

React leverages JSX, a unique syntax extension allowing HTML and JavaScript to coexist harmoniously in the same file, creating a more readable and concise component structure. However, browsers can’t interpret JSX directly; this is where Babel steps in, transpiling JSX into plain JavaScript, that is universally understood by browsers.

Imagine, you’re developing a React component using the latest JSX syntax, expressing your UI’s structure and functionality succinctly. Your React code might look like this:

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

Babel transpiles the JSX in this component into vanilla JavaScript, ensuring broad compatibility and readability:

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

Utilizing Babel with React is largely a straightforward endeavor, it can be installed using familiar package managers like npm or Yarn, establishing a seamless integration into any React project. Post-installation, developers create a .babelrc file in their project’s root directory, specifying the necessary configuration for Babel to transpile the React code efficiently. This configuration outlines the presets and plugins required by Babel to perform the transformation, adapting the code to maintainable and efficient structures, while ensuring comprehensive browser compatibility.

For instance, within a React project, the .babelrc file might include the @babel/preset-react preset to instruct Babel on transpiling JSX syntax correctly:

{
  "presets": ["@babel/preset-react"]
}

What is Webpack and how does it relate to Transpiling?

Webpack is a tool used in modern JavaScript applications. It’s known as a static module bundler. When you run your application through Webpack, it looks at one or more entry points in your app, creates a dependency graph, and bundles together every module your project needs into one or more files that are ready to be loaded by a browser.

• Static Module Bundler: Webpack takes your code files, bundles them together, and creates a single file that’s ready for production. It does this by looking at all the connections (or dependencies) between your files, ensuring everything is included.
• What is a Bundler: A bundler is a tool that combines multiple JavaScript code files into a single file that can be loaded by a browser. It tracks both your source files’ dependencies and any third-party dependencies to make sure everything is current and correct.
• Entry Point: This is where the execution of a program begins, and where the program can access command-line arguments. In Webpack, it’s the starting point for building the dependency graph.
• Dependency Graph: This is a way to describe how different parts of your code relate to each other. Webpack uses this graph to decide what to include in the bundle it creates.

Using Webpack, you can turn a dynamic application with many parts into a set of static files that you can easily deploy to a server. You can also extend what Webpack can do with Plugins and Loaders, allowing it to handle different types of files, like CSS, SVG, and JSON, and include them in your bundle.

Webpack is particularly useful with React apps. It starts from the root of your app, like the index.js file, follows all the imported modules, and bundles all these files into a single file. It handles not only JavaScript but also other file types using ‘loaders’. These ‘loaders’ let you import different file types directly in your JavaScript module. Once you run a Webpack build, you get an HTML file linked to your JavaScript bundle, ready to be deployed on a web server.

For transpiling needs, Webpack uses the babel-loader to handle your JSX and JS files, converting them to a version of JavaScript that can run in any browser.

A simplified webpack.config.js file that uses babel-loader might look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Through a junior developer’s lens, transpiling emerges as a term often used when converting code to a similar level of abstraction, keeping it human-readable post-conversion. Tools like Babel and Webpack are quintessential in the transpiling process, aiding developers in ensuring broad browser compatibility and optimum utilization of modern JavaScript advancements. Babel stands out as a multifunctional tool, capable of transpiling high-level JSX syntax to universally comprehensible JavaScript. Webpack complements this by bundling the transpiled modules efficiently, ready for deployment.

Despite the seemingly blurred lines between transpiling and compiling, adopting both terms can be seen as a safe approach until a clearer distinction is established.