Reactive Web Components: реактивность без фреймворка

После работы с React/Vue/Angular захотелось вернуться к основам, но с современными возможностями. Сделал RWC — библиотеку реактивных веб-компонентов. Ключевые преимущества: • Совместимость — компоненты работают в любом проекте • Производительность (сигналы для реактивности) — точечные обновления DOM • Простота — минимальный API, легко обучать команду • TypeScript-first — типизация из коробки без костылей Компоненты, написанные на RWC, можно встроить в React, Vue, Angular или даже legacy jQuery-проект. Никакого vendor lock-in. Библиотека весит <10KB, компоненты работают в любом проекте.

https://habr.com/ru/articles/968384/

#javascript #custom_elements #typescript #web_components #signal

Slider с использованием Web Components + Shadow Dom

Пишем Slider с Web Components В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции: - Работу с Shadow DOM для изоляции стилей и структуры - Использование слотов для композиции контента - Реакцию на атрибуты для настройки поведения компонента - Организацию жизненного цикла через connectedCallback

https://habr.com/ru/articles/964180/

#Web_Components #Shadow_Dom #Declarative_Shadow_Dom

Гайд по Веб Компонентам (Web Components)

Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например, обработка этапов: «компонент присоединился», «компонент обновился» и «компонент был удалён». Это база, но часто существует и множество других хуков. Раньше для работы с этой парадигмой мы были вынуждены использовать React, Vue или аналогичные фреймворки. Однако сегодня можно обойтись без дополнительных библиотек и обязательной сложной сборки, потому что компоненты доступны «из коробки» в современных браузерах. Да, я говорю о Веб-компонентах . Если быть точнее, о Пользовательских элементах (Custom Elements) , поскольку «Веб-компоненты» — это скорее набор стандартных технологий, позволяющих создавать эти самые элементы.

https://habr.com/ru/articles/962956/

#web_components #веб_компоненты

The more I work on #ONI, which is basically a web components frontend for an as basic as possible #ActivityPub client to server service, the more I realize I'm just not built for JavaScript programming.

Despite having put in the hours every day for a number of months, the whole Promise paradigm just doesn't seem to click for me.

Now I'm struggling to create a throbber component (easy) while fetches happen in the background (easy) and then have it replaced (not easy) by actual content (easy).

😱 Gaaah!!!

#frontend #web_components #litjs #JavasScript

I’m still sitting here and waiting for everyone else to admit, that Web components was a mistake 🐱☕

#lang_en #web #browsers #Web_components

А что, так можно было?

Привет Хабр! Меня зовут Алекс, и я автор фронтенд-библиотеки для создания UI-компонентов-агностиков - Symbiote.js . Я не единственный разработчик, но главный контрибьютор и тот, кто отвечает за концепцию, развитие, документацию, деврел, DX все остальное. Мейнтейнер то есть. Всем этим я занимаюсь в свободное от другой работы время, на которой я фуллстек, R&D-инженер и техлид. Сегодня, я бы хотел рассказать о том, как появился Симбиот, и почему он вообще существует, при наличии огромного зоопарка библиотек и фреймворков для фронтенда, с куда более значительной аудиторией и поддержкой от крупных IT-компаний. Ведь мы, инженеры, очень НЕ любим, когда вокруг нас начинают плодиться лишние сущности, и сразу начинаем угрожающе размахивать бритвой Оккама. Верно? (хитро прищурился)

https://habr.com/ru/articles/846396/

#web_components #symbiotejs #javascript #custom_elements #shadow_dom #react #redux #nextjs #web_developement #frontend

HTML-теги с искусственным интеллектом

Всем привет! Помните череду недавних анонсов от IT-гигантов, о различном ИИ-функционале, внедренном во все, что только можно? Среди этих анонсов, например, были помощники в написании текстов писем и сообщений для почтовых и других сервисов. Эти помощники могут проверить вас на ошибки, перевести текст на другой язык, поменять тональность и настроение текста, сделать его более кратким, либо, напротив, дополнить. На мой скромный взгляд, сейчас складывается такая ситуация, что создавать собственные ИИ-сервисы общего назначения очень рискованно, ибо крупным компаниям не составит труда воспроизвести ваш функционал, имея доступ к более значительным ресурсам, как вычислительным, так и в плане данных. Но и у нас, независимых разработчиков и энтузиастов, есть свои преимущества: мы можем создавать решения на уровне библиотек и компонентов, которые будут способны размыть и скорректировать разницу в конкурентных преимуществах, между гигантами и мелкими стартапами. Итак, в этом материале, я предлагаю вам вместе со мной создать умный HTML-тег - текстовое поле, которое сможет помогать пользователю в настройке введенного текста. Этот тег можно будет использовать на любом сайте, в любом веб-приложении, созданном с помощью любого современного фреймворка, или даже, в простом статическом HTML-файле.

https://habr.com/ru/articles/842044/

#artificial_intelligence #html #web_components #chatgpt #javascript_library #symbiotejs #widgets #llm #api #generative_models

“Web components” is a spec for big corps. Your website is not that complex. If it is, maybe it should not be.

#lang_en #web #html #thoughts #web_components

Как подружить веб-компоненты и JS-фреймворки

Всем привет, я Роман Троицкий. Очень люблю веб-разработку; участвовал в проектах, попавших на Awwwards, Tagline и GoldenSite; помогаю организовывать митап Moscow CSS; участвовал в записи и разработке курса по фронтенду для Skillbox. На примере своего проекта я расскажу о сложившейся с Web Components ситуации, опишу их достоинства и недостатки.

https://habr.com/ru/companies/sberbank/articles/834998/

#вебкомпоненты #web_components

Web components как альтернатива iframe на примере Angular-компонентов

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

https://habr.com/ru/companies/tbank/articles/828940/

#web_components #angular #typescript #custom_elements #вебприложения #webразработка #angular_elements

Рендерим таблицы с помощью Symbiote.js

В этой статье, я хочу показать базовые приемы работы с HTML-таблицами при использовании библиотеки Symbiote.js и раскрыть на практике некоторые ее важные особенности.

https://habr.com/ru/articles/811489/

#javascript #web_components #shadow_dom #css #html #Symbiotejs #import_map #dom #framework #open_source

Release Timeline — визуализация GitHub релизов в вашей документации

Данное приложение было создано для красивого и удобного показа изменений во Vue 3 проекте в его документации на VitePress. После оно было сделано универсальным, и может быть подключено в любой HTML странице как Web component или микрофронтенд. Попробовать - https://vuesence.github.io/release-timeline/ . Слева вверху можно указать любой публичный репозиторий.

https://habr.com/ru/articles/792822/

#github #release #timeline #vitepress #web_components

Web components – a way to JavaScript slavery :blobcatpeeksad:

#lang_en #web #web_components