Русский

Учебник по WebAssembly

Учебник WebAssembly: Путеводитель для начинающих

Здравствуйте, будущие маги WebAssembly! Я рад приветствовать вас в этом захватывающем путешествии в мир WebAssembly. Как某人, кто преподавал informatiku не один год (давайте просто скажем, что я помню времена, когда гибкие диски действительно были гибкими), я здесь, чтобы сделать это приключение как можно более интересным и доступным. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с мной!

WebAssembly - Home

Что такое WebAssembly?

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

WebAssembly, часто сокращается как Wasm, это двоичный формат инструкций, предназначенный для эффективного выполнения в веб-браузерах. Это как тайный код, который понимает ваш браузер, позволяя программам работать на了近-native скорости.

Почему вам это должно быть важно?

  1. Скорость: WebAssembly очень быстрый. Это как upgrade с велосипеда на спортивный автомобиль для ваших веб-приложений.
  2. Многообразие языков: Вы больше не ограничены JavaScript. C, C++, Rust — bring 'em on!
  3. Безопасность: WebAssembly работает в изолированной среде, сохраняя все безопасным и надежным.

Начало работы с WebAssembly

Настройка вашей рабочей среды

Прежде чем мы начнем программировать, нам нужно настроить наше рабочее пространство. Это как подготовка вашей кухни перед приготовлением изысканного блюда. Вот что вам понадобится:

  1. Современный веб-браузер (Chrome, Firefox, Safari или Edge)
  2. Текстовый редактор (я рекомендую Visual Studio Code, но используйте то, с чем вам удобно)
  3. Набор инструментов Emscripten (мы установим это вместе)

Давайте установим Emscripten:

# Клонировать репозиторий Emscripten
git clone https://github.com/emscripten-core/emsdk.git

# Войти в克隆ированную директорию
cd emsdk

# Скачать и установить последние инструменты SDK
./emsdk install latest

# Активировать последние инструменты SDK
./emsdk activate latest

# Настроить переменные окружения
source ./emsdk_env.sh

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

Ваш первый WebAssembly программ

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

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

Создайте файл с именем hello.c и добавьте следующий код:

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

Это как написание письма, которое мы собираемся перевести на язык, понятный нашему браузеру.

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

Теперь давайте превратим наш код на C в WebAssembly. Выполните эту команду в вашем терминале:

emcc hello.c -s WASM=1 -o hello.html

Эта команда как putting our letter into a magical translation machine. Она создает три файла:

  • hello.wasm: Двоичный файл WebAssembly
  • hello.js: JavaScript код для связи
  • hello.html: HTML файл для запуска нашей программы

Шаг 3: Запуск вашей WebAssembly программы

Откройте файл hello.html в вашем веб-браузере. Вы должны увидеть "Hello, WebAssembly World!" напечатанным на странице. Поздравляю! Вы только что запустили свою первую WebAssembly программу!

Понимание магии

Давайте разберем, что только что произошло:

  1. Мы написали простой код на C.
  2. Мы использовали Emscripten для компиляции нашего кода на C в WebAssembly.
  3. Emscripten также сгенерировал JavaScript для загрузки и выполнения нашей WebAssembly.
  4. Браузер выполнил наш код WebAssembly, напечатав наше сообщение.

Это как если бы мы написали письмо на английском (C), перевели его на универсальный язык (WebAssembly), а затемели interpreter (JavaScript) чтобы он его прочел вслух на языке, понятном всем (браузер).

Продолжение: Простой калькулятор

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

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

Создайте новый файл под названием calculator.c:

#include <emscripten.h>

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

Здесь, EMSCRIPTEN_KEEPALIVE как putting a giant "IMPORTANT" stamp on our function. Он говорит Emscripten, чтобы он не оптимизировал эту функцию.

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

Скомпилируем наш калькулятор:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Эта команда немного сложнее, но думайте об этом как о даче конкретных инструкций нашей translation machine.

Шаг 3: Создание HTML интерфейса

Создайте файл под названием calculator.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Calculator</title>
</head>
<body>
<h1>WebAssembly Calculator</h1>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="calculateSum()">Add</button>
<p>Result: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

Этот HTML файл как создание удобного интерфейса для нашего калькулятора. У него есть поля для ввода чисел и кнопка для запуска расчета.

Шаг 4: Запуск вашего WebAssembly калькулятора

Откройте calculator.html в вашем браузере. Вы должны увидеть два поля для ввода и кнопку "Add". Введите два числа, нажмите "Add", и voila! Ваш WebAssembly калькулятор в действии!

Заключение

И вот мы и arrived, folks! Мы сделали свои первые шаги в захватывающем мире WebAssembly. Мы настроили нашу среду, создали программу "Hello, World!" и даже собрали простой калькулятор.

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

В следующем уроке мы углубимся в возможности WebAssembly и рассмотрим, как оптимизировать производительность. Пока что, happy coding!

Method Description
emcc Emscripten compiler command
EMSCRIPTEN_KEEPALIVE Macro to prevent function from being optimized out
Module.cwrap Creates a wrapper to call compiled C functions
Module.ccall Calls a compiled C function directly

Credits: Image by storyset

 
Следующий учебник:
WebAssembly - Обзор