Как стать автором
Обновить
9.25

WebAssembly *

Низкоуровневый байт-код для исполнения в браузере

Сначала показывать
Порог рейтинга
Уровень сложности

Telegram Web съел 30% моего 16-ядерного процессора. Расследование странного поведения, или Призрак майнера в браузере

Время на прочтение9 мин
Количество просмотров20K

Всем привет! Сегодня я хочу поделиться историей одного странного и затянувшегося расследования, главным героем которого стал мой компьютер, а антагонистом — веб-версия Telegram. Эта история не только о поиске прожорливого процесса, но и о глубоких аномалиях в поведении современных веб-приложений, которые вызывают серьезные вопросы.

О, нука че там

Новости

WebAssembly голыми руками

Уровень сложностиСредний
Время на прочтение32 мин
Количество просмотров4.6K

WebAssembly являясь (относительно) молодой технологией уже довольно распространён в индустрии.

Тем не менее, почти все материалы в сети по теме рассматривают WASM как цель для компиляции других более высокоуровневых языков.

Информации же по работе с самим WebAssembly и написанию кода непосредственно на нем в сети крайне мало, а в рунете и подавно, что я и попробую исправить под катом.

Читать далее

Компилятор WebAssembly, который помещается в один твит

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров12K

▍ Введение


Наш первый «компилятор WebAssembly в твите» имел длину 269 байт; с тех пор мы смогли снизить её всего до 192 байтов.

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

let c=(b,l)=>WebAssembly.instantiate(new Int8Array(
[,97,115,109,1,,,,1,5,1,96,,1,127,3,2,1,,7,4,1,,,,10,
l=(b=b.split` `.flatMap(t=>t>-1?[65,t]:107+'-*/'.indexOf(t)))
.length+4,1,l-2,,...b,11]))

А вот пример его использования:

(await c('11 11 1 - + 4 * 2 /')).instance.exports['']()

Но это не просто хитрый трюк — если вы начнёте разбираться, как работает этот код, то на удивление много узнаете о WebAssembly! В этом посте мы объясним, как это всё работает, пошагово деобфусцируя код.
Читать дальше →

Веб-приложения будущего: что нужно знать о WebAssembly

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров29K


Часто при разговоре о веб-разработке на ум приходят JavaScript и различные фреймворки. Но что, если бы веб-приложения могли запускаться с той же производительностью, что и нативные, а разработчики могли бы писать их на Rust, C++ или Go? Вот тут-то на сцену и выходит WebAssembly (Wasm) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

В этой статье разберемся, как работает WebAssembly, чем он привлекает разработчиков и какие проблемы решает. Вы узнаете, почему его активно поддерживают такие компании, как Google, Unity и Unreal Engine, и какие перспективы открывает Wasm для будущего веб-разработки. Подробности под катом!
Читать дальше →

Используем всю мощь JavaScript для написания счётчика. Разбор от Олега Иванова, фронтенд-разработчика WMT Group

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров8.9K

Приветствуют читателей Хабра. Меня зовут Олег Иванов, последние пару лет являюсь фронтенд-разработчиком в ит-компании WMT Group. На разных этапах работы я сталкивался с , нашел способ упросить . В этой статье не будет серьёзных рассуждений, глобальных задач и историй успеха. Скандалов, интриг и расследований из глобального ит-мира тоже не планируется.

Вместо этого мы напишем функцию-счётчика на JavaScript. Несколько раз, причём всякий раз по-разному с пользой.

Казалось бы, задача простейшая, даже старый-добрый to-do list куда сложнее и заковыристее. Предложение написать функцию-счётчика на собеседованиях уже классика, которая делается на автомате. Уверен, что большинство опытных воинов фронтенда либо помнят традиционное решение, либо по памяти накатают его в течение 30 секунд. Традиционно эту задачу решают замыканием. Однако, почему именно им? А если попробовать сделать это как-то иначе? Я попробовал и реализовал счётчик несколькими разными (подчас неочевидными) способами, попутно спросив совета у нейросетей, а также подключив тяжёлую артиллерию в лице Babel, TypeScript и даже WebAssembly. Давайте посмотрим, что получилось!

