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

WebAssembly *

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

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

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

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

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

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

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

Читать далее
Всего голосов 44: ↑39 и ↓5 +34
Комментарии 43

Новости

О JavaScript и WebAssembly

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


Hello world!


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


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

Читать дальше →
Всего голосов 20: ↑16 и ↓4 +12
Комментарии 4

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

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

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

Читать далее
Всего голосов 44: ↑42 и ↓2 +40
Комментарии 73

Анонс Dart 3.2

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

Улучшены языковые возможности и опыт разработчиков, а также обновлена информация о веб-приложениях и Wasm

Авторы: Kevin Moore & Michael Thomsen

Сегодня мы анонсируем Dart 3.2, в котором появилась новая языковая функция для non-null продвижения приватных конечных полей, улучшен опыт разработчиков за счет новых возможностей взаимодействия, поддержка расширений в DevTools, а также обновлен дорожный план веб-разработки, включающий поддержку Wasm (aka WebAssembly).

Что новенького!
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 5

Истории

Как можно использовать .NET из Javascript (React) в 2023 году

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

Статья показывает опыт использования .NET из JavaScript (React) с помощью компиляции .NET кода в WebAssembly с помощью новых возможностей .NET 7. Включает инструкцию по созданию проекта для .NET для использования из Javascript, и интеграции его в веб-приложение, написанного с использованием React. Рассматривается также сборка такого проекта с помощью GitHub Actions (CI) и хостинг его на GitHub Pages. Содержатся ссылки репозитории на GitHub тестового и реального проекта, использующие данный подход.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 12

История смарт-контрактов, или как у блокчейна выросли ручки и ножки

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

Прошло почти 15 лет с запуска сети Bitcoin, предложившей миру новый способ передачи ценности, альтернативный традиционным валютам. Всё это время технологии не стояли на месте: к 2023 на основе блокчейна вовсю развиваются проекты в различных сферах экономики — особенно финансовой — а государства всерьез занимаются запуском собственной «крипты», ЦВЦБ. Такой прорыв стал возможен во многом благодаря смарт-контрактам. В этом посте мы расскажем, что такое смарт-контракты, как они эволюционировали и, наконец, как работают на нашей платформе «Конфидент».

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Комментарии 5

Прогресс WebAssembly и будущее веба. Быстрые интерфейсы, пример Figma

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

Скетч из статьи Лин Кларк «Создание и работа с модулями WebAssembly»

WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.

WebAssembly — не столько язык программирования, сколько цель компиляции, новый вид ассемблера, который работает близко к железу, принимая программы на C, C++, Rust и других привычных языках. При этом Wasm гораздо быстрее ASM.js и выполняет код в браузере почти как нативные программы под любой ОС.
Читать дальше →
Всего голосов 57: ↑54 и ↓3 +51
Комментарии 15

Распознаем паспорт РФ в PWA: быстро, качественно, без сервисов/без утечек

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

Утечки персональных данных в России бьют все рекорды. За два года их совокупное число выросло – только вдумайтесь – в 40 раз. В 2021-м году таких инцидентов было всего четыре, в 2022 – свыше 140, а за первые семь месяцев 2023 года – уже 150.

Одним из возможных путей утечки является передача персональных данных на обработку третьей стороне. По сути, компания передает изображения удостоверяющих документов (паспортов или любых других) своих клиентов незнакомым людям, а что дальше происходит с данными – неизвестно.

Между тем, есть еще один способ ввода данных из документов – прямо на устройстве, без необходимости отправлять куда-то картинку. Он полностью исключает риск любой утечки. Речь идет о нашем мобильном SDK для распознавания паспорта. О том, как мы внедрили наш SDK в PWA (progressive web app), читайте под катом.

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 13

Почему WebAssembly плохо годится для Java

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

Как разработчик TeaVM, компилятора байт-кода JVM в JavaScript и WebAssembly, я часто рекомендую пользователям, почему-то жаждущим сгенерировать WebAssembly, начать с JavaScript. Если честно, бэкэнд WebAssembly я очень давно не развиваю, не реализую в нём недостающих фич и не фикшу баги. Меня спрашивают: а почему так? Обычно, я просто игнорирую подобные вопросы, потому что в двух предложениях ответить на них невозможно, а для того, чтобы писать больше предложений, у меня нет времени. Обычно если я встречаю чьи‑то попытки объяснить, чем WebAssembly плох для реализации JVM (а так же, CLR, JavaScript и прочих динамических сред), то они сводятся к следующему: «Java (.NET, JavaScript, ваш вариант) — это управляемый язык со сборкой мусора и исключениями, так что приходится тащить с собой гигантский рантайм». Что же, на самом деле, ситуация несколько сложнее, а размер рантайма вовсе не такой страшный и не является основным источником бед.

