Сеть может показаться быстро движущейся. Новые рамки, инструменты и даже языки приходят и уходят. Тем не менее, многие разработчики считают, что они должны двигаться так же быстро, как их самый медленный пользователь. Новые браузеры «вечнозеленые» — они автоматически обновляются незаметно в фоновом режиме, не запрашивая разрешения, и делают огромные шаги в плане развития новых API.
Однако даже современные браузеры реализуют функции в разное время. Огорчительно читать о переднем крае современного развития только думать, что все это непригодно на долгие годы. Может быть, вы просматривали аналитику своего сайта и заметили пользователей, все еще работающих на IE9? Должны ли вы кодировать, как будто это 2011 или делегировать все в JQuery или какой-то фреймворк? Есть еще один вариант. Введите полифилл .
Что такое полифилы и зачем они нам нужны?
Реми Шарп придумал этот термин в книге и блоге за 2009 год. Если функция существует в браузере, полизаполнение позволяет браузеру делать свое дело, а если нет, то полифильм вмешивается, чтобы подключить отсутствующую функциональность. Они заполняют дыры старых браузеров, недостающие функции, которые мы хотим использовать сегодня. Он копирует нативный API с не родным кодом.
О каких недостающих особенностях мы говорим?
В 2009 году приземлился 5-й выпуск ECMAScript. Это был большой и радикальный шаг вперед для языка. ECMAScript 2015 предоставил аналогичное сейсмическое обновление. В дальнейшем улучшение языка будет происходить постепенно, происходя ежегодно. Это захватывающее время с новыми возможностями, постоянно попадающими в язык. Помимо самого основного языка, есть также DOM и различные API веб-платформы.
Чтобы подчеркнуть несоответствие между современным и устаревшим браузерами, вот сравнение последнего выпуска Chrome с Internet Explorer 9 (который, к сожалению, некоторые компании все еще требуют поддержки). И вот таблица, показывающая поддержку ECMAScript 6 . Вторая таблица восходит к IE 11, который, как вы можете видеть, поддерживает практически нулевые функции ES6. Это много недостающих функций …
Полифиллс против Транспилинг
Очевидно, что, взглянув на приведенные выше таблицы, мы должны перенести наш код. Он берет ваш блестящий новый синтаксис и выдает простой старомодный ECMAScript 5. Если вы хотите использовать в своем коде функции стрелок, асинхронного / ожидающего, отдыха и распространения параметров, классов и т. Д., Вам нужно перенести код ES6 в ES5 с помощью инструмента, такого как Бабель .
Однако вы не можете заполнить синтаксис JavaScript. В то время как Babel возьмет ваши функции стрелок и превратит их в обычные функции, полифилл добавит методы в глобальную область видимости и в собственные прототипы. Babel предлагает собственный полифилл ES6, который, по словам сайта Babel, предлагает «новые встроенные модули, такие как Promise или WeakMap , статические методы, такие как Array.from или Object.assign , методы экземпляров, такие как Array.prototype.includes , и функции генератора. «.
Таким образом, полифилл Babel может дать нам все функции ES6, которые мы хотим. Но есть много, чего не хватает. Может быть, вы добавляете и удаляете классы с classList API classList или matchMedia с помощью matchMedia , но вам все еще нужно поддерживать IE9. К счастью, есть сервис, который предоставляет все, что покрывает polyfill Babel, и многое другое.
Облегчение жизни с Polyfill.io
Polyfill.io — это инициатива с открытым исходным кодом, разработанная Financial Times. В настоящее время он получает до 204 миллионов запросов в день и называет себя «канонической библиотекой полифилов». Эта система доставки по требованию позволяет вам просматривать, могу ли я использовать , пожимать плечами, использовать новейшие стандарты и при этом быть совместимой с устаревшими браузерами.
В идеале нам следует использовать только те функции полизаполнения, которые мы фактически использовали, и отправлять только те полифилы, которые действительно нужны конкретному браузеру. Polyfill.io может удовлетворить обе эти потребности. Вместо того, чтобы доставлять наворот в современных браузерах, сервис читает HTTP-заголовок User-Agent, чтобы он мог доставлять только то, что необходимо. Новые браузеры получат почти пустой файл, старые версии IE получат гигантскую стену кода.
Вы можете уменьшить вес кода, доставляемого на старые машины, указав список функций, которые вы используете в строке запроса . Если опущен, будет использоваться набор значений по умолчанию. Использование сервиса требует еще одного блокирующего HTTP-запроса, но, на мой взгляд, его простота использования того стоит. У Филипа Уолтона, инженера в Google, есть свои мысли о полифиллах и производительности, которые стоит прочитать, если этот дополнительный запрос вас беспокоит.
Что не покрывает?
Polyfill.io довольно всеобъемлющий и включает в себя несколько передовых API-интерфейсов для браузеров, таких как Fetch и Promises. Тем не менее, существует целый мир полифилов, чтобы вы могли экспериментировать и использовать новые технологии. Пожалуй, самым захватывающим из них являются веб-компоненты , потенциально революционный прогресс в разработке интерфейса, предлагающий инкапсуляцию стиля и простоту повторного использования. Кросс-браузерная поддержка, наконец, на горизонте. Google активно продвигает свой проект Polymer, который в основном представляет собой JavaScript-фреймворк, построенный поверх гигантского полифилла. Тем не менее, веб-компоненты не следует отождествлять с этой платформой, поскольку сами по себе веб-компоненты обещают быть довольно мощными. Вы можете использовать компоненты без Polymer, но полная гамма API не была воспроизведена.
API веб-анимации предлагает эффективный безбиблиотечный способ создания анимации с помощью Javascript. Поддержка браузеров в настоящее время невелика, но шимм оказался достаточно надежным, так что я уже уверенно использовал эту технологию для всех анимаций на производственных сайтах, над которыми я работал. Он предлагает два варианта — один заполняет функции, которые в настоящее время доступны в определенных браузерах. Другой добавляет функции, которые еще предстоит завершить, что подводит меня к моей последней теме …
«Prolyfills»: тестирование новых API
И на prolyfills — спекулятивные прокладки для API, которые, вероятно, произойдут.
Функции полифиллинга, которые еще не были поставлены в качестве доказательства концепции, становятся все более распространенными и интересны для экспериментов с передовым краем фронтальной разработки. Возможно, вы хотите протестировать предложение Observables, вдохновленное популярной библиотекой RxJS? Для этого есть пролифилл . Эксперименты с новыми технологиями — одна из самых захватывающих частей работы разработчика.
Вывод
Так что у вас есть это. Мы рассмотрели, что такое полифилы, зачем они нужны, как использовать те или иные полифиллы, которые вам могут понадобиться, из polyfill.io и даже как вы можете использовать функции полизаполнения, которые еще не были отправлены.
Но как насчет тебя? Используете ли вы только языковые функции во всех поддерживаемых вами браузерах? Или вы пишете современный код, а затем используете полифилы, чтобы он работал в старых браузерах? А какой самый старый браузер вы должны поддерживать? Позвольте мне знать в комментариях ниже.
Эта статья была рецензирована Грэмом Коксом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!