Читать далее

Dioxus 0.6

Время на прочтение21 мин
Количество просмотров2.9K

Значительное улучшение инструментария: эмуляторы для мобильных устройств, магический Hot-Reloading, интерактивный CLI, и многое другое!

Читать далее

Запускаем 8B LLM в браузере: AQLM.rs

Время на прочтение4 мин
Количество просмотров16K

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

В этом посте я расскажу о своём пет‑проекте AQLM.rs. Я написал инференс модели Llama 3.1 8B, работающий в браузере на WebAssembly без использования GPU, с помощью алгоритма сжатия, разработанного нашей лабораторией.

Попробовать можно на сайте проекта, подробности под катом.

Читать далее

Ускоряем браузерные вычисления на коленке с помощью WebAssembly на примере генерации шума

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров3.4K

Так ли производителен WebAssembly в сравнении с JavaScript как о нем говорят? Какие подводные камни могут ожидать при попытке ускорить CPU-bound задачи и в каких ситуациях он must have? Автор предлагает рассмотреть один кейс и разобраться в этих вопросах на практике

Приступим

Как в цифровом мире безопасно рассказать информацию не выдавая себя?

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров10K

К примеру контрибьютер опенсорс проекта хочет рассказать о планах но при этом остаться анонимным.

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

Или просто какая-то тема запрещена для обсуждения которую очень хочется обсудить.

Как же быть? Использовать кольцевые подписи!

Читать далее

Блеск и нищета WebAssembly

Уровень сложностиСложный
Время на прочтение20 мин
Количество просмотров13K

Всем привет! Сейчас за окном осенние деньки 2024 года. Вещает Пройдаков Евгений. Сейчас я руковожу группой разработки среды исполнения языка eXtraction and Processing в R&D департаменте Positive Technologies.

Доменно специфичный язык eXtraction and Processing является важной частью движка поведенческого анализа, используемого в таких продуктах Positive Technologies, как MaxPatrol SIEM и PT ISIM. Сегодня хотелось представить вашему вниманию выжимку нашего R&D процесса в экспериментах с WebAssembly.

Узнаем, что такое WebAssembly. Поймём, как его можно встроить в программный продукт. Коснёмся инструментов разработки и сред исполнения WebAssembly. А также в рамках одной статьи пройдём путь от постановки задачи до результатов по разработке среды исполнения для доменно специфичного языка программирования.

Кроме того, мы разберем некоторые проблемы, которые могут появиться у вас при попытке собрать и отладить большой С++ проект под WebAssembly. Материал может быть особенно полезен тем, кто хочет использовать WebAssembly за пределами веб‑браузера.

Более подробно про сам язык eXtraction and Processing можно почитать в прошлой статье цикла от моего коллеги Михаила Максимова.

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

На старт, внимание, поехали!

Обзор Kwasm — оператора для запуска WebAssembly-приложений в кластере Kubernetes

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1.3K

Продолжаем обозревать инструменты, которые позволяют использовать WebAssembly-приложения в кластере Kubernetes. В этот раз пробуем оператор Kwasm: установим его в кластер, развёрнутый с помощью kind, и запустим тестовое приложение.

Читать далее

Как построить мост между JavaScript и C++ через WASM, или гайд для самых маленьких

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров6.7K

Всем привет. Сегодня я хочу рассказать об использовании WASM с C++ и разберу, как взаимодействовать с этим всем делом через JavaScript.

Материал предназначен для новичков в данной теме.

Читать далее

Новый AI UI дизайнер для «Silverlight» приложений

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.2K

Мы занимаемся разработкой фреймворка OpenSilveropensource наследника платформы Silverlight. В версии 3.0 мы добавили современный UI дизайнер в Visual Studio расширение и сделали веб-версию дизайнера.

Читать далее

Ближайшие события

Смарт-контракты на WebAssembly: зачем это надо и как работает

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров3.4K

В последнее время многие блокчейн-платформы для исполнения смарт-контрактов переключились на WASM — WebAssembly. Мы не стали исключением, и в последнем обновлении тоже добавили WebAssembly как альтернативу привычному Docker. В этом посте мы расскажем, для каких задач нам потребовался именно WASM, что мы достигли с ним на сегодня и как WASM отражается на производительности блокчейна.

