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

WebAssembly *

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

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

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

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

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

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

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

Новости

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

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

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

Настраиваем минимальный WEB-сервер на Repka Pi 3. NGINX + PHP-FPM + MySQL и ставим Wordpress

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

В этой статье я расскажу как установить на Repka Pi 3 полноценный WEB сервер на Nginx с php-fpm и MySQL для того, чтоб в конечном счете установить WordPress и начать делать и размещать Ваш сайт на данной платформе. Ставить будем на родную ОС Repka Pi от 11.12.23 (последняя актуальна прошивка на момент написания статьи).

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

Dart 3.3 — что нового в Dart?

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

Статья представляет из себя композицию нескольких авторских переводов статей от лица команды разработчиков Dart/Flutter, ссылки на оригинальные материалы будут даны в конце статьи.

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

Истории

Оптимизация js/WebGL/Web Assembly

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

Не так давно я писал про свой 2d движок jsge. При написании рендера, делал оптимизацию кода, а также экспериментировал с web assembly. Как и обещал, написал отдельную статью про результаты.

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

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

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

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

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

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 13

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

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

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

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

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

Читать далее
Всего голосов 49: ↑43 и ↓6 +37
Комментарии 45

О JavaScript и WebAssembly

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


Hello world!


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


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

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

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

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

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

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

Анонс Dart 3.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

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

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

Утечки персональных данных в России бьют все рекорды. За два года их совокупное число выросло – только вдумайтесь – в 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 мин
Количество просмотров 49K

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В этой статье мы расскажем, как запустить программу на 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.9K
Я немного изучил 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

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