Поліфіли та транспілятори

Мова JavaScript постійно розвивається. До неї регулярно додаються нові пропозиції, далі вони аналізуються і, якщо вважаються гідними для розширення мови, додаються до списку https://tc39.github.io/ecma262/, а потім переходять до специфікації.

Команди, які розробляють рушії JavaScript, мають власні уявлення про те, що потрібно реалізувати спочатку. Вони можуть вирішити реалізувати пропозиції, що знаходяться у чернетці, і відкласти речі, які вже є у специфікації, оскільки вони менш цікаві або їх важче розробити.

Тому це цілком звичайна ситуація, коли лише частина стандарту реалізована у самому рушії.

Хороша сторінка, щоб побачити поточний стан підтримки функцій мови, є тут https://compat-table.github.io/compat-table/es6/ (вона велика, нам доведеться ще багато вивчати).

Як програмісти, ми б хотіли використовувати найновіші можливості. Чим більше хороших речей — тим краще!

З іншого боку, як змусити працювати «сучасний» код на старих рушіях? Адже вони поки що не підтримують найновіших можливостей.

Для цього існують два інструменти:

1. Транспілятори.
2. Поліфіли.

В цьому розділі ми дізнаємося, як вони працюють та яке їхнє місце у веброзробці.

Транспілятори

Транспілятор – це спеціальний інструмент, який “перекладає” вихідний код з однієї мови програмування в код іншою мовою програмування. Також обробка коду може виконуватися в межах однієї мови програмування. Транспілятор парсить (“читає та розуміє”) сучасний код і переписує його, використовуючи старі синтаксичні конструкції, які працюють на старих рушіях.

Наприклад, JavaScript до 2020 року не мав “оператора об’єднання з null” ??. Якщо відвідувач використовує старий браузер, він не зможе виконати код, на кшталт height = height ?? 100.

Транспілятор проаналізує такий код і перепише height ?? 100 на (height !== undefined && height !== null) ? height : 100.

// перед запуском транспілятора
height = height ?? 100;

// після виконання транспілятора
height = (height !== undefined && height !== null) ? height : 100;

Тепер, переписаний код буде коректно виконуватися на старих рушіях JavaScript.

Зазвичай, розробник запускає на своєму комп’ютері транспілятор разом з компілятором, а вже після цього розгортає (“деплоє” від слова deploy) код на сервер.

Говорячи про імена, Babel – один з найвідоміших транспіляторів.

Сучасні збирачі проєктів, такі як webpack, надають засоби для автоматичного запуску транспілятора при кожній зміні коду, тому його дуже легко інтегрувати в процес розробки.

Поліфіли

Серед нового функціоналу мови можуть бути не тільки синтаксичні конструкції та оператори, але й також вбудовані функції.

Наприклад, функція Math.trunc(n) “відрізає” десяткову частину числа, тобто Math.trunc(1.23) поверне 1.

В деяких (дуже старих) рушіях JavaScript, немає функції Math.trunc, тому такий код призведе до помилки.

Якщо ми говоримо про нові функції, а не синтаксичні вирази, то тут нічого не потрібно транспілювати (“перекладати”). Нам лише потрібно оголосити відсутні функції.

Скрипт, який оновлює/додає нові функції називається “поліфіл” (polyfill). Він “заповнює” прогалини й додає відсутній функціонал.

Для нашого випадку з функцією Math.trunc, поліфілом буде такий скрипт, який реалізує цю функцію, ось так:

if (!Math.trunc) { // якщо немає такої функції
  // реалізувати її:
  Math.trunc = function(number) {
    // функції Math.ceil та Math.floor існують навіть в древніх рушіях JavaScript
    // ми розглянемо їх пізніше
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

JavaScript дуже динамічна мова – скрипти можуть додавати чи оновлювати функції, навіть якщо вони вбудовані.

Є два цікавих поліфіла:

• core js, що підтримує багато функціонала, дозволяє включати лише необхідні функції.

Підсумки

В цьому розділі ми намагалися вмотивувати вас вивчати сучасний та навіть “передовий” функціонал мови, навіть якщо цей функціонал поки що не підтримується сучасними рушіями JavaScript.

Просто не забувайте використовувати транспілятор (якщо будете використовувати сучасний синтаксис чи оператори) та поліфіли (щоб додавати функції, які можуть бути відсутні). Це дозволить впевнитися, що код працює на різних рушіях.

Наприклад, пізніше (коли достатньо вивчите JavaScript), ви зможете налаштувати систему збору проєкту на основі webpack із плагіном babel-loader.

Ось хороші ресурси, де можна дізнатися поточний стан підтримки різного функціоналу:

• https://compat-table.github.io/compat-table/es6/ – для чистого JavaScript.
• https://caniuse.com/ – для браузерних функцій.

P.S. Зазвичай браузер Google Chrome підтримує більшість найновіших функцій мови, спробуйте його, якщо демонстрація не працює. Більшість демонстрацій працюють із сучасними браузерами.