WebAssembly *

В статье расскажу о PWA‑бенчмарке, который основан на задаче N тел. Физический движок написан на Rust/WebAssembly, визуализация через Three.js, и результаты запусков сохраняются в Supabase. Тут присутствует разбор архитектуры, сравнение алгоритмов расчета — прямой и Barnes‑Hut, а также тут расписаны проблемы, связанные с измерением производительности в браузере.

Конвертация медиа. Люди решают эту задачу десятки раз в неделю. Видео с дрона нужно перевести в MP4 для мессенджера, HEIC с айфона в JPEG для сайта, аудиозапись интервью обрезать и сжать. Обычно это выглядит так: человек открывает один из сотен онлайн-конвертеров, загружает туда полугигабайтный файл, ждёт, пока он доползёт до сервера, потом ждёт очереди, потом скачивает обратно. Параллельно его файлы лежат на чужом сервере, о чём мало кто задумывается (а зря, если речь про корпоративный договор или личное видео).

Мы решили проверить, можно ли полностью убрать из этой схемы сервер. Чтобы конвертация происходила целиком в браузере, на устройстве пользователя. Без загрузок, без очередей, без серверных затрат. Так появился BrowsersKit: набор инструментов (медиа-конвертер, PDF, математика, Python-песочница), работающих на клиенте. Дальше расскажу, как это устроено внутри, какие грабли нас поджидали и как мы с ними справились.

WebAssembly появился для браузерных задач как способ исполнять тяжелый код быстрее, чем это делает JavaScript. Но за последние годы он начал выходить далеко (иногда буквально далеко) за пределы вкладки браузера: серверы, edge-вычисления, плагины, песочницы. Появились рантаймы Wasmtime, WasmEdge, Wasmer, которые исполняют WASM-модули\компоненты прямо на ОС. Звучит красиво - собрал один бинарь, а запускаешь где угодно, да еще и в максимальной изоляции.

Но есть интересное наблюдение. Существуют проекты, которые строили свои виртуальные машины на WASM, но отказались от него. Самый заметный пример - это Polkadot. Они спроектировали собственную PolkaVM на базе набора инструкций RISC-V и переключили исполнительный слой смарт-контрактов на нее (при этом сам runtime Polkadot по-прежнему компилируется в WASM). Если WASM настолько хорош, как заявляется, то почему для нового движка выбрали не его, а регистровую машину?

Недавно в одном из тематических чатов разгорелась жаркая дискуссия на этот счет, что, собственно говоря, и побудило меня на написание этой статьи. Если тебе интересны такие темы - добро пожаловать к нам)

Давайте попробуем разобраться, чем стековая модель отличается от регистровой и где эта разница реально что-то меняет. А также рассмотрим, где же в WASM скрыты компромиссы.

Я не начинал с идеи написать «убийцу JavaScript». Честно говоря, такие заявления обычно только мешают думать.

Сначала была гораздо более скромная мысль: мне нравится Go, мне нравится его простота, типизация и ощущение предсказуемого инструмента. Но когда дело доходит до интерактивного веб‑интерфейса, почти неизбежно оказываешься в другой вселенной: JavaScript, Node.js, сборщики, плагины, отдельная модель компонентов, отдельная экосистема.

Это нормально. Веб таким стал не случайно. Но мне было интересно проверить другую гипотезу: можно ли писать заметную часть браузерного приложения на Go, не превращая интерфейс в кашу из ручной сборки дерева узлов?

Так появился мой небольшой экспериментальный проект GoFrame. Сейчас это не готовый фреймворк для продакшена, а исследование в сторону Go‑first подхода для браузера через WebAssembly: маленький рантайм, JSX‑подобная разметка .gox, компиляция этой разметки в обычный Go‑код и утилита goxc, которая способна сгенерировать, собрать и упаковать приложение. В README проекта это прямо описано как экспериментальный Go‑first фреймворк и набор инструментов для интерактивных браузерных приложений на WebAssembly; там же честно указано, что проект не заявляет готовность к продакшену, стабильный API 1.0, SSR, гидратацию, серверные API, форматтер или LSP.

В этой статье я не хочу пересказывать ридми. Интереснее другое: как маленькая идея «а что если сделать JSX для Go?» довольно быстро потянула за собой компилятор, компонентную идентичность, состояния, эффекты, маршрутизацию, проверки в браузере и даже бюджет размера WebAssembly‑бандла.

Решил я поиграть на выходных в Carmageddon. Но вот незадача!- Заводить всё это в эмуляторе DosBox нет никакого желания (он стоит у меня для других целей, ну вы понимаете))- То что мы с Сашей Гурьяновым делали на DosZone у меня тормозит, так как не вывозит мой старенький процессор. Пора уже собрать комп для нашей ДОС Зоны))- Ремейки типа Carmageddo: Max Damage и Reincarnation полная фигня. Куплено в стиме и полно разочарования

