Apa itu Transpiling dan Polyfilling ?

Transpiling

Istilah Transpiling (Transforming + Compiling) adalah sebuah proses converting code, dari satu programming language ke programming language lainnya, yang mana diharuskan memiliki level abstraksi serupa. Sebagai contoh TypeScript, yang di transpiles ke JavaScript.

TypeScript :

let total = 10;
let sum = total ?? 100;

JavaScript :

"use strict";

let total = 10;
let sum = total !== null && total !== void 0 ? total : 100;

Dari code di atas kita bisa lihat, bahwa transpiling adalah proses converting newer code (TypeScript) ke older code (JavaScript) yang equivalent.

Ada satu transpilers tools yang cukup terkenal, bernama Babel. Kita bisa menggunakan Babel untuk melakukan transpilers code secara otomatis.

Polyfilling

Secara umum istilah Polyfill memiliki arti bahwa kita menulis code (modern functionality) yang mana harus bisa berjalan di older browsers (provide an equivalent piece of code) yang secara natively belum men-support code tersebut.

// These method is a sample of making polyfill
if (!Number.isNaN) {
  Number.isNaN = function isNaN(x) {
    return x!==x;
  };
}

Jika kita checkNumber.isNaN di situs CanIUse, kita akan melihat IE browser tidak men-support code tersebut, tapi akan berjalan normal pada new browsers (Chrome, Firefox, Edge, etc).

Dari case tersebut, kita baiknya check terlebih dahulu apakah code kita berfungsi di suatu browser atau tidak, jadi ketika code kita tidak di support suatu browser, maka kita perlu menulis code yang equivalent.

Namun kita tahu, banyak sekali features dan function yang serupa, yang perlu di lakukan polyfill. Apakah kita perlu melakukan semua itu? Tentu saja tidak, karena akan sangat sulit.

Jadi, ada beberapa libraries untuk memanage hal tersebut, sebagai contoh core-js , core-js adalah sebuah polyfill library yang men-supports hampir semua new features untuk semua older browsers.

Kita hanya perlu install dan import, dan kita tidak perlu khawatir lagi apakah suatu browser support atau tidak dengan code yang kita tulis.

import 'core-js/actual/array/from';
import 'core-js/actual/set'; 

Array.from(new Set([1, 2, 3, 2, 1]));