Привет, друзья! 👋 Сегодня мы с тобой окунемся в удивительный мир WebAssembly (WASM) — технологии, которая позволяет запускать супербыстрый код прямо в браузере! ⚡ Если ты давно хотел попробовать WASM, но не знал, с чего начать — эта статья для тебя.
Мы напишем первую программу на WebAssembly, разберёмся, как это работает, и даже запустим её в браузере. Поехали! 🎉
🔍 Что такое WebAssembly?
WebAssembly — это низкоуровневый бинарный формат кода, который выполняется в браузере с почти нативной скоростью. Он создан для того, чтобы ускорять веб-приложения, особенно там, где JavaScript не справляется.
🔹 Почему WASM — это круто?
✔️ Быстрее JavaScript (в некоторых задачах — в разы!)
✔️ Поддержка множества языков (C, C++, Rust, Go и др.)
✔️ Безопасность (песочница, как у JS)
✔️ Работает во всех современных браузерах
🛠 Подготовка: что нам понадобится?
Для работы с WASM нам нужно:
- Компилятор (например, Emscripten для C/C++ или wasm-pack для Rust).
- Текстовый редактор (VS Code, Sublime Text и т. д.).
- Браузер (Chrome, Firefox, Edge — все поддерживают WASM).
Сегодня мы будем использовать C++ и компилятор Emscripten, потому что это один из самых простых способов начать.
💻 Шаг 1: Устанавливаем Emscripten
Emscripten — это инструмент, который компилирует C/C++ в WASM.
Установка (Linux/macOS):
Проверяем установку:
Если видишь версию — всё ок! ✅
(Для Windows установка аналогичная, но через emsdk.bat)
✨ Шаг 2: Пишем первую программу на C++
Создадим файл hello.cpp с таким содержимым:
🔹 Что здесь происходит?
- EMSCRIPTEN_KEEPALIVE — говорит компилятору не удалять эту функцию (она нам понадобится в JS).
- extern "C" — отключает "мэнглинг" имён, чтобы функцию можно было вызвать из JavaScript.
- add() — простая функция сложения двух чисел.
⚙️ Шаг 3: Компилируем в WASM
Теперь скомпилируем наш код в WASM:
🔹 Что за флаги?
- -o hello.html — создаёт HTML-страницу для запуска.
- -s WASM=1 — включает генерацию WASM.
- -s EXPORTED_FUNCTIONS — экспортирует функцию add.
- -s EXTRA_EXPORTED_RUNTIME_METHODS — добавляет метод ccall для вызова WASM из JS.
После компиляции появятся три файла:
- hello.wasm (бинарный WASM)
- hello.js (генерированный JS-код)
- hello.html (веб-страница)
🌐 Шаг 4: Запускаем в браузере!
Открываем hello.html в браузере (лучше через локальный сервер, например, python -m http.server).
Теперь можно вызвать нашу функцию из консоли браузера:
И увидишь результат: 8! 🎉
(Если не работает — проверь, что функция экспортирована и правильно вызвана.)
🏆 Что дальше?
Ты только что написал свою первую программу на WebAssembly! 🚀 Дальше можно:
- Изучать Rust + WASM (очень популярная связка).
- Оптимизировать тяжёлые вычисления (например, игры, 3D-графика).
- Интегрировать WASM в React/Vue-приложения.
💡 Вывод
WebAssembly — это мощный инструмент для ускорения веб-приложений. Сегодня мы разобрали базовый пример, но потенциал WASM огромен!
Попробуй написать что-то своё и поделись в комментариях! 👇 Удачи в изучении WASM! 🚀🔥
(P.S. Если есть вопросы — спрашивай, помогу! 😊