LostInTranspilation.js

A view on the the bizarre world of modern JavaScript

Imagine if you will, you have to write an article in Latin. You don’t speak Latin and rather than take the time to learn it, you learn Spanish and use a tool to translate it all into Latin for you. It wouldn’t necessarily be the most readable article and you certainly wouldn’t understand the output, after all you don’t speak Latin, but it should be grammatically accurate.

Alternatively, you’ve heard lots of hype about Esperanto and there are a few tutorials online so you could learn that instead, again, translating everything back into Latin. This, in short, is how the world of modern JavaScript is shaping up.

JavaScript, or rather ECMAScript, as it’s been officially known since circa 1997, doesn’t follow strict versioning. It’s a specification, which is very much a moving target with features constantly being introduced. This makes support for JavaScript based platforms, browsers for example, difficult and the job of a developer even more so.

It does, however, also make JavaScript incredibly powerful because the language is evolving and improving at such a rapid pace. The most widely supported specification today comes under the banner of ECMAScript 5 (ES5 for short) which was born and began evolving in 2009. There is also now ECMAScript 6 and ECMAScript 2016+ of which there is less support while browsers and other platforms play catch up.

JavaScript is an incredibly diverse language. One of it’s many strengths is that variables are loosely typed which means a string variable can later become an integer which can later become a boolean or any other data type without any issue. For me, this is one of the many things that make JavaScript great. For those of you that prefer a more rigid approach and perhaps just got angry while reading, you’ll most likely love TypeScript.

TypeScript is a superset of JavaScript, created by Microsoft, which brings strongly typed variables to the language (among other things). While it shares many similarities syntactically speaking it does require a change of approach if you’re a traditional JavaScript developer. On top of that, it’s not a language that can be natively interpreted by the browser.

So, how can a developer leverage the newer ECMAScript features and/or TypeScript (or keeping with the analogy, Spanish and Esperanto respectively) and still create a solution with support across multiple browsers and platforms? Transpiling, that’s how. Yep, that’s right, it’s not a typo, TRANSPILING is the actual term. A cross between translating and compiling, it takes your potentially uninterpretable code and converts it into a more widely recognised syntax, effectively ECMAScript 5 (Latin).

One way to transpile, would be to use a build tool such as Grunt, Gulp or Webpack, typically in combination with Babel (the transpiler). These tools allow developers to break their projects down into manageable modules and then bring them all together into a distributable solution. With a build tool, code can be compressed, uglified, transpiled and do many other ‘made up verb’ type tasks.

All of the above encapsulates how a large number of JavaScript developers work today, both the experienced and noob alike, and there lies the problem for me.

With so many resources online and many of the newer ones based on this way of working, newer developers can be mislead into thinking that this is how they should do things, or, they can feel intimidated by or get lost in the number of moving parts required to write code.

A big part of my job at the moment is teaching people the fundamentals of JavaScript and to do so I stick solely to EMCAScript 5. No transpiling, no build tools. Just a text editor and some code. What you put in one end, comes out the other end looking exactly the same. With the fundamentals under your belt, understanding the additional concepts becomes a less daunting task and in all makes for a more successful journey in the JavaScript world.

In my own projects I avoid TypeScript at all costs but, I do, however, use build tools, keep up to date with the latest syntax and occasionally transpile.

Noobs of the world, don’t get lost in transpilation. Take the time to learn the fundamentals.

What are your thoughts? Leave any questions or feedback in the comments. Thanks!