Autopolyfiller - Precise polyfills

    
У цій статті я хочу розповісти про інструмент Autopolyfiller, який допомагає вам використовувати останні функції EcmaScript і при цьому не думати про підключаються поліфіллах.
 
На жаль, не всі користувачі використовують найсучасніші браузери, і часто нам доводиться жертвувати читаністю коду або використовувати поліфілли, щоб більш-менш зрівняти всі браузери і писати кросбраузерності код.
 
Є цілий ряд способів виправити цю ситуацію:
 
 

lodash і underscore

Це досить популярний спосіб «полагодити» браузери на сьогоднішній день, плюс до всього lodash приносить ряд корисних функцій для роботи з даними. До того ж він дозволяє берегти нерви розробників, які досі бояться міняти прототип базових класів «на благо».
 
 
_.chain([1, 2, 3, 4])
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
})
.value();

 
Особисто мені він не подобається через те, що lodash робить код «зашумленним». Але це справа кожного.
 
 

es5shim

es5shim лагодить практично всі відсутні функції , які були затверджені в специфікації ES5. Вам достатньо підключити файл es5-shim.js і можна вільно користуватися практично всіма благами EcmaScript 5.
 
 
[1, 2, 3, 4]
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
});

Такий код, безумовно, виглядає набагато чистіше.
 
 

polyfill.io

Суть дуже проста. Ви включаєте в ваш html код скрипт, який динамічно генерується виходячи з заголовка
User-Agent
браузера клієнта і лагодить все, що в ньому поламано:
 
 
<script src="//polyfill.io"></script>

(Не використовуйте цей лінк до Production)
 
Спосіб досить інетерсний, але патчіть все Жаде те, чого у вас в коді не використовується. Плюс комусь може не сподобається динамічна генерація скриптів, але вона досить дешева якщо використовувати кешуючий веб-північ, хоча не зовсім безпечна (см чужі кешуючий проксі).
 
Сам проект polyfill .
 
 

Autopolyfiller

Попередні способи лагодження JavaScript мають значний недолік. Вони змушують вас думати. Точніше самостійно вирішувати всі залежності вашого коду, враховуючи версії підтримуваних браузерів (підключати якісь додаткові скрипти). Або можуть розбитися об реальність www. Та й саме по цьому багато розробників включають весь es5shim (без спец збірок) і бояться його відключити після відмови від підтримки IE8 (а хіба мало що зламається). Проект поступово обростає зайвими залежностями і вичищати ці завісомості дуже-дуже боляче.
 
Як варіант, можна створити якийсь файл в якому зберігати всі використовувані ES5 методи. І при додаванні нового методу в код розширювати цей файл, враховуючи всі версії підтримуваних браузерів. Використовуючи цей список, можна отримати кастомний збірку es5shim. А як бути якщо ми підвищуємо версію браузерів, видаляємо використовуваний метод? Писати Скрит? Загалом, шило на мило.
 
Якщо подивитися з іншого боку, то ваш код — це і є той самий файл зі списком залежностей, просто цього списку не явний:
 
 
[1, 2, 3, 4]
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
});

Ми можемо легко зрозуміти, що в цьому коді використовується 2 функції з ES5:
Array.prototype.map
і
Array.prototype.filter
.
 
Нам достатньо навчити робота знаходити в нашому коді завісомості і ми отримаємо можливість автоматично «патчити» наш код тільки потрібними поліфілламі. Величезний плюс в тому, що даний список залежностей сам очищається і сам розширюється по ходу зміни вашого коду.
 
З цієї простої ідеї народився проект Autopolyfiller, який допомагає вам не думати. Як ви вже помітили його назва схоже з Autoprefixer , який сповідує ті ж принципи, але стосовно CSS.
 
Алгоритм роботи Autopolyfiller дуже простий:
 - Ви визначаєте список браузерів, які підтримує ваш проект (це не оябзательно)
 - Згодовують Autopolyfiller'у ваш код
 - Autopolyfiller розбирає AST і знаходить методи ES *
 - Прибирає методи, які вам не потрібні, використовуючи список браузерів
 - Ви отримуєте код з поліфілламі
 
Через те, що JavaScript це інтерпретована мова, Autopolyfiller може промахнутися в деяких дуже граничних випадках.
 
 - У цьому коді
$('div').map()
він знайде
Array.prototype.map
.
 - У цьому коді
eval('Object.keys(this)')
і цьому коді
Object['k' + 'eys']()
він нічого не знайде.
 
Але якщо не робити нічого дивного і не використовувати eval-подібні структури, то його точність буде досить висока.
 
Autopolyfiller з коробки підтримує тільки безпечні, кросбраузерності і стабільні поліфілії (ES6 немає), які беруться з відкритої «бази даних» поліфіллов . Однак ви можете з легкістю його розширювати своїми.
 
Крім консольної утиліти і API, на даний момент написані таски під Gulp , Grunt і Enb . Так, що ви можете легко прикрутити Autopolyfiller в ваш складальний процес вже сьогодні. А якщо ви все ще сумніваєтеся — спробуйте демку !
 
Посилання:
 - Проект Autopolyfiller на Github
 - Якість коду Autopolyfiller
 - Демо Autopolyfiller
 
Буду радий відповісти на всі ваші запитання.
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.