Сложности
При работе на фронтенд проекте использующий Polymer.js я столкнулся со следующими сложностями.
Ад элементов
Элементы сложно масштабируются по причине запутанности. Нельзя легко расширить, такие сложные элементы как Textarea.
Ад модулей
Присутствие Bower негативно сказывается на зависимостях модулей. Усугубляет ситуацию то, что часть бэкэнд кода вынесена на npm.
Ад git submodule
Сабмодули усложняют сборку проекта с внедрением фич.
Ад сборки
Polymer использует инструменты для вулканизации HTML - vulcanization.js и минификации. Кроме того, для тестов требуется WCT, который плохо работает под прокси.
Различное описание стилей
Polymer использует свой способ написания CSS - PolymerCSS, что утяжеляет разработку, если используется Stylus.
Отсутствие JS модульности
В Polymer.js все делается через глобальные объекты через импорт HTML файла.
Не используется вся мощь современной веб платформы
Все еще тяжелые полифилы для работы: Custom Elements, Shadow DOM, WebAnimation, Shady DOM (для браузеров которые не поддерживают Shadow DOM).
Ад Observers
Наличие обсерверов затрудняет отладку приложения.
Так должно быть!
Легковестность
Инструменты должны быть просты в случаях их поддержки или форка.
Популярность
Сложности найти разработчиков, которые знакомы с последними новшествами веб платформы: Shadow DOM, Mutation Observers, CSS Next, ES7. Поэтому их обучение должно быть максимально быстрым. Сейчас особо популярен React подход функционального рендеринга основанного на состояниях. Так же, ESM более очевиден для программистов в отличие от HTML imports.
Легкое тестирование элементов в «замкнутой среде»
Это значит изолированная разработка отдельного элемента, например datepicker. Так, чтобы при обычной стилизации элемента не требовалось запускать весь проект. Это экономит время разработчиков путем распределения задач между составами программистов-дизайнеров-верстальщиков.
Предпочитаемые инструменты
Беглый разбор вопросов на Stack Overflow и дискуссий на GitHub показал, что особо популярные инструменты: Vue.js, Angular2, React.
Polymer 2 все еще находится в сырой Alpha, к тому же все больше завязанный на инструменты от Google (сборщик, минификатор, вулканизатор, браузер и пр.).
Vue по-сути разрабатывается на энтузиазме одного человека Evan You.
React сильно завязывается на инфраструктуру Facebook, а постоянно появляющиеся state-машины от сторонних разработчиков, которые предлагают свои паттерны взамен Flux, лишь подтверждает это. При всех очевидных плюсах React.js есть два существенных минуса: удорожание разработки (React сложен и программисты и требуют больше трат, приходится переделывать существующее решение заново, только на React) и избегание открытых стандартов Веб платформы (Virtual DOM, JSX, CSS Modules).
Angular 2 переосмысливает идеи Angular.js, предоставляя один большой кусок готового фреймворка. В нем есть все необходимое для построение большого SPA. Но он не такой гибкий и годится скорее всего для долгосрочных работ энтерпрайз решений, которые не так озабочены стилизацией, главное чтобы работало везде, быстро и относительно недорого.
Мое решение - Skate.js
Skate.js лишен всех недостатков обозначенных выше. Он основан на нативных веб-компонентах в отличие от виртуального дома. В отличие от Polymer, он сфокусирован на функциональный рендеринг как React.js. Создатели - это профессионалы из Atlassian, знакомые всем своим Bitbucket. Он мало весит, быстр, работает на всех популярных браузерах, не требует обязательного TypeScript и независим от вендорных инструментов. В него легко внедрять React компоненты, так и нативные Custom Elements. Благодаря этому достаточно просто (но не легко) перевести текущее приложение с Polymer на Skate.
Язык TypeScript
Из языков программирования стоит выделить продвигающийся сегодня Flow и TypeScript.
В целом они решают разные вещи, но то что Flow написан хипстерами на Ocaml и Facebook не оставляет ему шансов на использование в проекте. TypeScript написан умными программистами из Microsoft. Его лид как-то написал Delphi и C# и использует много наработанных им фич.
Главное использовать TypeScript 2, потому что он использует стандарты ES7. Транслировать нужно в ES6, затем проходиться Babel, который будет даунгрейдить до ES5 и добавлять нужные полифиллы.
Как я решил проблемы
Elements
- грамотно подойти к созданию каждого нового элемента, не нужно создавать элемент «на будущее», нужно описать все элементы которые есть и стараться наследовать старые наработки.
Modules
- вышел новый Yarn. Им можно заменить и bower и npm. Bower не решает циклические зависимости, а npm не имеет ни лок-файла, ни адекватной модерации. Перед тем как добавить новые сторонние модули нужно подумать, чтобы не добавлять «jquery просто для одной либы или вызова $.params).
Git submodule
- перенести все сабмодули в проект.
Build
- typescript + babel + webpack + gulp.
Различное описание стилей
- писать стили через Stylus. Он быстрый, мощный и с приятными Python пробелами. Использовать только Stylus + спеку CSS Modules. Соответственно настроить Webpack плагин, который будет преобразовывать Stylus для использования в JSX Shadow DOM.
Нет модульности
- используя TypeScript создаем JavaScript модули которые посредством Babel в конечном итоге формируют бандлы.
Не используется мощь современной Веб Платформы
- к сожалению, вся мощь веб платформы возможна только на последних браузерах. Без полифилла webcomponents.js не обойтись.
Observers
- реактивность нужна, но как показала практика реактивность, такая какая она есть в полимере, многих оставляет в неосиляторах. Могу лишь предложить rxjs от Netflix или Redux.
