Что такое полифил?
Перевод статьи: What is a polyfill?
Автор: Remy Sharp.
Откуда взялся полифил и как формировался термин?
Это произошло ранее, в 2009 году, когда я был занят написанием книги «Introducing HTML5» («Знакомство с HTML5»). Сидя в кофейне (как и вы, наверно, сейчас) я пытался подыскать подходящее слово, с которым можно ассоциировать «моделирование API интерфейса с использованием JavaScript (или Flash, либо чего-нибудь другого), для браузера, у которого не предусмотрен таковой изначально».
Я прекрасно понимал, что крутящийся в голове образ нового термина не имел ничего общего с уже существующим выражением «прогрессирующее улучшение», поскольку исходный уровень моих наработок требовал наличия JavaScript и эмитируемой с его помощью новой технологии, то есть «улучшения» JavaScript как такового здесь нет и близко.
Я также отбросил вариант с термином «плавная деградация», так как при отсутствии, самого исходного функционала браузера, который должен, так сказать, «деградировать», а также без JavaScript (предполагая, что в вашем полифиле использован JavaScript) это тоже не работало.
То есть идея была отыскать легкое в произношении слово, которое ассоциировалось бы с достаточно широкой концепцией того, что эта штука, собственно, должна делать. «Полифил» (англ. «Polyfill») — вот что мне просто пришло на ум, тем не менее это слово вполне удовлетворяло моим требованиям. Первая его часть «Poly-« ( *от греческого «Polloi» — значит много ) говорит о привлечении любого числа технологий, то есть с поставленной задачей можно справиться не только посредством JavaScript, а вторая часть «-fill» ( *наполнять, заполнять ) подразумевает заполнение той дыры браузера, в которой и должна находиться реализуемая таким образом технология. Здесь, к тому же отсутствует такое понятие как «устаревший браузер», поскольку нам понадобится «полифилировать» и новые браузеры.
Насколько я знаю, существует такой продукт как «Polyfilla» (шпаклевка в США), представляющий собой наносимую на стены пасту с целью замазывания дыр и трещин. И мне на самом деле по-душе эта идея визуализации того, как мы, так сказать, «ремонтируем» браузер. Поскольку стена сама по себе плоская значит, вы можете нарисовать на ней что угодно или наклеить обои на ваш вкус.
В свое время я получил отзыв, в котором выражалось мнение, что «данное слово необходимо сменить», однако на тот момент сообщество как никогда нуждалось в подходящем слове, так, как когда-то мы нуждались в терминах подобных Ajax, HTML5, Web 2.0 — в чем-нибудь, чем можно обозначить наши идеи. И неважно, что слово не идеально, оно твердо стоит на ногах, принято сообществом разработчиков и дизайнеров и все прекрасно понимают его смысл.
На самом деле я никогда намеренно не навязывал этот термин, а просто применил его в некоторых ключевых местах (по большей части в книге) и на сколько я помню спустя пару (или достаточно много) месяцев, именно после презентации Пола Айриша (Paul Irish), в которой им напрямую было отражено слово «полифил», данный термин получил широкое распространение. (Мне кажется, что немалую роль сыграло добавление в эту презентацию страницы «Modernizr HTML5 shims & polyfill».)
Определения.
Несколько примеров.
Вот вам пример: интерфейс sessionStorage доступен во всех последних версиях браузеров (IE8 и выше), но отсутствует в IE7 и ниже.
Для того, чтобы включить такую поддержку в старых, не обеспечивающих интерфейс sessionStorage браузерах, можно использовать полифил.
Теперь, имея в наличии полифилер, я, как веб-разработчик могу полностью рассчитывать на использование сессионного интерфейса Web Storage API и более не нуждаюсь в дальнейшем тестировании своего кода либо его форкинге для обработки различных ситуаций.
Заключение.
Не так давно Пол Айриш опубликовал список доступных полифилов и шимов — отличный ресурс, содержащий впечатляющий список средств от головной боли, вызываемой у нас разработчиков старыми версиями браузеров.
По всей видимости, использование полифилов отлично зарекомендовало себя, и неплохо было бы и вам начать применять этот подход в тех случаях, когда необходимо повысить функциональность старых (а иногда и новых) браузеров до желаемого уровня.
Использование полифиллов при написании кросс-браузерных приложений
Недавно со мной случилась одна весёлая история. Я сделал веб-проект и расширил возможности уже существующего приложения, которым в моей организации пользуются кадровики. Всё выглядело просто отлично, я радовался тому, что проект был запущен, с нетерпением ожидая благодарственных писем.
Через несколько дней после первого релиза я, и правда, начал получать письма. Но благодарностей в них не наблюдалось. Мне писали менеджеры, работники кадровой службы, и все те, кто пытался воспользоваться моей программой. Все они говорили, что у них приложение работает неправильно.
В чём же дело? А дело в том, что я, создавая проект, тестировал его в Chrome. Но пользователи этого проекта постоянно применяют Firefox и IE. Работа с моим приложением не стала исключением. Мне, в итоге, было совсем невесело от того, что проект, запущенный пару дней назад, надо было дорабатывать.
Собственно говоря, тут мне на помощь и пришли полифиллы.
Полифиллы
Полифилл (polyfill или polyfiller) — это фрагмент кода (или некий плагин), реализующий то, наличия чего разработчик ожидает среди стандартных возможностей браузера. Полифиллы позволяют, так сказать, «сгладить» неровности браузерных API.
В веб-среде полифиллы обычно представлены JavaScript-кодом. Этот код используется для оснащения устаревших браузеров современными возможностями, которые эти браузеры не поддерживают.
Например, с помощью полифилла можно сымитировать функционал HTML-элемента Canvas в Microsoft Internet Explorer 7. Для этого применяется плагин Silverlight. Средствами полифилла может быть реализована поддержка единиц измерения rem в CSS, или атрибута text-shadow, или чего угодно другого. Причины, по которым разработчики не пользуются исключительно полифиллами, не обращая внимание на встроенные возможности браузеров, заключаются в том, что стандартные возможности браузеров обеспечивают более качественный функционал и более высокую производительность. Собственные браузерные реализации различных API обладают более широкими возможностями, чем полифиллы, да и работают быстрее.
Иногда полифиллы используются для решения проблем, связанных с тем, что различные браузеры по-разному реализуют одни и те же возможности. Подобные полифиллы взаимодействуют с некоторыми браузерами, используя их нестандартные особенности, и дают другим JavaScript-программам доступ к определённым механизмам, соответствующий стандартам. Надо отметить, что подобные причины использования полифиллов сегодня уже не так актуальны, как раньше. Особую распространённость полифиллы имели во времена IE6, Netscape и NNav, когда каждый браузер реализовывал возможности JavaScript не так, как другие.
Пример
Недавно я опубликовал руководство по разработке приложения, конвертирующего CSV и Excel-файлы в JSON с помощью JavaScript. Здесь можно посмотреть на готовое приложение.
Для того чтобы разобраться с тем, о чём мы будем говорить дальше, вы можете либо сделать всё то, о чём идёт речь в руководстве, либо клонировать мой репозиторий следующей командой:
Рекомендую в процессе работы пользоваться VS Code. Запустить веб-приложение можно локально, с использованием расширения для VS Code Live Server.
Давайте модифицируем это веб-приложение и посмотрим на проблемы, которые возникают при работе с ним с использованием разных браузеров.
Создадим в репозитории ветку polyfill и переключимся на неё:
Я собираюсь исследовать ситуацию, в которой мы получаем данные из двух или большего количества CSV-файлов, и, после завершения обработки результатов запросов к соответствующим API, выводим эти данные в HTML-таблицу.
▍Доработка проекта
Создадим в корневой директории проекта новый CSV-файл ( team2.csv ), в результате чего там должно оказаться два файла. Вот файл, который я добавил в проект.
Модифицируем файл script.js так, чтобы он читал бы данные из 2 файлов и выводил бы все данные в HTML-таблицу. Вот мой script.js :
Теперь, скопировав адрес страницы, откройте проект во всех браузерах, которые у вас есть. В моём случае это были Internet Explorer, Firefox Mozilla, Microsoft Edge и Google Chrome. Оказалось, что приложение перестало нормально работать в Internet Explorer и Microsoft Edge. Там выводились только заголовки.
Страница проекта в Chrome
Страница проекта в Microsoft Edge
У того, что на странице, выводимой некоторыми браузерами, нет данных, две причины:
▍Применение полифиллов
Исправим проблему промисов и коллбэков, воспользовавшись библиотекой Bluebird. Это — полномасштабная JS-реализация механизмов, связанных с промисами. Самая интересная особенность библиотеки Bluebird заключается в том, что она позволяет «промисифицировать» другие Node-модули, обрабатывая их так, чтобы с ними можно было бы работать асинхронно. Такую обработку можно применить к коду, в котором используются коллбэки.
Загрузим библиотеку Bluebird на страницу, воспользовавшись соответствующим CDN-ресурсом. Для этого разместим в заголовке файла index.html (в элементе head ) следующее:
Теперь приложение должно работать во всех браузерах так, как ожидается. Вот, например, как оно теперь выглядит в Microsoft Edge.
Страница доработанного проекта в Microsoft Edge
Я развернул этот проект здесь. Можете его испытать.
Если у вас не получилось добиться работоспособности проекта — загляните в мой репозиторий.
А вот — для примера — ещё пара полифиллов.
Итоги
Полифиллы были особенно актуальны раньше, но и в наши дни они способны помочь в разработке кросс-браузерных веб-проектов. Надеемся, что приведённый здесь пример позволил тем, кто раньше не знал о полифиллах, по-новому взглянуть на проблему создания сайтов, рассчитанных на различные браузеры.
Уважаемые читатели! Пользуетесь ли вы полифиллами?
Полифиллы — JS: DOM API
DOM непрерывно развивается. Какие-то браузеры его адаптируют быстрее, какие-то медленнее. Все это не позволяет легко и непринужденно пользоваться последними новинками. Разработчикам каждый раз нужно думать о том, какие браузеры распространены у пользователей их проектов.
Информацию о том какие браузеры актуальны, обычно, узнают из аналитики, например google analytics, которая в режиме реального времени собирает её со всех, кто заходит на сайт.
В некоторых, особо сложных ситуациях, приходится поддерживать совсем старые браузеры, которые практически ничего не могут. Такое нередко встречается в государственных организациях.
К счастью, природа JavaScript позволяет частично компенсировать недостатки старых браузеров. Благодаря прототипам у разработчиков есть возможность добавить недостающую функциональность прямо в реализацию DOM. Делается это с помощью полифиллов.
Общий принцип работы этих библиотек следующий:
Важно чтобы библиотека с полифиллами грузилась до выполнения любого другого кода. Только в этом случае остальной код может рассчитывать на наличие нужных свойств.
Добавление метода
Добавление свойства
Примеры выше не являются полными. Если посмотреть исходники соответствующих библиотек, то хочется их быстрее закрыть. Количество кода иногда зашкаливает до неприличия. Обеспечение универсальной работы во всех браузерах (и всех их версиях) непростая задача.
Чтобы узнать поддержку определенных фич в разных браузерах, можно воспользоваться прекрасным ресурсом https://caniuse.com/. А самый простой способ добавить полифиллы на свой сайт — это воспользоваться проектом polyfill.io. Кроме этого проекта, на гитхабе огромное количество готовых полифиллов для любых частей DOM. Они разбросаны по разным репозиториям разных людей, поэтому если вам понадобится что-то полифиллить, то сначала придется потратить время на поиск нужной библиотеки.
Иногда бывает нужно просто проверить наличие определенной фичи, и в зависимости от результата выполнять разный код. В такой ситуации поможет библиотека modernizr.
Ядро JavaScript
Но полифиллы бывают не только для DOM. Сам JavaScript тоже непрерывно развивается, особенно последние годы. Многие фичи современного JavaScript настолько упрощают разработку, что без них уже сложно. Поэтому практически ни один современный проект не обходится без библиотеки core-js. Эта библиотека закрывает почти все возможности современного JavaScript.
Она устанавливается, как зависимость проекта и один раз подключается на самом верхнем уровне приложения и делает сама всю работу, без необходимости сборки приложения вебпаком.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Полифилы что это такое
Полифилы что это такое
Здравствуйте! В этом уроке я вкратце хочу осветить такой вопрос, как полифилы. Надо отметить, что JavaScript – это динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в него новых возможностей, они естественно анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик стандарта, а затем уже публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновом варианте, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут к сожалению не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это такой транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть 2 части Babel:
2 интересных хранилища полифилов:
Таким образом, чтобы современные функции поддерживались в старых движках, вам надо установить транспилер и добавить полифил.
Браузер Google Chrome поддерживает современные функции, можно запускать новейшие примеры без каких-либо транспилеров, но и другие современные браузеры тоже хорошо работают.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Полифилы
JavaScript – динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в JS новых возможностей, они анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик https://tc39.github.io/ecma262/, а затем публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать в первую очередь. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновике, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Можно проверить текущее состояние поддержки различных возможностей JavaScript на странице https://kangax.github.io/compat-table/es6/ (нам ещё предстоит изучить многое из этого списка).
Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Два интересных хранилища полифилов:
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
Примеры в учебнике
Большинство примеров можно запустить «на месте», как этот:
Примеры, в которых используются современные возможности JS, будут работать, если ваш браузер их поддерживает.
Google Chrome обычно поддерживает современные функции, можно запускать новейшие примеры без каких-либо транспилеров, но и другие современные браузеры тоже хорошо работают.
