Экосистема Polymer. Веб-компоненты в продакшне, часть 2

В прошлой статье мы поговорили о том, почему веб-компоненты уже сейчас можно начинать использовать на практике. Сегодня перейдём непосредственно к Polymer. Для начала — несколько слов о Google I/O, где прозвучал ряд докладов о внедрении этой библиотеки.

Главная идея ребят из Google звучит так: хватит с нас JS-фреймворков с их абстракциями и танцами вокруг изоморфизма. Взваливать всё на плечи JavaScript — плохой путь для мобильных веб-приложений, где важен быстрый отклик и возможность работы в оффлайне.

Что же делать? Ответ на этот вопрос и новый девиз Polymer звучит так: #UseThePlatform — используй платформу, Люк! Имеются в виду новые возможности браузеров: веб-компоненты, сервис-воркеры и HTTP/2. В переводе на русский — давайте следовать веб-стандартам.

Разработчики Polymer немало потрудились над тем, чтобы привлечь сообщество на свою сторону. Правда, на фоне начинающегося хайпа вокруг Angular 2 достижения выглядят скромно. По сути, Google здесь конкурирует сам с собой. Итак, что же нового мы увидели?

Обзор новинок

• App Elements — новое семейство официальных веб-компонентов от создателей Polymer, призванное решать ряд универсальных задач при разработке прогрессивных веб-приложений.
• сайт Polymer, переписанный с использованием этих компонентов. Также обновлена и дополнена документация, в которой больше нет ссылки на версию 0.5 (старая версия доступна здесь).
• App Toolbox — новый стартовый шаблон, основанный на утилите для сборки под названием Polymer CLI. Содержит набор готовых решений для разработки веб-приложений на Polymer.
• PRPL (Push, Render, Pre-cache, Lazy Load) — паттерн взаимодействия с сервером на основе HTTP/2 Push и сервис-воркеров. Призван оптимизировать загрузку ресурсов и их кэширование.
• Shop App — демо, позволяющее увидеть упомянутые компоненты и приёмы сборки в действии. Можно посмотреть на GitHub, а также выбрать в качестве шаблона при работе с Polymer CLI.

Релиз и ожидания

Вскоре после завершения Google I/O, 31 мая вышел релиз Polymer 1.5. Правок вошло немного, единственное новшество касается нюансов работы с событиями на touch-интерфейсах. Похоже, в основном команда в последнее время работала над новым сайтом и CLI.

Что касается ближайшего будущего самой библиотеки — нас ожидает улучшение поддержки нативных CSS-переменных и миксинов: feature detection и использование полифиллов при необходимости. Во всяком случае, об этом говорит прогресс в соответствующей ветке.

В более отдалённой перспективе ожидаем внедрения новых версий спецификаций: в Shadow DOM V1 много отличий от “нулевой” версии, так что команде Polymer придётся внести ряд изменений. До тех пор Shady DOM, вероятно, останется режимом по умолчанию.

Итак, Polymer поощряет нас внедрять новые веб-стандарты, предлагая для этого всё больше решений из коробки. Звучит здорово, скажете вы, но как этим пользоваться и вообще, с чего начать? Если вы не знакомы с экосистемой Polymer, вам поможет следующий обзор.

Инструменты

Итак, мы хотим организовать модульную разработку с помощью веб-компонентов и Polymer. Для начала определимся с инструментами. Нам понадобится обеспечить решение нескольких задач: управление зависимостями, сборка, запуск тестов, проверка стиля кода.

Bower

Несмотря на повсеместное использование npm, нелюбимый многими Bower пока остаётся единственным пакетным менеджером для работы с Polymer. Вот несколько соображений в его защиту:

• веб-компоненты содержат не только JS-код, но и изрядную долю HTML, поскольку Polymer предлагает удобный декларативный синтаксис для описания кастомных элементов;
• модули стилей, иконки, шрифты — всё это естественно смотрится в Bower, тогда как npm-пакеты предназначены именно для JavaScript и содержат как клиентский, так и серверный код;
• Bower не навязывает систему модульной разработки, позволяя для организации сборки использовать HTML-импорты, а не JavaScript-модули, как предполагается при использовании npm;
• наконец, на этапе разработки можно импортировать зависимости без препроцессинга, прямо из директории Bower. Это не только облегчает отладку, но и позволяет быстро вносить правки.

Gulp

Основным сборщиком для Polymer сегодня является Gulp. Его позиции может потеснить Polymer CLI, но эта утилита пока сыровата. К тому же, в будущем разработчики CLI обещают предоставить возможность её использования совместно с Gulp-тасками.

Главная особенность сборки — стадия склеивания HTML-импортов в целях производительности и уменьшения числа запросов. Нюанс в том, что делать это нужно в правильном порядке. Здесь к нашим услугам несколько утилит и соответствующие плагины:

