В моей предыдущей истории я использовал язык C и различные модули npm, доступные для создания модуля веб-сборки, который представляет собой небольшой калькулятор для работы на узле, а также в браузере с использованием той же кодовой базы с разницей в загрузке в зависимости от времени выполнения. Если вы не читали его, обязательно посмотрите C в браузере - Эксперименты с WebAssembly, или вы можете следить за серией, которую я делаю по веб-сборке Эксперименты с Webassembly.

C - хороший язык, но многие его не знают, и если вы хотите сделать что-то популярное в наши дни, это должно быть что-то в мире javascript, поэтому есть AssemblyScript, который использует подмножество Typescript с небольшими обновлениями, чтобы заставить его работать с веб-сборкой.

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

Так много разговоров, давай что-нибудь закодируем. Я буду копировать ту же программу C, базовый калькулятор и тот же пользовательский интерфейс HTML, но на этот раз с другим модулем wasm, созданным с помощью Assemblyscript.

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

Настраивать

Создайте новую папку и инициализируйте проект узла, используя npm init или yarn init, в зависимости от того, что вы предпочитаете, затем установите Assemblyscript как dev-dependency в свой проект и asinit . с помощью npx.

mkdir asmscript && cd asmscript 
npm init -y 
npm install --save-dev assemblyscript 
npx asinit .

После этого вы найдете assembly/ каталог, в котором находится ваш код сценария сборки, и в нем будет файл index.ts с базовым примером веб-сборки.

Код ассемблера для калькулятора

Обновите свой index.ts следующим образом:

Этот index.ts файл целиком представляет собой модуль веб-сборки. Если вы видите мой предыдущий код, который был на языке C с использованием модуля webassembly npm, и этот код имеют много общего. Мы экспортируем функции из веб-сборки, но есть различия между кодом C, который я написал, обычным Typescript и AssemblyScript.

Мы использовали double в коде C, и мы можем использовать number в Typescript для определения числа чисел с плавающей запятой с десятичными знаками. Где double - это тип данных C, в котором хранятся числа с плавающей запятой или числа с десятичными знаками. В Typescript number относится как к целому числу, так и к числу с плавающей запятой. AssemblyScript имеет разные типы данных в зависимости от того, что вы хотите использовать, которые согласованы с типами данных веб-сборки.

Тип данных должен быть в Assemblyscript, в отличие от Typescript. Это вызовет ошибку во время компиляции, если не указан тип данных для переменной или параметра функции.

Когда мы инициализировали проект Assemblyscript с помощью npx asinit ., он добавил несколько сценариев npm в наши package.json - asbuild:untouched и asbuild:optimized, которые не требуют пояснений. Когда вы запустите их, он создаст по 3 файла для каждого -

  • untouched.wasm - Модуль Wasm
  • untouched.wat - Текстовое представление wasm
  • untouched.wasm.map - Исходная карта
  • optimized.wasm - Оптимизирован wasm-модуль
  • optimized.wat - Текстовое представление оптимизированного модуля wasm
  • optimzed.wasm.map - Исходная карта оптимизированного wasm

Запуск в Node.js

Модуль Assemscript легко загрузить в Node, поскольку они уже предоставляют модуль npm для этого @assemblyscript\loader. Вот код для wasm_loader.js -

const fs = require( "fs" ); 
const loader = require( "@assemblyscript/loader" ); 
module.exports = loader.instantiateSync( fs.readFileSync( __dirname + "/build/optimized.wasm" ), { } )

Использование wasm_loader.js -

На бегу

> node index.js 
1 + 2 = 3 
1 - 2 = -1 
1 X 2 = 2 
1 / 2 = 0.5 
1 % 2 = 1 
Square root of 9 = 3

Запуск в браузере

Подобно тому, что мы сделали для кода C с использованием модуля npm webassembly, мы будем делать то же самое и здесь, и нет минимальных изменений в файле main.js, который фактически выполняет всю работу по получению событий и отображению. Изменен загрузчик wasm для браузера wasmloader.js -

И следующее изменение в HTML:

Перейдите на github, чтобы увидеть полный код:

Wasm эксперимент

Полное репо с wasm-экспериментами

Источники

AssemblyScript

Удачного обучения, удачного кодирования!

Первоначально опубликовано на https://skylab.hashnode.dev.