WebAssembly - Работа с Node.js

Здравствуйте, стремящиеся к программированию! Сегодня мы отправимся в увлекательное путешествие в мир WebAssembly и Node.js. Не волнуйтесь, если эти термины кажутся вам инопланетными языками - к концу этого руководства вы будете говорить на них свободно!

WebAssembly - Working with Nodejs

Что такое WebAssembly?

WebAssembly, часто сокращаемое до Wasm, является супергероем в мире программирования. Это двоичный формат инструкций, который позволяет коду, написанному на языках, таких как C, C++ и Rust, работать в веб-браузерах с了近-native скоростью. Представьте себе возможность играть в сложные 3D-игры прямо в браузере - это та сила, которую WebAssembly привносит в дело!

Зачем Node.js?

Теперь вы можете задаться вопросом: "Что Node.js имеет общего со всем этим?" Ну, Node.js - это как команда за кулисами, которая делает магию возможной. Это среда выполнения JavaScript, которая позволяет нам запускать JavaScript за пределами веб-браузера. Когда мы combine WebAssembly с Node.js, мы получаем лучшее из обоих миров - скорость WebAssembly и гибкость Node.js.

Настройка нашего окружения

Прежде чем окунуться в код, давайте настроим наше рабочее пространство. Не волнуйтесь, это проще, чем настроить новый смартфон!

  1. Установите Node.js с официального сайта (https://nodejs.org)
  2. Откройте ваш терминал или командную строку
  3. Создайте новую директорию для нашего проекта:
    mkdir wasm-nodejs-tutorial
    cd wasm-nodejs-tutorial
  4. Инициализируйте новый проект Node.js:
    npm init -y

Отлично! Теперь мы готовы начать программирование.

Ваш первый модуль WebAssembly

Давайте создадим простой модуль WebAssembly, который складывает два числа. Мы напишем его на C и скомпилируем в WebAssembly.

Шаг 1: Написание C кода

Создайте файл с именем add.c и следующим содержимым:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Не паникуйте, если это выглядит как иероглифы! Давайте разберем это:

  • #include <emscripten.h> включает библиотеку Emscripten, которая помогает нам компилировать C в WebAssembly.
  • EMSCRIPTEN_KEEPALIVE - это специальная директива, которая говорит компилятору сделать эту функцию доступной из JavaScript.
  • int add(int a, int b) - это наша функция, которая принимает два целых числа и возвращает их сумму.

Шаг 2: Компиляция в WebAssembly

Чтобы скомпилировать этот C код в WebAssembly, мы должны установить Emscripten. Следуйте инструкциям по установке на сайте Emscripten (https://emscripten.org/docs/getting_started/downloads.html).

Once installed, run this command:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Эта команда компилирует наш C код в WebAssembly и создает два файла: add.wasm и add.js.

Использование WebAssembly в Node.js

Теперь comes the exciting part - using our WebAssembly module in Node.js!

Create a file named index.js with the following content:

const fs = require('fs');
const path = require('path');

const wasmBuffer = fs.readFileSync(path.join(__dirname, 'add.wasm'));

WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
const add = wasmModule.instance.exports._add;
console.log('5 + 3 =', add(5, 3));
});

Давайте разберем это:

  1. Мы импортируем необходимые модули Node.js: fs для операций с файловой системой и path для работы с путями к файлам.
  2. Мы читаем WebAssembly файл в буфер.
  3. Мы используем WebAssembly.instantiate() для загрузки и компиляции нашего WebAssembly модуля.
  4. Once loaded, we can access our add function through wasmModule.instance.exports._add.
  5. Finally, we call our function and log the result.

Запустите этот скрипт с помощью:

node index.js

Если все прошло правильно, вы должны увидеть: 5 + 3 = 8

Поздравления! Вы только что запустили свой первый модуль WebAssembly в Node.js!

Сравнение производительности

Теперь давайте сравним производительность нашей функции WebAssembly с natvie JavaScript функцией.

Добавьте это в ваш index.js:

function jsAdd(a, b) {
return a + b;
}

const iterations = 1000000;

console.time('WebAssembly');
for (let i = 0; i < iterations; i++) {
add(5, 3);
}
console.timeEnd('WebAssembly');

console.time('JavaScript');
for (let i = 0; i < iterations; i++) {
jsAdd(5, 3);
}
console.timeEnd('JavaScript');

Этот код запускает как WebAssembly, так и JavaScript версии нашей функции сложения миллион раз и меряет, как долго это занимает.

Запустите скрипт снова, и вы, вероятно, увидите, что версия WebAssembly быстрее!

Заключение

Мы только что поцарапали поверхность того, что возможно с WebAssembly и Node.js. Представьте себе возможности - вы могли бы использовать сложные алгоритмы, написанные на C или Rust, игровые движки или даже целые приложения, все работающие с了近-native скоростью в Node.js!

помните, что обучение программированию похоже на обучение езде на велосипеде. Сначала это может казаться неустойчивым, но с практикой вы быстро научитесьzooming along. Continue experimenting, keep learning, and most importantly, have fun!

Вот таблица, резюмирующая основные методы, которые мы использовали:

Метод Описание
WebAssembly.instantiate() Компилирует и инстанцирует модуль WebAssembly
fs.readFileSync() Читает файл синхронно
path.join() Объединяет сегменты пути
console.time() Начинает таймер
console.timeEnd() Останавливает таймер и логирует продолжительность

Счастливого кодирования, будущие маги WebAssembly!

Credits: Image by storyset