Masonry сетка на Rust, WebAssembly и React

#jsarticle #javascript #frontend #webdev #webassembly #wasm #rust #react

​​Использование асинхронных API из WebAssembly

#jsarticle #webassembly #webdev #frontend

wasm-run - CLI для запуска WebAssembly файлов

- Работает с WASM и WASI
- Можно выставлять таймаут выполнения (через флаг --timeout)
- Возможность вызывать отдельные функции через флаг --invoke <func>
- Аргументы функции передаются как CLI аргументы

#jstools #webassembly #nodejs #javascript

Недавно была опубликована статья, в которой рассказывается про работу с базой данных на статических сайтах — "Hosting SQLite databases on Github Pages".

Когда нужно организовать доступ к большому массиву данных (в режиме read only), а поднимать полноценный бекенд не хочется, можно воспользоваться решением из статьи. Автор реализовал виртуальную файловую систему для sql.js — WebAssembly-версии SQLite. Движок SQLite думает, что работает с обычным файлом, но все запросы на чтение транслируются в HTTP Range запросы к файлу базы данных на сервере. Для хостинга базы можно использовать GitHub Pages, Netlify и т.п.

Количество загружаемых данных зависит от типа запроса. Если база использует индексы и если запрос возвращает небольшое количество данных, то объём передаваемых данных не будет превышать несколько десятков килобайт.

#webassembly #staticsite

https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/

Динамический и статический роутинг в React

#jsarticle #javascript #react #webassembly

Лин Кларк опубликовала статью, посвящённую оптимизации работы JavaScript-кода в WebAssembly-окружении — “Making JavaScript run fast on WebAssembly”.

Некоторые платформы ограничивают набор оптимизаций, которые могут быть применены к JavaScript-коду. Например, на iOS и игровых консолях нельзя использовать JIT-компилятор, поэтому JS-движки там могут работать только в режиме интерпретатора. Это ограничивает спектр задач, который может быть решён с помощью JS. Участники Bytecode Alliance (Fastly, Mozilla, Igalia) работают над решением на базе WebAssembly, которое позволит ускорить выполнение JS-кода на таких платформах и достичь уровня производительности JIT-компиляторов ранних версий JavaScript-движков.

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

В статье говорится о том, что подобный подход может использоваться не только с JavaScript, но и с Python, Ruby, Lua.

#js #performance #webassembly

https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

Вышел Deno 1.11

- Новый интерфейс FsWatcher
- deno lint стабилизирован
- поддержка динамических Data URI импортов в Deno compile
- обновлен TypeScript до версии 4.3
- Добавлен API BroadcastChannel
- Добавлен randomUUID в Crypto API
- Добавлены TextDecoderStream и TextEncoderStream API

#jsrelease #deno #backend #webassembly

Веб-версии Adobe Photoshop и Illustrator

На конференции Adobe MAX 2021 были представлены веб-версии Photoshop и Illustrator. Томас Натстад и Набель Аль-Шама рассказали о технологиях, которые сделали веб-версию Photoshop возможной — "Photoshop's journey to the web".

Веб-версия Photoshop использует WebAssembly и кодовую базу своего старшего брата. Чтобы производительность приложения была хорошей, порт использует новые фичи WebAssembly и Emscripten: многопоточность, SIMD и поддержку обработки исключений. Для поддержки современных дисплеев используется новое цветовое пространство P3 в canvas.

Интерфейс Photoshop построен на веб-компонентах с помощью библиотеки LitElement. В некоторых частях приложения используется React.

Photoshop for Web поддерживает только базовые функции редактирования изображений и комментирование. Также на презентации была представлена веб-версия Adobe Illustrator, но на данный момент она пока недоступна.

Adobe Photoshop и Illustrator работают только в Chrome и Edge.

#webassembly #announcement

https://web.dev/ps-on-the-web/

Рендеринг DOOM с помощью чекбоксов

Эндрю Хэли из Vercel рассказал про свой эксперимент с DOOM — "DOOM Rendered via Checkboxes".

В статье рассказывается про интеграцию библиотеки Checkboxland и WebAssembly-порта DOOM. Checkboxland — это библиотека для рисования с помощью чекбоксов на HTML-странице. С её помощью можно рендерить текст, фигуры, изображения и видео.

Для рендеринга картинки DOOM используется видео. Изображение из <canvas> захватывается с помощью метода captureStream(), преобразуется в MediaStream и передаётся методу renderVideo из Checkboxland. Таким образом получается картинка. Автор пишет про то, что на высоких разрешениях всё тормозило, поэтому он остановился на разрешении 160x100. Вполне возможно, что в будущем мы увидим какой-нибудь бенчмарк на базе этого проекта.

Статья несерьёзная, но интересная. Рекомендую заглянуть.

#webassembly #fun

https://healeycodes.com/doom-rendered-via-checkboxes
https://habr.com/ru/post/590337/ (мой перевод на русский язык)

Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript

Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".

Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.

В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.

Крутая статья. Рекомендую почитать всем.

#performance #js #internals #webassembly #rust

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)