Symbiote.js: суперспособности для веб-компонентов

Смысл создания и использования новых библиотек и фреймворков в том, чтобы решить задачи, которые не были решены ранее. Либо, в том, чтобы решить какую-либо задачу более эффективно, чем это уже было сделано кем-то. Сегодня мы начнем разговор о задачах, которые можно решать с помощью Symbiote.js , и делать это гораздо проще и элегантнее, чем с другими фреймворками.

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

#custom_elements #shadow_dom #symbiotejs #webcomponents #композиция #работа_с_данными

Что всё таки не так с веб компонентами

Господа, продолжаем разбиратся в тонкостях веб компонент. Сделал тут бенч - сравнениe фреймворков ( $mol/lit/symbiot ) по todomcv. Вроде говорим об одном, а бенч о другом, разве не так ? Ан-нет, что бы разобраться с веб компонентами нужны фреймворки которые ставят их во главу угла, те, кто "сделал на них ставку". Вот что мне удалось понять: Первое. Память: 124 байта на веб-компонент, и 16 байт на JS object. Разница на порядок, это много, и без виртуализации интерфейс скорее всего будет лагать Что не так то опять ?)

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

#shadow_dom #web_components #custom_elements #lit #symbiotejs #$mol

Что не так с веб-компонентами?

Если кратко - да все с ними ТАК . Это замечательный набор современных браузерных технологий, для решения реальных задач веб-разработки. Веб-компоненты позволяют делать очень многое, более просто и элегантно, чем это было бы без них. А главное, они позволяют, с потрясающей гибкостью, решать задачи “со звездочкой” - те, которые немного выходят за рамки и требуют более творческого подхода от разработчика. Почему-же тогда по Хабру гуляют, кхм… некие одиозные личности (не будем показывать пальцем) и рассказывают нам про то, что веб-компоненты это ужас-ужас и полный провал? Давайте разберемся.

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

#custom_elements #shadow_dom #symbiotejs #web_components #Lit

UUI: Универсальная Пользовательская Дизайн-система для web

Как вырваться из замкнутого круга навязываемых акулами BigTech сомнительных технологий на простор устойчивого развития? Как сделать так, чтобы код внедряемой сейчас Дизайн‑системы — через пару лет опять не превратился в очередную, никому не нужную и максимально не удобную, «тыкву‑легаси»? Как выйти из дурного холивара с модными фреймворками на фронтенде и сделать библиотеку переиспользуемых компонент подходящую сразу для всех технологий и «на века»?))) Ваша команда работает с большим количеством различных недокументированных проектов, основанном на одном визуальном языке? У вашей корпорации есть строгий брендбук и огромное количество клиентских веб‑сервисов написанных на разных фреймворках, которые по факту выглядят немного по‑разному в «одних и тех же мелочах»? Ваши фронты «пишут каждый свой фреймворк для дизайна заново каждый раз на каждом проекте»? Знакомо? UUI спешит к вам на помощь! Мода на технологии все стремительней меняется, а браузер и простой интерфейс в нем остается. Вышел новый модный фреймворк и заказчику хочется проект именно на нем? Да пожалуйста! Легко! Так мы становимся максимально независимы от капризной и накаченной лоббированием индустрии реализуя основную задачу. Поставляя единый гайдлайн повсюду.

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

#litelement #custom_elements #атомарный_дизайн #дизайнсистема #uikit #фреймфорки

Что не так с веб-компонентами?

Здравствуйте, меня зовут Дмитрий Карловский, и я пилил веб-компоненты , когда их ещё не придумали, делал полноценные компоненты на AngularJS, когда там ещё были только директивы, и разработал компоненто-ориентированный фреймворк $mol с инверсией контроля и статической типизацией, когда это ещё не было мейнстримом. Короче, я немного в теме. И сейчас я расскажу вам, почему мы сразу отказались от Web Components и почему у них нет никаких перспектив. ✔ Готов получить сарказм

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

#shadow_dom #custom_elements #web_components

У Symbiote.js — серьезные проблемы

На днях, я опубликовал новость о выходе новой версии UI-библиотеки Symbiote.js, с обзором ее функций и необычной концепции. Я давно пишу на Хабре (и не только) о веб-компонентах и решениях на их основе, и знаю полный набор стандартных сомнений и возражений аудитории. Сегодня, я хотел бы познакомить вас с проблемами и компромиссами, на которые пришлось пойти, но уже от лица автора либы, человека, очень хорошо знающего, что там под капотом, то есть - меня самого.

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

#webcomponents #open_source #ssr #ssg #custom_elements #symbiotejs #shadow_dom #devrel #loose_coupling #architecture

Symbiote.js — изоморфные веб-компоненты (клиент + сервер)

Привет, Хабр! Меня зовут Алекс, и я мейнтейнер Symbiote.js - библиотеки для создания UI-компонентов и изоморфных приложений на самых современных веб-стандартах. Сегодня я расскажу про наше важное мажорное обновление - версию 3.x.

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

#webcomponents #ssr #symbiotejs #frontend #backend #изоморфизм #nodejs #custom_elements #shadow_dom #open_source

Как мы победили утечки памяти в реактивных веб-компонентах (RWC)

Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками

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

#javascript #custom_elements #typescript #web_components #signal #effect

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

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 3

Последняя часть по созданию своего starter-kit. В этой статье мы рассмотрим основные подходы борьбы со сложностью с помощью веб-компонентов. Статья рассчитана на более-менее подготовленных читателей. Материал насыщен ссылками, которые очень желательно изучить.

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

#веб_компоненты #реакт #велосипедостроение #реактивность #стилизация_виджетов #custom_elements