Javascript Transpiler

Saat ini saya memegang sebuah project yang menggunakan sebuah teknologi front-end bernama React.js . apa itu React.js bisa anda baca disini. ,

Yang menjadi perhatian saya disini adalah pemakaian ES6 atau ECMAScript2015, yang baru rilis di juni 2015. Tidak seperti ES5 , ES6 belum stabil di semua browser (berkaitan dengan compability terhadap browser), sehingga diperlukan suatu mekanisme untuk meng convert ES6 ke ES5 yg lebih stabil, di sinilah sebuah javascript transpiler dibutuhkan

Apa itu Transpiler? , Transpiler bisa diartikan sebagai source-to-source compiler , yaitu sebuah compiler yang mengambil source code suatu program yang di tulis menggunakan suatu bahasa pemrograman sebagai input dan menghasilkan source code yang equivalent dalam bahasa pemrograman lainnya .

Salah satu alasan penggunaan javascript transpiler adalah dikarenakan setiap browser menggunakan javascript engine yang berbeda, Chrome denga V8 , Firefox dengan spidermonkey dan lain lain , masing masing mempunyai karakteristik sendiri. Maka dengan transpiler, code kita akan bekerja dengan baik untuk siapa saja yang meng akses site kita.

Javascript Transpiler juga mempunyai peranan penting dalam membantu keputusan dari TC39 , sebuah komite yg merancang standar ECMAScript

Banyak sekali transpiler di luar sana , diantaranya adalah Babel , Traceur ( ECMAScript2015 ke es5) , HipHop for PHP ( PHP ke C++) dan lain lain.

Kebetulan saat ini saya memakai ECMAscript2015 ,dan Babel sebagai transpiler. Apa itu babel , bisa anda baca disini.

berikut ini contoh hasil transpile dari ES6 ke ES5

Format ECMAScript2015 ( ES6 )

import React from 'react'

class TextInput extends React.Component {
  
render (){
  return (
    <input type="text"></input>
    );
}
}

Hasil transpile ke ES5 sebagai berikut:

var TextInput = function (_React$Component) {
  _inherits(TextInput, _React$Component);

  function TextInput() {
    _classCallCheck(this, TextInput);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(TextInput).apply(this, arguments));
  }

  _createClass(TextInput, [{
    key: "render",
    value: function render() {
      return _react2.default.createElement("input", { type: "text" });
    }
  }]);

  return TextInput;
}(_react2.default.Component);

Demikian sharing tentang transpiler dari saya, semoga bermanfaat :D
sumber :

https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them
http://software.endy.muhardin.com/javascript/javascript-2015/