Transpilers: Do you really need it ?

Pram
Pram
Sep 3, 2018 · 2 min read

Pretty sure, you have used one of this transpiler to convert one code to the other. One of the example is to convert es6 to es5 in the assumption that not all browser support es5 yet. We, also, often time tend to use it without even thinking about why we need it and what is the impact of it. In this article, I will provide some explanation about what is transpiler and why we actually might not even need to have one on our app.

What is Transpiler ?

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language.

One of the most famous transpiler in the javascript world is Babel. One of the most use cases for Babel is to transpile jsx from React.js and es6 to es5 code. In fact, Babel has lots of plugin that you can use to transpile code.

How does Babel work?

  1. Parse: Babylon is the parser and it will take Javascript code and turn it into a computer friendly representation called an AST (Abstract Syntax Tree).
  2. Transform: Babel Traverse will transform and modify the AST to the intended code
  3. Generate: babel-generator will transform back AST to the code
Source: Understanding ASTs by Building Your Own Babel Plugin by Dan Prince

What is the downside of using transpiler?

  1. Transpiler add build time
  2. Transpiler code is slower
  3. Transpiler code is bigger

Why you should not use Transpiler ?

According to ES Compatibility Table the latest version of all major browsers have a very good support for ES6 features

Almost all browsers has good support of es6 and one of the reasons we probably still using transpilers, is because we were required to use it and we are used to this term that we forgot we probably don’t need it anymore. There are very small percentages of user who still use browser that didn’t support es6 but it is at the end up to the product manager and developers to decide if it worths all the bad parts of the transpiler to reach out to those small number of users who still have not upgrade their browser and might upgrade it by the time you set up all your webpack configuration.

Let me know what you think at the comment :)

Pram

Written by

Pram

Passionate about code patterns and web performance. Software engineer @realtor.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade