Привет .
Меня зовут Михаил, более 10 лет разрабатываю интернет-проекты: от сайтов до систем автоматизации.

Привет.

Я давно слышал о веб-компонентах (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.