Языки программирования

Учебник WebAssembly (Wasm) для начинающих

27 уроков · 8 разделов · бесплатно, без регистрации

Начать с первого урока

WebAssembly (Wasm) — портируемый бинарный байткод, дающий почти нативную скорость в браузере и за его пределами. Этот курс ведёт от азов (стековая виртуальная машина, текстовый формат WAT, четыре типа данных, линейная память) к практике: вы научитесь читать и писать модули руками, загружать Wasm из JavaScript, передавать числа, строки и массивы, компилировать в Wasm код на C/C++, Rust и Go, отлаживать и трезво оценивать производительность. Отдельные разделы посвящены жизни Wasm вне браузера — WASI, serverless, плагины, компонентная модель — и безопасности песочницы. Курс для тех, кто знаком с программированием (JS, C/C++, Rust или Go) и хочет понять, как и зачем устроен этот «четвёртый язык веба».

Курс «WebAssembly (Wasm)» состоит из 8 разделов и 27 уроков: Введение: что такое WebAssembly, Как устроен WebAssembly, Текстовый формат WAT, Память и данные, Wasm и JavaScript, Компиляция из языков, Инструменты и производительность и За пределами браузера и будущее. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение: что такое WebAssembly

    1. Что такое WebAssembly

      WebAssembly — портируемый бинарный байткод, который выполняется почти на скорости нативного кода в браузере и за его пределами.

    2. Проблема, которую решает Wasm

      Почему JavaScript упирается в потолок на тяжёлых задачах и зачем вебу понадобился быстрый портируемый байткод.

    3. Wasm и JS: партнёры, а не конкуренты

      Почему WebAssembly спроектирован как дополнение к JavaScript, и где между ними проходит граница ответственности.

  2. 2 Как устроен WebAssembly

    1. Стековая виртуальная машина

      Как Wasm исполняет код через стек операндов: push, pop и почему такая модель компактна и быстро валидируется.

    2. Бинарный формат и текстовый WAT

      Два лица Wasm: компактный .wasm для машины и читаемый текстовый .wat для человека, и как они связаны.

    3. Типы данных: всего четыре числа

      Почему у WebAssembly только i32, i64, f32 и f64, и как из этих базовых типов строится всё остальное.

  3. 3 Текстовый формат WAT

    1. Модуль и s-выражения

      Структура WAT-модуля изнутри: что такое s-выражения, как из вложенных скобок собирается полноценный модуль.

    2. Функции, параметры и локальные переменные

      Как объявить функцию в WAT: параметры, результат, локальные переменные и работа со стеком внутри тела.

    3. Экспорт и импорт

      Как функция Wasm становится видимой снаружи через export и как модуль получает функции извне через import.

    4. Первый модуль вручную: сумма

      Пишем с нуля полноценный WAT-модуль со сложением, экспортируем функцию и разбираем каждую строку.

  4. 4 Память и данные

    1. Линейная память: единый массив байт

      Что такое linear memory в Wasm: один непрерывный массив байт, доступный и модулю, и хосту, и как с ним работать.

    2. Почему в Wasm нет сборщика мусора

      WebAssembly по умолчанию не имеет GC: память управляется вручную, и это влияет на предсказуемость и языки.

    3. Глобальные переменные и таблицы

      Ещё две сущности модуля: global для разделяемого состояния и table для косвенных вызовов функций.

  5. 5 Wasm и JavaScript

    1. Загрузка и запуск Wasm из JavaScript

      Как из JS загрузить .wasm, инстанцировать модуль через WebAssembly.instantiate и вызвать экспортированные функции.

    2. Обмен числами: быстрая граница

      Почему числа между JS и Wasm передаются мгновенно, как они отображаются на типы Wasm и где подвох с i64.

    3. Строки и массивы через память

      Числа летят легко, но строки и массивы приходится передавать через линейную память — разбираем механику.

  6. 6 Компиляция из языков

    1. C и C++ в Wasm: Emscripten

      Как Emscripten компилирует код на C/C++ в WebAssembly и зачем нужна эмуляция системного окружения.

    2. Rust в Wasm: wasm-pack и wasm-bindgen

      Почему Rust и WebAssembly — идеальная пара, и как wasm-bindgen автоматизирует обмен сложными типами.

    3. Go и AssemblyScript в Wasm

      Обзор ещё двух путей в Wasm: Go со своим рантаймом и AssemblyScript — подмножество TypeScript для Wasm.

  7. 7 Инструменты и производительность

    1. Инструменты: WABT, wasmtime, рантаймы

      Обзор практического инструментария Wasm: wat2wasm/wasm2wat, wasm-objdump, валидаторы и автономные рантаймы.

    2. Отладка Wasm

      Как отлаживать WebAssembly: source maps, DWARF-отладка в браузере, логирование через импорты и ловушки.

    3. Производительность: когда Wasm реально быстрее

      Трезвый взгляд: где Wasm стабильно обгоняет JS, где паритет, и почему граница данных может съесть выигрыш.

  8. 8 За пределами браузера и будущее

    1. Применения в вебе

      Реальные продукты на Wasm: игры Unity и Unreal, Figma, Photoshop в браузере, видеокодеки и криптография.

    2. WASI: WebAssembly вне браузера

      Системный интерфейс WASI открывает Wasm доступ к файлам и сети безопасным образом — Wasm на сервере, edge и в CLI.

    3. Wasm как универсальный рантайм

      За пределами веба: Wasm как формат плагинов, движок serverless-функций и лёгкая альтернатива контейнерам.

    4. Компонентная модель и безопасность

      Компонентная модель как способ собирать Wasm из переносимых частей с богатыми типами, и почему Wasm безопасен.

    5. Ограничения, экосистема и будущее

      Честные ограничения Wasm сегодня (нет DOM, размер, граница данных) и куда движется стандарт: GC, потоки, SIMD.