#custom_elements — Public Fediverse posts

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 — серьезные проблемы

На днях, я опубликовал новость о выходе новой версии 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

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

[Перевод] Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

Это вторая статья из цикла переводов о веб-разработке на чистых (ванильных) технологиях — без фреймворков и сторонних инструментов, только HTML, CSS и JavaScript. В первой части мы обсудили, почему такой подход может быть разумной альтернативой современным фреймворкам и рассмотрели использование веб-компонентов в качестве базовых строительных блоков для создания более сложных примитивов. В этот раз поговорим про стилизацию, а также деплой компонентов в продакшен без использования сборщиков, фреймворков или серверной логики.

https://habr.com/ru/companies/ruvds/articles/910734/

#ruvds_переводы #вебкомпоненты #custom_elements #shadow_dom #html_шаблон

[Перевод] Веб-разработка на ванильном HTML, CSS и JavaScript

В этой серии статей мы расскажем, как выполнять веб-разработку исключительно на ванильных технологиях. Ни инструментов, ни фреймворков, лишь HTML, CSS и JavaScript. Современные фреймворки веб-разработки обладают мощными возможностями для быстрой разработки хорошо структурированных веб-приложений, поэтому они стоят изучения. Однако за эту богатую функциональность приходится расплачиваться сложностью фреймворков и инструментария, а для обеспечения безопасности и актуальности проектов часто требуется регулярная поддержка. Выбрав ванильный стиль веб-разработки, мы обмениваем кратковременное удобство на такие долговременные преимущества, как простота и практически нулевая поддержка. Такой подход возможен благодаря современному уровню развития браузеров, обеспечивающих превосходную поддержку веб-стандартов.

https://habr.com/ru/companies/ruvds/articles/909390/

#ruvds_переводы #вебкомпоненты #custom_elements #shadow_dom #html_шаблон

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

Привет Хабр! Меня зовут Алекс, и я автор фронтенд-библиотеки для создания 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

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

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

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

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