Фреймворки дают клиентский роутинг из коробки. У HTML и Web Components его нет. Если сайт уже отдаёт полные страницы, а клиентская навигация нужна только для части разделов, переписывать всё на фреймворк незачем.
Рубрика «web components»
Страница, которая не моргает: SPA-роутинг для HTML и Web Components
2026-08-18 в 8:31, admin, рубрики: Aura Router, MPA, Progressive enhancement, SPA, web components, веб-компоненты, клиентская навигацияПро Shadow DOM
2020-09-06 в 16:23, admin, рубрики: csp, custom elements, dom api, javascript, shadow dom, SPA, web components, web standards, браузеры, Разработка веб-сайтов
Всем привет!
Продолжаю свой цикл публикаций о группе стандартов Web Components. Моя цель - сформировать реалистичные ожидания от данного набора технологий, а также, вместе с вами, прийти к более четкому пониманию того, где их не стоит применять, и где, напротив, ничего лучше еще не придумано. На этот раз, предлагаю подробнее остановится на Shadow DOM.
Сила PWA: Система видеонаблюдения с нейросетью в 300 строк JS-кода
2020-03-12 в 10:13, admin, рубрики: cctv, Google API, javascript, ml, pwa, web components, машинное обучение, Разработка веб-сайтов, разработка мобильных приложенийПривет!
Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.
Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.
Проблемы возникли следующие:
Читать полностью »
Конец эпохи Trident
2020-01-28 в 12:04, admin, рубрики: activex, ajax, chromium, css, CSS Expressions, CSS Houdini, CSS Transforms, dom, edge, Embedded OpenType, EOT, gmail, gzip, html, HTML Components, html5, internet explorer 10, Internet Explorer 5.0, javascript, MHTML, MicroType Express, MSXML, Outlook Web Access, ramjet, SMIL, Trident, Viewlink, vml, web components, winjs, woff, XML, XMLHTTP, браузеры, компонентизация, Разработка веб-сайтовtl;dr Я бы сказал, что Microsoft на несколько световых лет опередила всех в разработке инструментов для проектирования сложных веб-сайтов. Сейчас эти технологии изобретают заново на руинах погибшей цивилизации.
Когда я был ребёнком, меня всегда завораживали истории о древних цивилизациях. Я зачитывался книгами об Атлантиде, об истории открытия Трои Генрихом Шлиманом, о греках, римлянах, империи инков и Древнем Египте. И меня всегда восхищали их продвинутые знания в области астрономии, математики и медицины, их невероятные достижения, возведение этих огромных монументов и построение высокофункциональных социальных систем. Что ещё более невероятно, так это то, что всё это было сделано за тысячи лет до появления христианской культуры!
Однако все эти высокоразвитые цивилизации в конце концов исчезли. Некоторые просто тихо вымерли, других вытеснили цивилизациями с лучшим вооружением. В большинстве случаев достижения побеждённых не передавались доминирующей группе, никак не обогащая победителей. Они просто исчезали. Что я всегда считал неудачным развитием событием.
Читать полностью »
9 библиотек веб-компонентов
2019-11-15 в 20:15, admin, рубрики: edisonsoftware, javascript, web components, Блог компании Edison, веб-дизайн, интерфейсы, разработка веб-приложений, Разработка веб-сайтов1. Material components web
Обычно заголовок «Material» размещает библиотеку компонентов пользовательского интерфейса прямо наверху рейтингов по количеству звездочек и загрузок. Веб-библиотека Google Material-components — это версия веб-компонента библиотеки Material-UI. Пока эти веб-компоненты еще находятся в стадии разработки, они могут быть включены в широкий спектр контекстов и сред.
В последнее время, как я уже отмечал в предыдущей статье, вполне себе активно ведутся разработки WebComponents оберток для популярных фреймворков позволяющий использовать их через браузерное API. Это значит, что если вы хотите использовать готовые компоненты созданные на том или ином фреймворке, то вам не обязательно разворачивать проект и собирать его. Также это значит, что вы можете использовать разработки на разных фреймворках связывая их между собой посредством взаимодействия через API браузера.
Не очень давно я пытался найти приличный грид для веб-компонент, на тот момент такового, полноценного, но при том не обязывающего использовать какой-либо фреймворк, особенно если он представляет собой что-то типа Polymer не оказалось. В недалеком прошлом у меня был до того достаточно успешный опыт с material/cdk. Тогда мне относительно легко удавалось серьезно кастомизировать фильтры и пейджер для таблицы, локализовать подсказки и все это без переписывания библиотечного кода или мрачных хуков, использовав механизмы переопределения. На момент рассмотрения оказалось, что биндингов конкретно для компонента таблицы еще не успели сделать, но вот пару недель назад я заметил, что в репозитории на эту тему что-то появилось и решил в рамках эксперимента попробовать подключить их как веб-компоненты.
Читать полностью »
Быстрый старт с WebComponents
2019-07-17 в 11:21, admin, рубрики: javascript, mocha, quickstart, web componentsВеб-компоненты это набор стандартов определяющих программные интерфейсы для организации компонентной архитектуры. Все они реализованы в современных версиях браузеров, т.е. не требуют подключения библиотек или транспиляторов кода, однако, если нужна совместимость например с Internet Explorer 11, то и библиотеки и транспиляторы использовать видимо все-таки придется.
Данная статья ориентирована на начальный уровень подготовки и разработчиков имеющих опыт с тем или иным фронтенд фреймворком, но возможно, благодаря некоторым фокусам, будет интересна и многоопытным специалистам.
Все эксперименты приводимые далее проверялись в Chrome и Firefox может быть даже не самых новых версий.
Читать полностью »
Сборка библиотеки angular-компонентов в виде веб-компонентов
2019-06-17 в 16:10, admin, рубрики: angular, Angular Elements, TypeScript, web components, библиотека компонентов, Блог компании Tinkoff.ru, веб-компоненты, Разработка веб-сайтовПро Angular Elements сейчас пишут много статей и регулярно читают доклады. Мол, больше не нужно разворачивать несколько полноценных ангуляров — достаточно собрать веб-компоненты и использовать их на своей странице.
Но, как правило, эти материалы ограничиваются рассмотрением довольно утопичной ситуации: мы делаем отдельный проект, создаем angular-компонент, настраиваем проект на сборку Elements и, наконец, компилируем несколько JS-файлов, подключение которых к обычной странице даст нам необходимый результат. Ура, компонент работает!..
На практике же возникает потребность вытащить несколько компонентов из готового работающего angular-проекта, да еще желательно так, чтобы не влиять на его текущую разработку и использование. Эта статья получилась как раз благодаря одной из таких ситуаций: я хотел не просто собрать отдельные элементы проекта, а сделать процесс компиляции целой UI-библиотеки на Angular в набор файлов с нативными веб-компонентами.
Читать полностью »
Внедряем Angular компоненты в React, Vue и даже JQuery если хотите
2018-12-10 в 12:15, admin, рубрики: angular, React, ReactJS, vue, vuejs, web componentsЕсли вы нашли крутой компонент в npm, но она с приставкой ng, ngx, angular и так далее, то не стоит расстраиваться по этому поводу. Есть много решений, чтобы этот компонент оказался у вас. В данной статье рассмотрим решение, которое официально поддерживается Angular Team, а именно - Angular Elements.
Для практики выберем любой компонент из Awesome Angular.
Читать полностью »
React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты
2016-12-05 в 4:59, admin, рубрики: angular, components, html, javascript, jquery, preact, React, ReactJS, web components, Блог компании DevExpress, будущее, Программирование
Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать
- как React-компонент;
- как Preact-компонент;
- как Angular-компонент;
- как Web Component;
- как jQuery функцию для рендеринга в DOMElement;
- как нативную функцию для рендеринга в DOMElement.
Зачем и кому это нужно
Мир JavaScript-разработки очень фрагментирован. Есть десятки популярных фреймворков, большая часть из которых абсолютно несовместима друг с другом. В таких условиях разработчики JavaScript-компонентов и библиотек, выбирая один конкретный фреймворк, автоматически отказываются от очень большой аудитории, которая данный фреймворк не использует. Это серьезная проблема, и в статье предложено ее решение.