• gulp-vulcanize — сжимает все HTML-импорты в один файл, который и подключается в index.html. В процессе сборки vulcanize инлайнит внешние CSS и JS, также удаляет из HTML комментарии. На выходе получаем один большой бандл со всеми компонентами.
• gulp-web-component-shards — более продвинутая версия vulcanize: принимает несколько точек сборки и создает файл с общими для них зависимостями. Позволяет реализовать lazy load для отдельных фрагментов SPA. Обёртка для web-component-shards.
• gulp-crisper — следующая стадия сборки: vulcanize и web-component-shards все скрипты инлайнят в HTML, после чего crisper выносит их в отдельные JS-файлы и подключает их в нужном порядке. Цель этих манипуляций — соблюдение Content Secutiry Policy.

В результате обработки исходного кода с помощью этих плагинов мы получим набор HTML и JS-файлов, которые далее можно обработать привычными способами: скажем, пропустить через HTMLMinifier и UglifyJS, использовать PostHTML и Babel и так далее.

Тесты и линтинг

Писать тесты и проверять качество кода нужно всегда, но при работе с Polymer это особенно важно: иногда здесь встречаются неочевидные нюансы (скажем, порядок срабатывания событий). Помочь избежать пресловутого выстрела в ногу помогут следующие инструменты:

• Web Component Tester — джентльменский набор для тестирования компонентов Polymer. В составе: Mocha, Chai, Sinon и test-fixture, а также Async и LoDash. Позволяет запускать тесты в браузере, с помощью Selenium или SauceLabs. Есть плагин для Istanbul.
• ESLint — используется для линтинга инлайн-скриптов с помощью плагина. Понадобится настроить несколько исключений: скажем, вызов глобальной функции Polymer для регистрации кастомных элементов в DOM осуществляется без оператора new.
• HTMLHint и htmlcs — две утилиты для линтинга и проверки стиля кода HTML, которые позволят избежать ошибок вроде забытой кавычки у атрибута, из-за которой ломается дата-биндинг. Для первой из них имеется плагин для PostHTML.
• Polylint — линтер для логики компонентов Polymer: анализирует HTML-импорты, использование properties и т. д. Есть плагины для Atom и Sublime. Недостаток — отсутствие гибкой конфигурации, что на данный момент ставит пользу утилиты под вопрос.
• Sanity Check — компонент, отлавливающий типичные ошибки, вроде не инициализированных элементов, и сообщающий об этом в консоль. Рекомендуется к использованию в dev-окружении, при продакшн-сборке вырезается с помощью gulp-useref.

Полезные ресурсы

Напоследок — подборка ссылок в качестве источников вдохновения. Не то чтобы это был необходимый набор для Polymer, но когда начал собирать бойлерплейты, становится трудно остановиться…

Официальные шаблоны

• Polymer Starter Kit (PSK)— исходный пункт для вдумчивого чтения gulpfile. Местами устарел, ожидается новая версия.
• seed-element — шаблон Polymer-компонента, включает заготовки для тестов, страниц документации и демо.
• generator-polymer — генератор Yeoman. Использует seed-element и PSK в качестве шаблонов, есть деплой на GitHub Pages.
• app-drawer-template — новый стартовый шаблон для Polymer CLI, демонстрирует возможности элементов app-layout.

Интеграция

• PolymerTS — библиотека для разработки компонентов Polymer на TypeScript, использует синтаксис классов и декораторы.
• Angular2-Polymer — библиотека от Vaadin для интеграции в проект на Angular 2 компонентов Polymer, руководство прилагается.
• express-web-components — позволяет использовать компоненты Polymer в проектах на Express, в том числе на сервер-сайде.
• kickstart-meteor-polymer — решение для интеграции компонентов Polymer при разработке проектов на Meteor.
• polymer-native — первый шаг в сторону создания некоего аналога React Native для Polymer, разработчик — Денис Радин.

Шаблоны сообщества

• angular2-polymer-quickstart — шаблон от Vaadin для старта проекта на Angular2-Polymer, разработчик — Антон Платонов.
• generator-polymerts — генератор Yeoman для быстрого создания элементов при разработке на PolymerTS.
• poly-next — шаблон для модульной разработки с поддержкой Polymer и React-компонентов, а также TypeScript.
• polymer-admin — шаблон админки на Polymer, использует целый ряд официальных компонентов. Отличное демо.
• pack — мой собственный шаблон для создания SPA на Polymer. Включает поддержку ES2015 и другие плюшки.

Кладези знаний

• Polymer Projects — список проектов на Polymer со ссылками на исходники (при наличии). Регулярно обновляется.
• Codelabs — набор пошаговых уроков с Polymer Summit, охватывает темы интеграции с Firebase, WebGL, Bluetooth и многое другое.
• Awesome Polymer — список литературы для дальнейшего чтения. Если хотите больше ссылок о Polymer, вам сюда.
• Slack — место для обмена опытом, обсуждения новинок и поиска решений проблем. Пишите, всегда рад общению.

На этом обзор экосистемы Polymer завершён. Теперь вы в общих чертах представляете, как с этим жить и работать. В следующий раз начнём углубляться в практические аспекты. Stay componentized!