Комментарии 7
Я, собственно прошел такой же путь — взял вебкомпоненты, выбирал между LitElement и Stencil в пользу LitElement, потому что jsx всё-таки не хотелось уже. Поковыряв полифиллы и ограничения, отказался от Shadow DOM, потому что рано еще. И в конце концов вкрутил вот это, чтоб получить слоты без теневого DOM. Что удивительно — всё очень прочно сложилось в единый пазл и заработало, несмотря на очевидную хаковость идеи мониторить мутации DOM ради функционала, похожего на <slot>. Потом еще сверху MobX добавил, чтоб поменьше сидеть расписывать проброс данных через пропсы-эвенты.
Веб-компоненты в реальном проекте
А по факту на 90% статья про API lit-element. Текст интересный и спасибо вам за труд, но большинство показанных вами техник расширения компонентов работают только для lit-element.
Проект был небольшим, но требовательным к размеру бандла
И какой в итоге получился размер бандла? Мониторите ли как-нибудь скорость загрузки?
Shadow DOM определенно будет полезен для ряда случаев, но обоснованность его повсеместного применения вызывает сомнения.
Поддержу это заявление, ShadowDOM реально иногда больше вредит чем помогает. Но как вы организуете свои стили без него? BEM, CSS-modules, или что-то ещё?
Ходят слухи, что Apple возможно пересмотрит такое поведение, но в 13 версии Safari и iOS все остается как есть.
Лучше бы свое поведение пересмотрел Гугл, и перестал пользоваться своим монопольным положением и проталкивать в стандарт вопреки разработчикам других браузеров. Я об этом подробную статью написал.
А по факту на 90% статья про API lit-element. Текст интересный и спасибо вам за труд, но большинство показанных вами техник расширения компонентов работают только для lit-element.
Ну почему же? Большинство примеров в статье действительно для lit-element, но это только для того, чтобы они были короче и нагляднее.
Согласитесь, расширение функционала компонентов можно делать как для базовых классов, вроде lit-element, так и для всех прочих классов. Как в примере с оберткой withForm() для HTMLFormElement, хотелось показать, что компоненты высшего порядка — это фича не только фреймворков, и можно ее использовать для кастомных и нативных элементов, потому что это классы. Примеры HOC'ов формы и коннектора redux будут работать с обычными веб-компонентами — в них нет привязки к lit-element.
Расширение наблюдаемых свойств тоже легко ложится на кастомные элементы с их get observedAttributes(). А расширять отображение можно обращаясь к функции рендеринга, если у вас имеется какая-либо ее реализация в расширяемом компоненте. И это не обязательно lit-element.
И какой в итоге получился размер бандла?
Размер бандла нам удалось сократить в 2 раза, потому что проект небольшим. Конечно, чем больше проект, тем меньше было бы это соотношение. Для оценки скорости загрузки наш автоматизатор делал нагрузочное тестирование — ее ускорили в среднем в 2-3 раза.
BEM, CSS-modules, или что-то ещё?
Мы использовали CSS-modules.
Я об этом подробную статью написал.
И Вам спасибо за статью! Интересное и оправданное мнение — в первой версии стандарт действительно серьезно изменился.
Ну почему же? Большинство примеров в статье действительно для lit-element, но это только для того, чтобы они были короче и нагляднее.
Вот именно, что за этим лесом кода не видно, что именно вы хотели показать. Может быть, кто-то другой сможет, но я затрудняюсь найти применение этим приемам в ванильном JS. Возможно, все дело в том, что почти в каждом примере есть шаблон lit-html
Размер бандла нам удалось сократить в 2 раза
Без абсолютных цифр не понятно. Может между сокращением 20Кб -> 10Kb и 500Kb -> 250Kb – большая разница. Кроме того, в 2 раза по сравнению с чем? У вас была предыдущая версия проекта? А на чем она была?
В названии статьи «веб-компоненты» можно было бы заменить на «кастомные элементы» — в итоге это стало единственным API, которое я использовал в проекте, и самое проработанное из всей технологии.
Спасибо за статью. Хочу вас обрадовать, вы фактически использовали весь стандарт Web components, кроме Shadow DOM. Тот же HTML Template используется внутри lit-html, который является шаблонизатором LitElement. Так что все ок. )))
Еще предлагют WebView использовать. Больше я ничего не нашел. Есть ли вообще какое-то движение в этом вопросе, может кто-то знает?
Веб-компоненты в реальном проекте