# WebAssembly - Модули

Привет, начинающие программисты! Сегодня мы отправимся в увлекательное путешествие в мир модулей WebAssembly. Не волнуйтесь, если вы новички в программировании – я буду вашим дружелюбным проводником, и мы будем двигаться шаг за шагом. К концу этого урока у вас будет прочное понимание модулей WebAssembly и того, как они работают. Погружаемся!

WebAssembly - Modules

Что такое WebAssembly?

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

Шаг 1: Понимание модулей WebAssembly

Модули WebAssembly являются строительными блоками приложений WebAssembly. Представьте их как детали LEGO – каждый модуль является самостоятельйм блоком, который можно комбинировать с другими для создания чего-то удивительного.

Основные концепции

Бинарный формат: Модули обычно распространяются в бинарном формате (.wasm файлы).
Компиляция: Эти модули компилируются из языков, таких как C, C++ или Rust.
Импорты и экспорты: Модули могут импортировать функциональность и экспортировать свои функции.

Шаг 2: Создание и использование модулей WebAssembly

Теперь давайте рассмотрим процесс создания и использования модуля WebAssembly.

2.1 Написание модуля WebAssembly

Сначала нам нужно написать наш модуль. Мы используем простую функцию на языке C в качестве примера:

// add.c
int add(int a, int b) {
    return a + b;
}

Эта функция складывает два числа. Просто, правда? Но как мы превратим это в модуль WebAssembly?

2.2 Компиляция в WebAssembly

Для компиляции этого в WebAssembly мы используем инструмент под названием Emscripten. Вот команда:

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

Эта команда создает два файла:

add.wasm: Наш модуль WebAssembly
add.js: JavaScript код для загрузки и использования нашего модуля

2.3 Загрузка модуля в JavaScript

Теперь давайте посмотрим, как мы можем использовать этот модуль на веб-странице:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Функция сложения</title>
</head>
<body>
    <h1>WebAssembly Функция сложения</h1>
    <p>Результат: <span id="result"></span></p>
    <script src="add.js"></script>
    <script>
        Module.onRuntimeInitialized = async _ => {
            const result = Module._add(5, 3);
            document.getElementById('result').textContent = result;
        };
    </script>
</body>
</html>

Объяснение кода

Давайте разберем, что происходит в этом коде:

Мы включаем файл add.js, который загружает наш модуль WebAssembly.
Мы используем Module.onRuntimeInitialized, чтобы убедиться, что модуль полностью загружен перед использованием.
Мы вызываем нашу функцию add с помощью Module._add(5, 3).
Результат отображается на странице.

Пример: более сложный модуль

Теперь, когда мы видели простой пример, давайте попробуем что-то более сложное. Мы создадим модуль, который calculates факториал числа.

// factorial.c
int factorial(int n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

Компилируем его тем же способом:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Теперь давайте используем его в HTML:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Калькулятор факториала</title>
</head>
<body>
    <h1>WebAssembly Калькулятор факториала</h1>
    <input type="number" id="input" value="5">
    <button onclick="calculateFactorial()">Рассчитать</button>
    <p>Результат: <span id="result"></span></p>
    <script src="factorial.js"></script>
    <script>
        function calculateFactorial() {
            const n = document.getElementById('input').value;
            const result = Module._factorial(n);
            document.getElementById('result').textContent = result;
        }

        Module.onRuntimeInitialized = async _ => {
            calculateFactorial();
        };
    </script>
</body>
</html>

Вывод

Когда вы запустите это в браузере, вы увидите поле ввода, где можно ввести число. Нажав кнопку "Рассчитать", вы увидите факториал этого числа, вычисленный с помощью нашего модуля WebAssembly!

Заключение

Поздравления! Вы только что сделали свои первые шаги в мир модулей WebAssembly. Мы рассмотрели основы создания, компиляции и использования модулей WebAssembly в веб-приложениях. Помните, это только начало – WebAssembly открывает новый мир возможностей для веб-разработки, позволяя вам перенести высокопроизводительные вычисления в браузер.

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

Метод	Описание
Module.onRuntimeInitialized	Убедитесь, что модуль WebAssembly полностью загружен перед использованием
Module._functionName	Вызов функции, exported из модуля WebAssembly
emcc	Команда компилятора Emscripten для создания модулей WebAssembly

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

Credits: Image by storyset

Предыдущий учебник:

WebAssembly - "Привет мир"

Следующий учебник:

WebAssembly - Валидация