Читать далее

Wasm vs Docker containers vs Kubernetes vs serverless: битва за первенство

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров13K

В начале года на YouTube-канале DevOps Toolkit вышло видео с разбором WebAssembly. Автором ролика является Виктор Фарчич (Viktor Farcic) — developer advocate в Upbound, член CNCF Ambassadors, Google Developer Experts, CDF Ambassadors и GitHub Stars.

Мы перевели видео про WebAssembly в текстовый формат и адаптировали для лучшего понимания. В нём автор разбирает, что такое WebAssembly, стоит ли использовать его в браузерах и кластерах Kubernetes или вообще заменить Kubernetes и прочее.

Читать далее

Angular на стероидах: наращиваем производительность при помощи WebAssembly

Время на прочтение9 мин
Количество просмотров4.4K
В этом посте продемонстрировано, как с лёгкостью использовать WebAssembly внутри приложения, написанного на Angular. Иногда в приложении на Angular требуется выполнить задачу, которая в JavaScript завершается не слишком быстро. Конечно, можно переписать алгоритм на другом языке, например, AssemblyScript и Rust — и код станет эффективнее. Затем можно скомпилировать получившиеся фрагменты кода в файле WASM и потоком передать двоичные данные в приложение, чтобы можно было вызывать из него функции WASM. Бывает и так, что разработчику не удаётся найти в реестре NPM опенсорсные библиотеки, нужные для решения задачи. В таком случае можно написать пакет не на JS, а на каком-нибудь другом языке, затем скомпилировать этот пакет в WASM и опубликовать код WASM в реестре NPM. Angular-разработчики устанавливают новый пакет как зависимость и выполняют WASM-функции внутри приложения.

В следующем демонстрационном примере я напишу на AssemblyScript несколько функций для работы с простыми числами, а затем опубликую файл индекса в формате WASM. Затем скопирую файл WASM в приложение Angular, потоком отправлю двоичные данные через WebAssembly API и, наконец, стану вызывать эти функции, чтобы с их помощью выполнять различные действия над простыми числами.
Читать дальше →

Состояние WebAssembly – 2023 и 2024

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров9.1K

Автор статьи Жерар Галлан известен как автор книги “WebAssembly in Action”, выпущенной Manning в 2018 году. Существует перевод его книги на русский “WebAssembly в действии” (Питер, 2022). Предыдущий обзор Состояние WebAssembly в 2022-23 годах опубликован автором в январе 2023 года. — Прим. переводчика.

Добро пожаловать в 2024 год и в нашу статью о текущем состоянии WebAssembly (Wasm)! В этой статье я займусь тем, что посмотрю, что произошло в 2023 году. Затем я выскажу свои мысли о том, что может произойти в текущем году.

Читать далее

Прекратите клепать базы данных

Время на прочтение15 мин
Количество просмотров64K

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

Эти фичи явственно смахивают на внутренние механизмы баз данных. Действительно, в любом достаточно сложном клиентском приложении программисту непременно придётся реализовывать такое множество фич для управления данными, что эта работа будет напоминать построение предметно-ориентированной базы данных. Такая дополнительная сложность удваивается в каждом проекте, над которым мы работаем, поэтому приходится тратить время на решение бизнес-проблем, а радовать пользователя – уже как успеем.

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

Читать далее

О JavaScript и WebAssembly

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров8.7K


Hello world!


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


Хорошо, если вы знаете JS/Node.js и хотя бы слышали о WASM и Rust.

Читать дальше →

WebAssembly: короткий обзор ассемблера для фронтенда

Уровень сложностиПростой
Время на прочтение18 мин
Количество просмотров20K

В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят. И конечно же я хотел поделиться рецептом приложения. Возьмем наш любимый React и добавим Yew, приправим всё это webpack-ом и добавим щепоточку module‑federation. Статья будет интересна всем, кто хочет познакомиться с WebAssembly и добавить разнообразия в список используемых фреймворков и библиотек для написания пользовательских компонентов.

Читать далее
1
23 ...

Вклад авторов