Привет.
Я давно слышал о веб-компонентах (Web Components), но только недавно решил их попробовать.
Попробовать решил на простом и непрактичном проекте с парой форм для создания/изменения сущностей и их списком. Вот ссылка на проект: github.com/mishantrop/webcomponents-hello-world
Почему Web Components — это круто
Во-первых, нативная поддержка в Firefox, Chromium (а значит, и основанных на Chromium) и отчасти Safari.
Мне понравилось чувство свободы от появляющихся каждый год FrontEnd-фреймворков. Собственно, компонентный подход — самое весомое, на чём держатся современные FrontEnd-фреймворки.
Конечно, эти фреймворки содержат в себе много других возможностей из коробки, например, реактивность. Но тут история про то, что механизм компонентов уже заложен в браузер, и уже не нужно тянуть по сети лишние десятки или сотни мегабайт скриптов, делающих это по-своему.
Я уже более 5 лет пользуюсь различными реактивными фреймворками на крупных проектах. Но бывают маленькие задачки, состоящие из 2-3 компонентов, когда просто жалко тянуть туда фреймворк. Не то чтобы от лишних 100-300 кб кто-то пострадает, но веб и так жирный. Заходишь на простой сайт с новостями — а тебе н-на: реакт, околореактовые библиотеки, сторонние виджеты со своим набором фреймворков и всё это под соусом полифиллов.
Я пользуюсь браузерными расширениями, которые по идее работают всегда. Есть простые, есть сложные. Но если абсолютно в каждое пихать фреймворки, то свободной оперативной памяти для непосредственных задач останется уже меньше.
Оба аргумента получились почти про одно и то же, но текст, разбитый на части, проще читать :-)
Во-вторых, удобный жизненный цикл.
Есть механизм, который из коробки отслеживает изменение входных параметров. Он похож на метод componentDidUpdate в React.
Почему Web Components — отстой
Занимаясь проектом на веб-компонентах мне приходилось писать очень много кода (aka бойлерплейта), чтобы решить тривиальные задачки.
Я использовал TypeScript, но даже в этом случае не получалось автоматически проверять, правильное ли я событие навесил на компонент, и правильный ли тип мне вернётся в событии. Решение есть, но очень громоздкое: выносить события в типы и переиспользовать их.
Поиграю в предсказателя
Пару лет назад я был уверен в том, что подобие TypeScript-а появится в EcmaScript. И вот уже появляются предложения (или даже реализации), когда в ванильном коде на JavaScript появляются описания типов, хотя я думал, что до этого чуть дольше.
Уверен, что большой рывок получат фреймворки, основанные на нативных веб-компонентах. Конечно, от нативного там и будут что веб-компоненты, но это уже большой шаг навстречу к лаконичному вебу.
К примеру, далее я хочу изучить Lit.