История библиотеки Polymer начинается с 2014 года, когда публике была представлена версия 0.5 с тяжелыми полифилами эмулирующими стандарт CustomElements для вечнозеленых браузеров.
Что касается меня, я впервые услышал об этой библиотеке в 2015 году, когда в свет вышла уже первая мажорная версия. Тогда многие ныли по поводу сложного перехода с версии 0.7. Апгрейд требовался основательным, многие элементы устарели, правила инициализации почти полностью изменили. И главное, заместо многоувесистого webcomponents.js была представлена намного более лёгкая ему альтернатива webcomponents-lite.js, где произошёл переход к ShadyDOM, эдаким костальным ShadowDOM для non-сhrome браузеров. Первая версия постепенно росла пока не достигла версии 1.6, став готовым продуктом для продакшена. Осенью 2016 года спека CustomElements вышла из stage в W3C рекомендацию. В это же время произошёл саммит в Лондоне, где был объявлен Polymer 2. Ключевой особенностью которого стало переосмысление написания кода на ES6, разбитием библиотеки на модули и поддержка только последних стандартов браузеров. В это же время зарелизилась версия 1.7, где создатели предлагали удобный переход ко второй версии. На этом сегодняшняя краткая история Polymer заканчивается, а пытливый читатель хочет знать, почему Google до сих пор вкладывает в такого аутсайдера мира фронтенда свои ресурсы, коммитит его в ядро Хромиума, организует дорогущие саммиты, выкладывает уроки на своём канале и пр. Зачем ему ещё один только клиентский фреймворк со сложной экосистемой для сборки, тестирования и малым количеством поддерживаемых браузеров, когда уже есть более мощный Angular с его огромным сообществом, большим выбором языков: JavaScript, TypeScript или Dart? Всё дело в нативе. Тогда как остальные React, Vue, Ember всё больше усложняют разработку, требуют переучиваться на новые технологии каждый год, цепляя различные шаблонизаторы, новые типы, не забывая придумывать различные способы оптимизации, Polymer уже сегодня использует возможности веб-платформы для всего этого. Polymer из коробки даёт возможность загружать любые ресурсы через link rel=import, элегантно описывать dom-module, легко стилизовывать ShadowDOM, управлять данными через MV* с помощью привычных паттернов: observers, data-bindings, event-changing. Плюс содержит утилиты вроде консольного тестирования, склейки всех модулей в один бандл, бабелифирования. Но самое хорошее, что без этих утилит можно обойтись, чего не скажешь, например, про JSX, который без правильно настроенного webpack-конфига не запустить.
В Polymer всё является элементами такими же, какими являются HTMLpElement или HTMLButtonElement. Именно поэтому ваш новенький, только что созданный HTMLMyBestElement наследует все возможности стандартного HTMLElement. Это совершенно никак не противоречит описанию HTML, огрызком всеми ненавидимого за сложность стандарта XML. Этим Polymer не ограничивается и идёт дальше продвигать использование декларативного стиля вместо популярной сегодня парадигмы функционального описания модели, достигая большей читаемости в отличие от последней. Недостатком такого формата является присущая всем XML подобным языкам сложность проектирования и более сложная отладка Data-Flow. В этом можно убедиться, представив будто ты пишешь на SVG бизнес-логику:
<text id="textElement" x="50%" text-anchor="middle" y="50%" dy="0" fill="url(#pattern)" font-size="48px">TEXT</text>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0">
<stop offset="0%" style="stop-color:#FF512F;"/>
<stop offset="25%" style="stop-color:#792042;"/>
<stop offset="50%" style="stop-color:#F09819;"/>
<stop offset="75%" style="stop-color:#a93279;"/>
<stop offset="100%" style="stop-color:#FF512F;"/>
</linearGradient>
<pattern id="pattern" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="150%" height="100%" fill="url(#gradient)">
<animate attributeType="XML" attributeName="x" from="0" to="150%" dur="7s" repeatCount="indefinite"/>
</rect>
<rect x="-150%" y="0" width="150%" height="100%" fill="url(#gradient)">
<animate attributeType="XML" attributeName="x" from="-150%" to="0" dur="7s" repeatCount="indefinite"/>
</rect>
</pattern>
</defs>Только вместо простеньких rect, описываешь ajax фильтрацию и сортировку. Ребята из Google сообразили что делать с нуля долго и взялись за собственную реализацию. Так появились IronElements, с их помощью можно заложить прочный фундамент. PaperElements создан на основе Material Design. AppElements это компоненты с роутингом, скроллом и прочие ништяки от сторонних разработчиков.
XML синтаксис многих пугает, но давайте начистоту, среднестатистический кодер скорее поймёт этот код на A-Frame чем это код на THREE.js.
Садясь за новый проект, написанный на новом модном фреймворке, я сначала матерюсь, потом привыкаю. Когда я беру заброшенные проекты 2-3 летней давности, запустить их с полпинка редко представляется возможным. Npm-зависимости, мейкфайлы работающие только на определенной ОС, вебпаки запускающиеся только на какой-то конкретной версии ноды и тому подобные вещи довольно распространенная ситуация. В этом плане задача которую решает Polymer стоит выше модных сегодня фреймфорков. Их задача — сделать проект запускаемым для разработчиков всегда, как в старые добрые HTML4 годы.
