Transpiled Languages: What Are They, and How Do They Work?

What is a transpiled language?

Transpiling, short for source-to-source compiling, is the process of converting source code written in one programming language into equivalent code in another programming language The source code is processed by a compiler that produces the equivalent source code in another programming language. This process differs from compilation, which translates source code into machine code that can be executed by a computer.

Key features of transpiled languages

1. Source-to-Source transformation: The transpiler takes code written in a source language and outputs equivalent code in a target language.
2. Maintains high-level language features: Both the source and target languages often retain high-level abstractions like loops, functions, and object-oriented constructs.
3. Produces readable output: The output code is typically human-readable and can often be edited and debugged.

Common examples of transpiled languages

TypeScript

TypeScript is a transpiled language that adds static typing and other features to JavaScript, but it transpiles into standard JavaScript for execution in web browsers or Node.js. So, the browser needs to interpret the generated JS code, while knowing nothing about TypeScript.

Sass or Less to CSS

Stylesheets written in Sass or Less are transpiled into plain CSS for browser compatibility.

What about Flutter (…or Dart)?

Flutter is not a transpiled language. To be precise, we cannot talk about Flutter as a language, because Flutter is a framework. So we need to talk about its underlying language, Dart. Dart is an interesting scenario, because it can be compiled or transpiled, depending on the use case.

Flutter for mobile app development

When you need to build a mobile App (iOS or Android) with Flutter, Dart is compiled into native code for the target platform. The Dart code undergoes two key compilation processes:

1. Ahead-of-Time (AOT) Compilation:

   • For production builds, Dart code is compiled ahead of time into native machine code for the target platform (iOS or Android). This results in highly optimized, fast executables.
   • This compilation method ensures high performance, as the app runs directly as native machine code without relying on interpreters or virtual machines.

2. Just-in-Time (JIT) Compilation:

   • For development and debugging, Flutter uses just-in-time compilation, which allows features like hot reload. This enables developers to make changes and see updates instantly without restarting the app.
   • In this case, the Dart VM interprets or compiles code incrementally during runtime, which prioritizes development speed over performance.

As you can see, No, Dart is not transpiled because:

• The Dart code is not converted to another high-level language. Instead, it is directly compiled into native machine code or runs on a Dart VM in development.
• The output of Flutter development is native machine code, which is what makes Flutter apps performant and “native-like” on both iOS and Android.

Flutter avoids using technologies like JavaScript bridges (common in other frameworks like React Native) by compiling directly to native code, which improves performance. Flutter’s UI components are also rendered using its own Skia graphics engine, bypassing platform-native UI components. This approach, combined with direct compilation, gives Flutter its smooth, high-performance characteristics.

Flutter for web development

When targeting the web in Flutter, the Dart code is transpiled into JavaScript. Here’s a breakdown:

1. Dart to JavaScript transpiling:

   • When you build a Flutter app for the web, the Dart code is transpiled into JavaScript.
   • This transpilation is done by Dart’s own toolchain, which includes a compiler (dart2js).
   • The JavaScript file generated is optimized for web browsers since browsers do not natively execute Dart code.

2. Why do we need transpilation for web target?:

   • Dart is a high-level programming language, and browsers understand only JavaScript as the universal high-level language for web development.
   • Dart’s compiler converts Dart code into JavaScript while preserving the application’s logic and structure.

3. Flutter UI on Web:

   • Flutter uses the Skia graphics engine for rendering UI on other platforms, but for the web, it uses HTML, CSS, and the Canvas API to draw widgets.

4. Build Outputs: The output includes a JavaScript file (transpiled Dart code) and supporting files like HTML and CSS for the web application.

And what about React Native (…or Typescript)?

Again, let me explain that React Native is not a programming language, it’s a framework. You can write a React Native application using TypeScript or JavaScript.

When you write TypeScript code, this code is transpiled into JavaScript. The code runs within a JavaScript runtime environment, and this runtime communicates with native components via a bridge mechanism.

Platform-specific functionality (e.g., camera access, location services) is implemented in Kotlin/Java (Android) and Swift/Objective-C (iOS). These modules expose APIs that JavaScript can call via the bridge. The bridge acts as a communication layer between the JavaScript runtime and native code. It sends serialized messages (JSON-like) between JavaScript and the native platform.

Conclusion

Transpilation bridges the gap between different programming languages, enabling compatibility and extending the reach of developers’ codebases. While frameworks like Flutter and React Native operate differently, understanding the role of their underlying languages—such as Dart and TypeScript—helps demystify their compilation and transpilation processes. By leveraging the power of transpiled languages, developers can create adaptable, cross-platform applications more efficiently.