А по факту на 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.
Я об этом подробную статью написал.
И Вам спасибо за статью! Интересное и оправданное мнение — в первой версии стандарт действительно серьезно изменился.
Я видел, что Vaadin предлагают свои компоненты чтобы писать приложения на Java. Но они, конечно, имеют ввиду PWA, а не нативные приложения
Ну почему же? Большинство примеров в статье действительно для lit-element, но это только для того, чтобы они были короче и нагляднее.
Согласитесь, расширение функционала компонентов можно делать как для базовых классов, вроде lit-element, так и для всех прочих классов. Как в примере с оберткой withForm() для HTMLFormElement, хотелось показать, что компоненты высшего порядка — это фича не только фреймворков, и можно ее использовать для кастомных и нативных элементов, потому что это классы. Примеры HOC'ов формы и коннектора redux будут работать с обычными веб-компонентами — в них нет привязки к lit-element.
Расширение наблюдаемых свойств тоже легко ложится на кастомные элементы с их get observedAttributes(). А расширять отображение можно обращаясь к функции рендеринга, если у вас имеется какая-либо ее реализация в расширяемом компоненте. И это не обязательно lit-element.
Размер бандла нам удалось сократить в 2 раза, потому что проект небольшим. Конечно, чем больше проект, тем меньше было бы это соотношение. Для оценки скорости загрузки наш автоматизатор делал нагрузочное тестирование — ее ускорили в среднем в 2-3 раза.
Мы использовали CSS-modules.
И Вам спасибо за статью! Интересное и оправданное мнение — в первой версии стандарт действительно серьезно изменился.