Проблемы в текущем Polymer приложении

Elements HELL
   Элементы сложно масштабируются по причине запутанности. Например нельзя расширить BNM-TEXTAREA в ACL-TEXTAREA по причине того что ACL-TEXTAREA не расширяет BNM-TEXTAREA
Modules HELL
   Bower_Components и npm_modules
Git submodule HELL
   Submodules усложняют сборку и внедрение новых фич с поддержанием старых
Build HELL
   WCT, Vulcanization, JS minification with Map
Различное описание стилей
   Присутствие Stylus и PolymerCSS
   Не используется и Stylus там где можно
Нет модульности
   все делается через глобальные объекты
Не используется мощь современной Веб Платформы
   Все еще тяжелые полифилы для работы Custom Elements, Shadom DOM
   WebAnimations API, Shady DOM (вместо Shadow DOM API stage 0 (уже 1)) и пр.
Observers HELL

Проблемы?

Легковесность
В рамках работы в бифите оказывается необходимым придумывание не мейнстримных «велосипедов». Хочется чтобы используемые инструменты были просты в случаях их поддержки или форка.

Популярность решений
Сложно найти разработчиков которые знакомы с последними новшевствами Веб платформы, такими как стилизация Shadow DOM элементов, Mutation Observers, CSS Next, ES7. Поэтому их обучение должно быть максимально быстрым. Сейчас особо популярен React подход функционального рендеринга основанного на состояниях. Так же JavaScript imports более очевидны для программистов в отличие от HTML imports.

Легкое тестирование элементов в «замкнутой среде»
Это значит изолированная разработка отдельного элемента, например datepicker. Так чтобы при задаче обычной стилизации элемента не требовалось запускать весь проект. Это экономит время разработчиков путем распределения задач между составами программистов-дизайнеров-верстальщиков.

Общее видение архитектуры

Архитектура?

Предпочитаемые инструменты

Беглый разбор вопросов на SO и дискуссий на GH показал что особо популярные инструменты, такие как Vue.js, Angular2, React, etc

Polymer2 все еще находится в сырой Alpha, к тому же все больше завязанный на инструменты от Google (сборщик, минификатор, вулканизатор, браузер и пр.)

Vue по сути разрабатывается на энтузиазме одного чувака Evan You

React сильно завязывается на инфраструктуру Facebook, а постоянно появляющиеся state-машины от сторонних разработчиков которые предлагают свои паттерны взамен Flux лишь подтверждает это. При всех очевидных плюсах React.js есть два существенных минуса: удорожание разработки (React сложен и программисты требуют больше трат, приходится переделывать существующее решение заново, только React) и избегание открытых стандартов Веб платформы (Virtual DOM, JSX, CSS Modules)

Angular2 переосмысливает идеи Angular1 предоставляя один большой кусок готового фреймворка. В нем есть все необходимое для построение большого SPA, он не такой гибкий, сложнее прострелить колено и годится скорее всего для долгосрочных работ энтерпрайз решений, которые не так озабочены стилизацией, главное чтобы работало везде, быстро и относительно недорого.

Skate.js лишен всех недостатков обозначенных выше. Он основан на нативных веб-компонентах в отличие от виртуального дома. В отличие от Polymer сфокусирован на функциональный рендеринг как React.js. Создатель скейта это ребята из Atlassian знакомые всем своим Bitbucket. Он мало весит, быстр, работает на всех популярных браузерах, не требует обязательного TypeScript и независим от вендорных инструментов, в него легко внедрять React компоненты, так и нативные Custom Elements. Благодаря этому достаточно просто (но не легко) перевести текущее приложение с Polymer на Skate.

Skate.js

TypeScript

Из ЯП стоит выделить продвигающийся сегодня Flow и TypeScript.

В целом они решают разные вещи, но то что Flow написан хипстерами на Ocaml и Facebook не оставляет ему шансов на использование в проекте. TypeScript написан умными ребзями из Microsoft. Его лид как-то написал Delphi и C# и использует много наработанных им фич.

Главное использовать TypeScript 2 потому что он использует стандарты ES6, все ES7 и такой весь из себя ESNext.
Транслировать нужно в ES6, затем проходиться Babel который будет даунгрейдить до ES5 и добавлять полифиллы.

WIN

JSX

Из ЯП стоит выделить продвигающийся сегодня Flow и TypeScript.

Как решать проблемы?

Elements HELL => Нужно грамотно подойти к созданию каждого нового элемента, не нужно создавать элемент «на будущее», нужно описать все элементы которые есть и стараться наследовать старые наработки повторно их переиспользуя.

Modules HELL => Вышел новый Yarn. Им можно заменить и bower и npm. С ними отдельная история, bower не решает циклические зависимости, а npm не имеет ни лок-файла, ни адекватной модерации. Перед тем как добавить новые сторонние модули нужно подумать, чтобы не добавлять «jquery просто для одной либы или вызова $.params)

Git submodule HELL => Перенести все сабмодули в проект.

Build HELL => Typescript build + babel + webpack + gulp решают

Различное описание стилей => Писать стили лучше через Stylus. Он быстрый, мощный и с приятными Python пробелами.
Использовать только Stylus + спеку CSS Modules. Соответственно настроить Webpack плагин который будет преобразовывать Stylus для использования в JSX Shadow DOM.

Нет модульности => Используя TypeScript создаем JavaScript модули которые посредством Babel в конечном итоге формируют бандлы

Не используется мощь современной Веб Платформы => К сожалению вся мощь веб платформы возможна только на последних браузерах. Без полифилла webcomponents.js не обойтись

Observers HELL => Реактивность нужна. Как показала практика реактивность такая какая она есть в полимере многих оставляет в неосиляторах. Могу лишь предложить rxjs от Netflix или Redux.