Читать далее
Всего голосов 65: ↑65 и ↓0 +65
Комментарии 46

А давайте убьем все фреймворки?

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

Общая тенденция развития технологий характеризуется рывками и спадами. Рассмотрим, например, массовое перемещение человеческих тел. Изначально применялись лошади и повозки, которые постепенно стали сложными, и эта технология превратилась в отдельную индустрию. Затем внезапно появились поезда. Про лошадей быстро забыли, и фокус сместился на новое направление. Пар стал объектом исследований и превратился в сложную науку. Параллельно развивались дизель и электричество. В определенный момент паровые двигатели ушли в прошлое, и все перешли на дизель и электричество. Аналогично сейчас происходит переход на электромашины, требующие значительно меньшего количества жидкостей.

Технологии эволюционируют и функционируют, а новые технологии их полностью заменяют. Считаю, что сейчас наступает эпоха, когда технологии фреймворков и Электрона могут быть вытеснены генеративными AI. Рассмотрим несколько примеров.

Нажимайте вот эту вот кнопотуленку
Всего голосов 134: ↑108 и ↓26 +82
Комментарии 271

Как встроить сканер баркодов от Smart Engines в браузер

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

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

Одним из самых востребованных направлений в OCR сейчас является распознавание кодифицированных объектов, таких как баркоды, номера телефонов, банковских карт и прочие машиночитаемые зоны. В своё время мы выделили распознавание таких объектов в отдельный продукт Smart Code Engine для того, чтобы иметь возможность гибче работать с различными сценариями распознавания, а так же иметь возможность пойти дальше в деле оптимизации скорости и размера библиотеки. В результате появился Smart Code Engine 2.0 - продукт получил новый интерфейс и возможность максимально гибко настраивать поведение для получения лучшего качества распознавания. О том, как с его помощью развернуть распознавание баркодов в браузере, мы сейчас и расскажем.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

Туториал: Todo веб-приложение на Internet Computer используя Rust и Create React App

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

В этом туториале мы подробно разберём, как именно происходит процесс разработки канистеров на Internet Computer. Мы пройдём полный путь от hello-world проекта, сгенерированного dfx автоматически до полноценного Todo-app с бекендом и фронтендом. Разберём какие файлы для чего нужны, какие команды использовать, как тестировать и дебажить приложение. Туториал расчитан на новичков в Internet Computer и блокчейн-сетях в целом, но мы ожидаем, что небольшой опыт Rust и React у читателя уже имеется. Полный код проекта из этого туториала можно найти здесь.

Читать далее
Всего голосов 7: ↑6 и ↓1 +5
Комментарии 2

Расширение возможностей веб-приложений с помощью WebAssembly и Python

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

В этой статье мы расскажем, как запустить программу на Python внутри другого приложения, использующего среду исполнения Wasm (хост), и заставить программу на Python общаться с хостом, и наоборот.

Пару месяцев назад мы добавили Python в Wasm Language Runtimes. Мы опубликовали собранный двоичный файл python.wasm, который можно использовать для выполнения скриптов на Python при помощи WebAssembly, чтобы обеспечить повышенную защиту и портируемость.

После этого релиза мы получили много отзывов о том, как сделать его ещё более полезным для разработчиков. Одной из часто упоминаемых тем стала необходимость двунаправленной связи между хостом на Wasm и кодом на Python, выполняемым в python.wasm.

Мы поработали над этом вместе с командой Suborbital и реализовали приложение, демонстрирующее двунаправленную связь благодаря реализации SE2 Plugin ABI. Эту работу позже внедрили в Suborbital SE2.

Пример приложения можно найти в WLR/python/examples/bindings/se2-bindings. Его легко запустить и оно позволит вам разобраться, как встраивать Python в приложение на Wasm и реализовывать привязки для двунаправленной связи.
Читать дальше →
Всего голосов 17: ↑17 и ↓0 +17
Комментарии 2

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

Пишем и отлаживаем код для ARM64 на голом железе

Уровень сложности Сложный
Время на прочтение 7 мин
Количество просмотров 4.3K
Я немного изучил arm64 (aarch64) и решил: попробую написать для него код на голом железе.
Я хотел понять, проанализировать и тщательно рассмотреть машинный код, который выдают на моём MacBook Air M1 такие среды исполнения WebAssembly, как v8 или wasmtime. Для этого я (немного) изучил ассемблер arm64. Коллега Саул Кабрера порекомендовал мне почитать книгу Стивена Смита «Programming with 64-Bit ARM Assembly Language», и я могу только поддержать эту рекомендацию.

image

«Programming with 64-Bit ARM Assembly Language» by Stephen Smith, APress 2020

