Why Polymer? Веб-компоненты в продакшне, часть 1
На днях в сети появилась статья о новом интерфейсе десктоп-версии YouTube. Увидеть его можно в анонимном режиме, в регионе US и с помощью установки cookie. Очевидно, пока речь идёт о тестировании, и переход к новой версии займёт некоторое время.
Автор статьи отмечает ряд улучшений и элементы Material Design в оформлении меню, а также страницы канала. Но главный нюанс остался за кадром и всплыл только в комментариях: под капотом нового дизайна YouTube—веб-компоненты в реализации Polymer.
Объявления всех используемых на странице элементов сжаты в один файл dektop_polymer.html. Поиск по содержимому файла вхождений строки “<dom-module id=” говорит о наличии 192 элементов Polymer, из которых 157 разработаны командой YouTube.
Сервис YouTube Gaming использует веб-компоненты и Polymer в продакшне уже довольно давно. Как и в тестовой версии YouTube, подключены они в одном файле gaming_polymer.html. Всего 153 элемента: 125 собственных, 22 Paper Elements и 6 Iron Elements.
Ребята из YouTube немало потрудились над созданием библиотеки веб-компонентов. При этом обновлённое приложение кажется достаточно шустрым. Ждём релиза и новостей от Google, а пока предлагаю вспомнить, что сулит нам обещанное светлое будущее.
Необходимый ликбез
Во фронтенд-тусовке только и разговоров, что о компонентах. Там говорят о том, как чертовски здорово собирать огромное приложение, словно из кубиков лего… Веб-компоненты уже вошли в учебник Ильи Кантора, но пока о них пишут скептично и в общих чертах.
Ниже я перескажу в тезисной форме только самое главное, а для интересующихся деталями реализации будет много ссылок. Итак, знакомьтесь, если ещё не: три черновика спецификаций в статусе Working draft и тег <template>, уже включённый в стандарт.
- Тег <template> — хранит фрагменты разметки (Document fragment) для последующей вставки (stamping) в документ. Стандарт, поддержка браузерами хорошая. Важно: IE не поддерживает использование <template> внутри <table> и <select>.
- Shadow DOM — инкапсуляция со всеми ее плюшками, в том числе CSS scoping. Ставим в настройках Chrome DevTools галочку “Show user agent shadow DOM” и залезаем внутрь тега <video>. Черновик, Firefox в процессе, WebKit тоже, у Edge приоритет High.
- Custom Elements — свои HTML-теги (наследуют HTMLElement) с жизненным циклом и методами. Можно использовать синтаксис классов ES2015. Название должно содержать дефис. Черновик, внедряют Firefox и WebKit, у Edge приоритет Medium.
- HTML imports — возможность подключать в одном HTML-документе другие. Позволяет организовать зависимости веб-компонентов. Черновик и пока самое слабое звено: Firefox ранее не планировал внедрять, у Edge приоритет Low, WebKit еще не приступал.
Поддержка браузерами
В Chrome и Opera всё работает из коробки, для остальных нужен полифилл. В том числе, и для Firefox, где веб-компоненты пока спрятаны под флагом, отключенным по умолчанию. Включать этот флаг при разработке на Polymer не рекомендуется.
Начиная с версии 1.0 в Polymer используется lite-версия скрипта, не включающая тяжелый и медленный полифилл для Shadow DOM. Взамен предлагается легковесная эмуляция под названием Shady DOM. В минифицированном виде полифилл весит 40 kb.
Кстати, упомянутый YouTube Gaming работает как в режиме Shady DOM (по умолчанию), так и нативного Shadow DOM. Загляните в инспектор элементов Chrome, и вскоре вы поймёте различия. Обратите внимание на секцию <head> в режиме Shady и эмуляцию CSS scopes.
Спецификации еще не окончательны, некоторые детали подвергаются пересмотру. Например, псевдоэлемент ::shadow и селектор /deep/ для пересечения границ и доступа к Shadow Tree из внешних CSS вызывали споры и в Chrome уже объявлены устаревшими.
Однако, несмотря на нюансы, Polymer 1.4 как бы говорит: уже можно. Ребята из Google смогли избавиться от тормозов версии 0.5 и сделать библиотеку достаточно лёгкой и стабильной, а официальный каталог включает уже несколько десятков элементов.
Когда уместен Polymer
Итак, Polymer позволяет применять веб-компоненты в продакшне уже сегодня. Конечно, о повсеместном использовании говорить рано. Но для ряда проектов библиотека вполне подойдёт. Вот несколько случаев, когда вам стоит подумать об использовании Polymer.
Вечнозелёные браузеры
Если для вас не принципиальна поддержка IE, взгляните на арсенал официальных элементов Polymer. Среди них — компоненты раскладки, решения на flexbox, современные анимации на базе Web Animations, средства работы с SVG, поддержка сервис-воркеров и многое другое.
Material Design
Если интерфейс вашего приложения выполнен в духе Material Design, вам поможет Paper Elements — библиотека элементов страницы и готовых контролов, а также стили: цветовая палитра, типографика, тени. Просто подключайте и пользуйтесь.
CSS-переменные
Если вам по нраву это новшество авторства Таба Аткинса, радуйтесь: Polymer включает полифилл для поддержки кастомных CSS-свойств, а также миксинов. Свойства и миксины элемента образуют часть API и позволяют легко переопределять необходимые стили.
Динамическая загрузка
Если вы хотите отложить загрузку некоторых элементов, поможет добавленная в Polymer 1.4 поддержка lazy registration. Теперь элементы можно регистрировать в DOM при первом обращении. В качестве примера реализации стоит отметить элемент iron-lazy-pages.
Вместо послесловия
Новая десктоп-версия YouTube — первый по-настоящему масштабный опыт внедрения веб-компонентов. Появляются они и в других продуктах Google: к примеру, промосайт Google I/O 2016. Но станут ли эти стандарты действительно востребованными сообществом?
Polymer предлагает несколько спорных подходов. Мы снова пишем инлайн-скрипты, то есть JavaScript внутри HTML, а не наоборот, как нынче модно. Впрочем, ESLint умеет в HTML, а при сборке скрипты выносятся в .js файлы с помощью утилиты Crisper.
Что касается CSS, модульная организация стилей в Polymer тоже выглядит не так, как её сейчас принято видеть. Стили мы тоже пишем внутри HTML (сюрприз). Здесь поможет PostHTML и плагин для запуска PostCSS, который парсит содержимое тегов <style>.
Напоследок отмечу, что текущая версия Polymer (по сравнению с версией 0.5) принципиально следует изменениям в спецификациях. Здесь уместно вспомнить известную мантру: “Однажды мы сможем просто отключить полифиллы, и всё будет работать”.
Веб-компоненты — вовсе не далёкая мечта, а реальность. Но пока у нас есть шанс поучаствовать в некоторой доработке напильником, а заодно и заскочить в последний вагон уходящего поезда. Когда начнётся хайп, может оказаться уже поздно, не правда ли?
Полезные ссылки
- WebComponents.org — основной ресурс о веб-компонентах, лучших практиках их разработки и использования.
- Are We Componentized Yet? — наглядная информация о прогрессе браузеров в области внедрения веб-компонентов.
- Polymer Catalog — официальная периодическая таблица элементов от создателей Polymer, а также несколько гайдов.
- CustomElements.io — библиотека элементов сообщества. Включает элементы Polymer, а также X-Tag и нативные реализации.
- Web Components the Right Way — awesome-подборка материалов для изучения веб-компонентов и Polymer.
В следующем выпуске я поделюсь своим опытом организации сборки SPA на Polymer, расскажу об используемых build tools и предложу стартовый шаблон для проекта на Polymer. Stay componentized!