Что же делать? Будем сами портировать в браузер! Всё как мы любим. Для эксперимента и развлечения ради!

Обзор асинхронности WASM с выходом WASI 0.3

WASM уже вышел за пределы браузеров и выглядит как перспективная технология для серверной разработки. Однако в вопросе серверного компьюта рано или поздно встает вопрос асинхронной обработки I/O-bound нагрузки. В данной статье попробуем разобраться, что как отвечает экосистема WASM на данный вызов. Статья особенно актуальна в свете того, что совсем недавно официально представлен WASI 0.3

В общем и целом это практически полностью ИИ порт на создание которого ушло всего 10 минут!Так я решил проверить готова ли самая обычная нейронка портировать с нуля игру в браузер, так сказать под ключ.

Сертификат комплаенса — мёртвая бумага: через два часа хотфикс делает сертифицированный хеш недействительным, и никто не замечает. UVS заменяет «доверьтесь нам» на то, что любой пересчитает сам: deriveTier выводит тир из улик, а не из бейджа. drand + двойной RFC-3161-якорь + WASM-движок, собираемый на лету. Демо живые — попробуй сломать.

Вращения в трёхмерном пространстве встречаются практически в любой задаче компьютерной графики, от игровых движков до WebGL‑приложений.

В статье разбираю, как описываются повороты с помощью матриц и кватернионов, почему оба подхода задают одни и те же преобразования и в чём заключаются преимущества кватернионов на практике.

На примере демонстрационного проекта на Rust, WebAssembly и ThreeJS рассматриваю связь между осью вращения, матрицами поворота, комплексными числами и кватернионами, а также показывается, как эти математические конструкции используются для вращения реальной 3D‑модели.

TL;DR. Две нейросетевые задачи — удаление фона (ONNX Runtime Web + модель silueta) и замазывание лиц (MediaPipe Tasks Vision + BlazeFace) — запущены полностью на клиенте: ни один пиксель не уходит на сервер. Ниже — почему «в браузере», какие модели выбраны и почему, как тянуть 43-мегабайтную модель с прогресс-баром, почему лица лучше пикселизировать, чем размывать, и подробный разбор бага, на который я убил вечер: Service Worker, кэширующий .mjs/.wasm, ломает dynamic import() с ошибкой «Failed to fetch dynamically imported module».

Всем привет! Я решил наконец то сам сделать пост на хабре. Обычно о всех моих веб проектах и команды DosZone Team пишет здесь многоуважаемый @denis-19, за что ему огромное спасибо! Ведь нам просто лень или не хватает на это времени. И так! После шутера Blood мне было интересно попробовать также портировать Redneck Rampage как раз на основе того, что я уже сделал. Было ошибочно так думать, потому что RR в отличие от NBlood оказался совершенно на другом движке - RedNukem, и пришлось начинать всё с нуля. Да и сложность повысилась и всё это заняло в два раза больше времени, чуть больше недели.

Мы были двумя 16-летними студентами колледжа, чья программа безнадёжно отставала от индустрии. Пока на парах проходили технологии пятилетней давности, реальный мир уже жил в экосистеме React, Next.js и WebAssembly. Пришлось учиться самим — по вечерам разбирая современный стек и споря об архитектуре. Эта тяга сподвигла нас создавать не абстрактные проекты для портфолио, а реально полезные инструменты, которыми хочется пользоваться каждый день.

Так четыре года назад родился наш проект — 167 утилит и 8 интерактивных песочниц в одном сервисе. Форматтеры, конвертеры, генераторы паролей и UUID, DevOps-конфиги, шпаргалки и песочницы для Python, SQL и Bash. Всё сделали прямо в браузере, без сервера.

Рассказываем как это было.

Инструмент интервального повторения заметок Obsidian должен использовать современный алгоритм, работать локально с заметками как есть (без переписывания в карточки).

Существующие в Obsidian плагины останавливаются на алгоритме SM-2 образца 1987 года.

Альтернативные решения есть «где-то еще», вне свободного ПО, вне Markdown‑first архитектуры — привязаны к облаку или проприетарному формату.

Я написал свой, потому что не нашёл подходящего.

FSRS, вычислительное ядро на Rust, скомпилированное в WebAssembly, и SQL‑подобный синтаксис для табличной выборки.

В статье — архитектура с WebAssembly, собственный парсер, лексер, замеры производительности. Любые запросы обрабатываются в сотых долях секунды. Blazingly fast 🦀

Это техническая статья. Если хотите пошаговое руководство для пользователя — вот обзорная статья.

Привет! Я Софа, ведущий b2e дизайнер в Perfomance Lab, и я считаю, что внутренние продукты недооценены, а процесс их создания в корне отличается от b2c/b2b.