В книге отлично объясняется набор инструкций, приёмы оптимизации, а также действующие соглашения и интерфейсы ABI. Но с ней вы научитесь писать программы только под операционную систему. Я же люблю загружать с нуля мой собственный BBC Microbit или Rasperry Pi. В этом посте я набросал пару шагов, которые успел сделать в этом направлении.
Читать дальше →
Всего голосов 33: ↑32 и ↓1 +31
Комментарии 19

Микросервисы Rust в серверном WebAssembly

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

Язык программирования Rust за последние несколько лет значительно распространился. Он несколько лет подряд считается самым любимым языком программирования среди разработчиков и включён в состав ядра Linux. Rust позволяет разработчикам писать корректные программы, обеспечивающие безопасность при работе с памятью, а также такие же компактные и быстрые, как на языке C. Он идеально подходит для создания инфраструктурного программного обеспечения, включая серверные приложения, от которых требуется высокая надёжность и производительность.
Читать дальше →
Всего голосов 29: ↑26 и ↓3 +23
Комментарии 10

Анонсируем Dart 3

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

Привет из Google I/O 2023. Сегодня, в прямом эфире из Маунтин-Вью, мы объявляем о выпуске Dart 3 - самого крупного релиза Dart на сегодняшний день! Dart 3 содержит три основных усовершенствования. Во-первых, мы завершили путь к 100% надёжная null безопасности. Во-вторых, мы добавили новые возможности языка для записей, шаблонов и модификаторов классов. В-третьих, мы заглядываем в будущее, где мы расширим поддержку наших платформ, добавив нативный код для веб с помощью Wasm-компиляции. Давайте разберемся во всём в деталях.

Читать далее
Всего голосов 10: ↑4 и ↓6 -2
Комментарии 4

Любите ли вы Rust, как люблю его я?

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

Привет, коллеги.

На самом деле ещё несколько месяцев назад я ненавидел Rust и задавался лишь одним вопросом: какого чёрта я вообще с ним связался? Но сегодня - сегодня всё иначе. И про это я хочу предложить немного доводов разобрать с ним.

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

Он безопасный. Это, правда, не совсем так, но если взять условного новичка, который напишет программу на C и условного новичка, который напишет программу на Rust - шанс, что вторая выйдет более безопасной окажется существенно выше. По крайней мере, атака через переполнение буфера, почти гарантировано, провалится (не станем отрицать наличие дарований, которые даже там, где это почти невозможно, смогут заложить уязвимость).

Он необычный. Уверен, вы сталкивались со странными языками программирования. Такими, которые ломают привычную парадигму и заставляют мыслить иначе. Например, люди, всю жизнь работающие с объектно-ориентированным подходом, нередко, теряются, когда сталкиваются с функциональным программированием, т.к. там иной подход. Да даже далеко ходить не надо; столкновение с попыткой воспользоваться OpenGL из привычного C++, в какой-то момент, рвёт все шаблоны и в воздухе повисает лишь два вопроса: "какого..." и "зачем вы так со мной". Это, разумеется, проходит, но не сразу.

Читать далее
Всего голосов 25: ↑19 и ↓6 +13
Комментарии 110

WebAssembly: Docker без контейнеров

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

«Если бы WASM+WASI существовали в 2008 году, нам бы не пришлось создавать Docker. WebAssembly на сервере — будущее компьютерных технологий», считает Соломон Хайкс, соучредитель корпорации Docker и автор Docker Open Source Initiative.

Сравнительно недавно Docker объявил о поддержке WebAssembly на базе WasmEdge. А мы перевели фундаментальный, но практичный материал о том, как пользоваться этой технологией в экосистеме Docker и чем Wasm-контейнер отличается от классического. 

Читать далее
Всего голосов 53: ↑51 и ↓2 +49
Комментарии 35

Как я приютил rust wasm при помощи yarn

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

О том как изучив инструмент, можно навести порядок в проекте.

Решил я тут на днях попробовать соорудить что нибудь на wasm, поскольку ранее начитался про него и выбрал Rust. Это рассказ про то как я затащил wasm на фронтенд без боли.

В чём заключается упомянутая боль?

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

Читать далее
Всего голосов 7: ↑6 и ↓1 +5
Комментарии 2

Распознавание банковских карт в видеопотоке в браузере с помощью SmartEngines и WebAssembly

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

С активным развитием и распространением технологии WebAssembly (сокращённо WASM) появилась возможность создавать веб-модули, которые можно загружать с сервера и исполнять их прямо в браузере! Мы не смогли пройти мимо такой возможности, и, после долгих оптимизаций, представили свой модуль, умеющий распознавать банковские карты, баркоды, машиночитаемые зоны, номера телефонов и документы прямо в браузере.

Дальше мы расскажем о том, как с помощью wasm-модуля от Smart Engines распознать номер банковской карты, просто поднеся её к веб-камере ноутбука.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 7

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