Why Transpilers Are So Important In Modern Software Development

by | General

Sometimes, there is a price to pay for being out on the bleeding edge of software development. In particular, the Javascript/Ecmascript programming landscape.

It wasn’t always that way. For the longest time, Javascript evolved very slowly and didn’t change much between major revisions.

The first version of Javascript came out from Netscape, the world’s first commercial web browser way back in 1995. This was not long after the introduction of the modern day internet as we know it, so Netscape was able to take advantage of “first mover” status, and helped cement the Javascript language standard as the de facto client side programming language of the internet.

So much so, that when Microsoft came onto the scene later with their own Internet Explorer browser, they needed to implement Javascript into their own browser, lest they lose support from their own customers who already began implementing Javascript into their own web pages and applications.

When other companies eventually came onto the scene like Google with their Chrome browser and Safari browser from Apple, they all recognized that Javascript was here to stay.

To this day, Javascript has become only MORE important in software development. It’s not very often that a particular computer language has so much staying power and influence.

More importantly, it has evolved greatly from it’s origins as a simple client side scripting language. In the early days of the internet, web pages were mostly just static text and images. Essentially, the early internet was just a bunch of hyperlinked documents.

The most server side functionality back then were html <form> tags that allowed you to submit basic information to the web server.

This was long before the advent of single page applications, AJAX and all the modern day frameworks that make web applications behave very much like client desktop applications like Microsoft Office and Adobe Photoshop.

Over time, more and more features were added to the Javascript language standard.

Things like AJAX allowed you to eliminate full page refreshes and allowed Google to create more responsive desktop like web applications like Gmail and Google Maps.

More helpful javascript libraries like JQuery gave Javascript developers a richer set of APIs to create more sophisticated web applications.

In 2009, a company called Joyent created a Javascript based framework called NodeJS, which allowed you to write server side web application code in Javascript.

This was a MAJOR breakthrough in Javascript development as it allowed a Javascript developer to create a full stack web application in all three application tiers, UI, Middle Tier and Data Tier, in a single programming language.

From then on, Javascript became a serious full stack programming language. It has even evolved beyond being a traditional internet programming language.

There are modern Javascript frameworks like React Native, that allow you to create mobile tablet and smartphone applications, using Javascript.

Similarly, Microsoft created a framework called WinJS, that allows a developer to hook into Native Windows APIs and allow developers to create applications that are able to run on Microsoft tablet, smartphone and PC devices.

Javascript has truly become THE de facto baseline programming language for all modern day software development. It’s actually been referred to as the “assembly language” of the web.

Assembly language, is a computer’s “native tongue”. All higher level computer languages like C, C++, Java and C# need a compiler to translate the code from those high level languages down to low level assembly language.

In a similar way, Javascript has essentially become the “assembly language of the web”.

Many of the newer frameworks and computer languages that come out today, are all based on Javascript.

Javascript itself continues to evolve and add features over time.

Unfortunately, Javascript is evolving so quickly that some web browsers are still trying to catch up with the latest Javascript standard.

The Typescript language, developed by Microsoft, was created to make Javascript resemble more object oriented languages like C# and Java.

Instead of having to write applications in native Javascript, a developer can write their code in the Typescript language.

Coffeescript is another Typescript type language, that uses transpiling to translate coffeescript syntax down to native Javascript.

Then with the help of something called a “transpiler”, the transpiler will essentially compile Typescript down to the Javascript equivalent.

Transpilers even help with the ever evolving Javascript standard itself.

At the time of this writing, Ecmascript 6, also known as Ecmascript 2015, is the latest and greatest version of the Javascript language standard.

ES6 allows you to write an object oriented class definition like this:

‘use strict’;

// Example 1: Creating a new class (declaration-form)

// ===============================================================

// A base class is defined using the new reserved ‘class’ keyword

class Polygon {

// ..and an (optional) custom class constructor. If one is

// not supplied, a default constructor is used instead:

// constructor() { }

constructor(height, width) {

this.name = ‘Polygon’;

this.height = height;

this.width = width;

}

// Simple class instance methods using short-hand method

// declaration

sayName() {

ChromeSamples.log(‘Hi, I am a ‘, this.name + ‘.’);

}

sayHistory() {

ChromeSamples.log(‘”Polygon” is derived from the Greek polus (many) ‘ +

‘and gonia (angle).’);

}

// We will look at static and subclassed methods shortly

}

 

Unfortunately not all web browsers are able to support all the features and functionality of this latest ES6 standard.

With the help of a transpiler, it can translate the ES6 code down to an earlier version of Ecmascript that older browsers can support:

‘use strict’;

// Example 1: Creating a new class (declaration-form)

// ===============================================================

// A base class is defined using the new reserved ‘class’ keyword

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (“value” in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(“Cannot call a class as a function”); } }

var Polygon = function () {

// ..and an (optional) custom class constructor. If one is

// not supplied, a default constructor is used instead:

// constructor() { }

function Polygon(height, width) {

_classCallCheck(this, Polygon);

this.name = ‘Polygon’;

this.height = height;

this.width = width;

}

// Simple class instance methods using short-hand method

// declaration

_createClass(Polygon, [{

key: ‘sayName’,

value: function sayName() {

ChromeSamples.log(‘Hi, I am a ‘, this.name + ‘.’);

}

}, {

key: ‘sayHistory’,

value: function sayHistory() {

ChromeSamples.log(‘”Polygon” is derived from the Greek polus (many) ‘ + ‘and gonia (angle).’);

}

// We will look at static and subclassed methods shortly

}]);

return Polygon;

}();

 

Babel is quickly becoming the most popular transpiler for Javascript development.

ReactJS uses a scripting language standard called JSX, which allows for XML syntax directly inside of Javascript. React utilizes JSX to help render UI components inside their framework.

Behind the scenes, transpiling is used to convert JSX to the equivalent native Javascript syntax.

As long as Javascript continues to be popular (and I have no doubt it’s only going to become MORE important as time passes) and evolve, I don’t think transpiling will go away anytime soon.

Browser vendors will always need time to adopt any new features of Javascript. Furthermore, if we continue to see new Javascript offshoot languages like Typescript and JSX, transpiling will always be needed to bridge that gap between what a browser can support and these new languages.

It would behoove software developers to keep abreast of transpilers and the art of transpiling, even if one prefers to write code in plain javascript.

Ready for Your Next Job?

We can help! Send us your resume today.


Need Talent?

Submit your job order in seconds.


About ProFocus

ProFocus is an IT staffing and consulting company. We strive to connect a select few of the right technology professionals to the right jobs.

We get to know our clients and candidates in detail and only carefully introduce a small number of candidates that fit the role well.