Сегодня речь пойдёт про последнее упомянутое решение — PWA-конструктор, который помогает нашим медиабаерам проверять свои гипотезы быстрее и создавать более 20 приложений каждый день. Я расскажу, зачем мы начали его делать и с какими сложностями столкнулись.

В статьях2021 года можно встретить довольно пессимистичный вывод: «ресурс окончательно уничтожил возможность сбора информации с помощью Selenium». Но, как оказалось, это не совсем так.

Сайт kad.arbitr.ru — предоставляет информацию о гражданских делах, в первую очередь данная информация интересна юристам. Также там можно найти информацию о начале\конце банкротства и много другой информации связанной с юридической составляющей нашей жизни как граждан данной страны. На практике часто возникает задача мониторинга состояния дел по заданному списку — допустим по ИНН или же по ФИО. Именно такая задача была поставлена предо мной, найти дело по ИНН (если оно существует) и открыть его карточку чтобы собрать информацию.

При первом знакомстве сайт выглядит довольно устаревшим — как и многие государственные сайты, тем не менее, первое впечатление бывает обманчиво, ведь тут достаточно неплохая защита от тех кто хочет собрать много информации автоматически. Далее разбор будет строиться по следующей схеме: простой способ сбора информации → анализ, почему он работает или нет и так далее.

Первое, что приходит в голову при решении задачи парсинга по конкретному полю — это использование API.

Возможны три варианта.

WebAssembly находится в разработке уже более 8 лет. Технология прошла долгий путь развития и недавно разработчики из Bytecode Alliance выкатили версию 3.0.

О WebAssembly уже много материалов, но сегодня нам важна сама суть. У нас есть возможность, воспользовавшись любым из доступных языков программирования, написать модуль с необходимой нам логикой и запустить в исполняемой среде браузера. Разработчики обещают: модули будут быстрее и безопаснее, чем JavaScript, а также созданные ранее технологии, наподобие asm.js.

На связи Борис Мещеряков, frontend-разработчик в ПСБ и чаще всего мне приходится работать с javascript-фреймворками - React, Angular и прочими. Узнав о WebAssembly, я какое-то время наблюдал за его развитием. Мне стало интересно, может ли новая технология помочь мне уже сейчас? Какие ее возможности существуют на данный момент и какие реальны в будущем?

Разберёмся вместе?

Около года назад моё желание кастомизировать десктопный клиент популярного музыкального сервиса привело меня в некое сообщество. Всё началось с попытки восстановить заброшенную тему «Blurity» после очередного обновления Electron-хоста, которое сломало все селекторы. Но проект быстро перерос рамки обычных правок CSS.

В этой статье я расскажу, как ChromaSync эволюционировал из простого визуального патча в полноценную инженерную систему — runtime-аддон со сложной архитектурой. Мы разберем «анатомию» плеера, создание декларативной системы из 70+ настроек и перенос тяжелой математики аудиореактивных эффектов в изолированное ядро на WASM. Это история о том, как 700 строк JavaScript превратились в 10 000, а обычная «разукрашка» — в оптимизированную экосистему, умеющую балансировать между визуальной насыщенностью и производительностью системы.

Перенес консольного приложения в формат, удобный к показу по ссылке:

переписал логику на Rust,

собрал в WebAssembly и завернул в статичную страницу с терминальным интерфейсом на чистом HTML/CSS/JS.

В статье разбираю практический пайплайн: экспорт функции из Rust в WASM (wasm_bindgen), инициализацию модуля в браузере через JS, вывод результата в DOM и публикацию через GitLab Pages. Отдельно показываю, как встроил .wasm в base64, чтобы страница работала даже без отдельной загрузки бинарного файла.

Это кейс про то, как быстро превратить небольшую CLI-логику без системных API в наглядное web-демо, которое открывается с любого устройства без установки.

Репозиторий: gitlab.com/Evgene-Kopylov/iching_wasm
Демо: i-ching-wasm-c50914.gitlab.io

Мы создали парсер openui‑lang на Rust и скомпилировали его в WASM. Логика была здравой: Rust быстрый, WASM в браузере даёт скорость, близкую к нативной, а наш парсер — разумно сложный, многоэтапный конвейер. Почему бы не захотеть его на Rust?

Но оказалось, мы оптимизировали не то, что нужно.

В какой-то момент я понял неприятную вещь: если твой канал связи живет по чужому настроению, политической погоде, сбою в чужом облаке или очередной внезапной любви регулятора к кнопке «запретить» — это не твой канал связи. Это аренда с правом внезапного выселения.

Мне эта модель быстро наскучила.

Поэтому я сделал то, что обычно делают люди с нездоровой смесью инженерной паранойи, скуки и профессиональной деформации: психанул и начал писать свой мессенджер.