WebAssembly и C++: как запустить код на PythonLib в браузере

Вступление: Почему C++ вдруг стал веб-технологией?

Если вы пишете на C++ и заглядываете на PythonLib, вы наверняка привыкли, что ваш код живёт где-то глубоко — в серверной части, в ядре игрового движка или в высоконагруженных вычислениях. Веб-фронтенд традиционно был территорией JavaScript, HTML и CSS. Но последние пять лет всё изменилось.

Представьте: вы написали на C++ сложный алгоритм обработки изображений или симуляцию физики. Раньше, чтобы показать это в браузере, пришлось бы переписывать всё на JavaScript — теряя производительность и время. Теперь есть WebAssembly (часто пишут просто wasm). Это технология, которая позволяет запускать скомпилированный C++ код прямо в браузере, на скорости, близкой к нативной.

В этой статье мы разберёмся, что такое WebAssembly для разработчика на C++, зачем это нужно проекту PythonLib, и напишем реальный пример компиляции C++ в wasm. Без воды, только код и практика.

Что такое WebAssembly простыми словами

WebAssembly — это низкоуровневый бинарный формат инструкций. Его можно представить как «ассемблер для веба». Браузеры (Chrome, Firefox, Safari, Edge) умеют выполнять .wasm-файлы почти так же быстро, как нативный машинный код.

Главное отличие от JavaScript: wasm — это не язык программирования, а цель компиляции. Вы пишете на C++, C, Rust или Go, компилируете в .wasm, и браузер это запускает.

Как это работает в связке C++ → WebAssembly

Процесс выглядит так:

• Вы пишете код на C++ (например, функцию расчёта чисел Фибоначчи или сложный математический модуль).
• Используете компилятор Emscripten (на основе LLVM/Clang) для сборки в .wasm + JavaScript-обёртку.
• Подключаете полученные файлы к HTML-странице.
• Пользователь открывает страницу — и C++ код выполняется в его браузере.

Для PythonLib это открывает интересные возможности: например, вы можете написать вычислительную библиотеку на C++, скомпилировать её в wasm, и использовать в учебных примерах прямо на сайте, не требуя от пользователя установки компилятора.

Зачем C++ разработчику WebAssembly (и при чём тут PythonLib)

Многие считают, что WebAssembly нужен только для игр или тяжёлой графики. На самом деле сценариев гораздо больше. Вот ключевые причины, почему стоит разобраться с wasm на PythonLib:

• Скорость. Критичные участки кода на C++ работают в 2–10 раз быстрее, чем аналоги на чистом JavaScript. Если вы пишете математические или криптографические алгоритмы — wasm ваш выбор.
• Повторное использование кода. Не нужно переписывать legacy C++ библиотеки под веб. Скомпилировал — и готово.
• Безопасность. Wasm выполняется в изолированной песочнице браузера. Это безопаснее, чем запускать нативный плагин.
• Образовательный аспект. На PythonLib можно показывать живые примеры C++ кода, которые работают прямо в браузере — читатель видит не только синтаксис, но и результат выполнения.

Ещё один важный момент: WebAssembly не заменяет JavaScript, а дополняет его. JS остаётся для управления DOM, событий и интерфейса, а C++ берёт на себя вычисления.

Практика: Компилируем C++ в WebAssembly

Давайте напишем простую программу на C++, скомпилируем её в wasm и запустим в браузере. Для этого нам понадобится Emscripten SDK.

Шаг 1. Установка Emscripten

Если вы работаете на Linux или macOS, установка делается одной командой (подробнее на emscripten.org):

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

На Windows можно использовать WSL или скачать готовый бинарный дистрибутив.

Шаг 2. Пишем C++ код

Создадим файл math_utils.cpp. Это будет простая функция для вычисления факториала — классический пример для образовательного сайта PythonLib.

// math_utils.cpp
#include <emscripten.h>

extern "C" {
    // Функция, доступная из JavaScript
    EMSCRIPTEN_KEEPALIVE
    int factorial(int n) {
        if (n <= 1) return 1;
        int result = 1;
        for (int i = 2; i <= n; ++i) {
            result *= i;
        }
        return result;
    }

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

Ключевые моменты:

• extern "C" — отключает декорирование имён, чтобы функция была доступна по точному имени.
• EMSCRIPTEN_KEEPALIVE — макрос, который говорит компилятору не выкидывать функцию при оптимизации (иначе Emscripten может решить, что она не используется).

Шаг 3. Компиляция

Запускаем команду:

emcc math_utils.cpp -o math_utils.js -s EXPORTED_FUNCTIONS='["_factorial", "_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

Что здесь происходит:

• emcc — компилятор Emscripten.
• -o math_utils.js — создаёт JavaScript-обёртку и .wasm файл.
• -s EXPORTED_FUNCTIONS — указываем, какие C++ функции экспортировать (имена с подчёркиванием в начале).
• -s EXPORTED_RUNTIME_METHODS — добавляем методы для вызова C++ из JS.

После компиляции у вас появятся файлы: math_utils.js, math_utils.wasm и (опционально) math_utils.html.

Шаг 4. Запускаем в браузере

Создадим простой HTML-файл index.html:

<!DOCTYPE html>
<html>
<head>
    <title>C++ + WebAssembly на PythonLib</title>
</head>
<body>
    <h3>Вычисления на C++ в браузере</h3>
    <p>Факториал числа 7: <span id="result"></span></p>

    <script src="math