Transpilers vs Compilers⚙
Tags: javascript, webdev, typescript, beginners
Published: 2022-01-12 04:50:31

When it comes to **transpilers** vs **compilers**, there is a world of difference between the two. As a software engineer, it is almost absolutely essential to have a firm idea about what transpilers and compilers are and this blog would help achieve the same.👨‍💻✨

## Prerequisites
- Will to learn 🚀

First, let's define a few terms before getting to know about transpilers and compilers.

## Abstraction
The term **Abstraction** will come up often in this blog, so let's define it before moving forward.

> Abstraction - It refers to presenting the user with only the necessary details instead of all the implementational details.

**Example📝** - We all have used a remote to operate our television sets 📺. Do we know or ever intend to know how the remote works internally while changing channels? 🙄
No right! This is an example of abstraction in real life. The remote provides us its interface beyond which we don't really need to know anything for successful operation.

## Machine Code
What is machine code? 🤖
> In computer programming, machine code is any low-level programming language, consisting of machine language instructions, which are used to control a computer's central processing unit (CPU) - Wikipedia

Programming languages of the likes of **Java**, **Python**, **JavaScript** are considered **high-level programming languages** as they provide a great level of abstraction to the developer. They allow the developer to worry less about intricate details and focus entirely on software development.🌈

On the other hand, machine code has very little abstraction and is not built to be best suited for development purposes.💀

Take a look at the following image for better understanding. 


![accessibility for programming languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7x6dhiatfdwg51hvguw.jpg)

Next, let's move to the main part of the blog.

## What is a compiler? 
A **compiler** is a utility program that takes in our source code and generates executable machine code 🤖. 

There are different types of compilers - 
- Just in Time Compiler (JIT)
- Incremental Compiler 
- Load and Go Compiler

and many more.

Take a look at the following image to get a better understanding of how a compiler works at a higher level.



![how compiler works!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rdxr0gmhjdopyu2oku8.jpg)

## What is a Transpiler?
On one hand, where a compiler takes source code and converts it into a lower-level language in comparison to the source code, a transpiler takes our code and translates it into something similar while keeping the abstraction level the same as before.

**Example📝** - For any TypeScript code to run, it has to be first converted to JavaScript and it is done via **transpiling** the TypeScript source code.

Also, Babel is another transpiler used to transpile ES6+ JavaScript to more compatible forms suitable for older browsers.

The following image shows ES6 JavaScript code being transpiled to ES5 code.

![transpiler img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3epic1uwb9yr7t9z52i5.jpg)

## Transpiling Demo 🚀
Here, we would see how a TypeScript code is transpiled to JavaScript code.

### TypeScript Code

![TS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbd862s7j8lokceu1j1k.png)

To transpile the TypeScript code we use `tsc file_name.ts` in the terminal. This creates a JavaScript file containing the transpiled code with the name `file_name.js` in the same directory. 

### Transpiled JavaScript Code 🌈

![JS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu1y3i0b0r0r1v460h34.png)

## Conclusion
Congratulations!! 🎉🎉 You made it till the end. If you're still here chances are you probably liked the blog.🚀
Here, we merely scratched the surface of transpilers and compilers. 

Do let me know how you liked the blog and where I need to improve. Would be eagerly waiting for feedback!