Раскрытие тайны WebAssembly и открытие силы Cheerp

Здравствуйте, друзья-авантюристы WebAssembly! Меня зовут Sietse, и сегодня мы собираемся погрузиться в захватывающий мир WebAssembly. Если вы похожи на меня, вы, вероятно, слышали шепот об этом мифическом существе по имени WebAssembly и задавались вопросом: «Что это такое? Как это работает? И как я могу использовать его силы?»

Что ж, друзья мои, вам повезло. Я буду вашим дружелюбным гидом в этом эпическом путешествии открытий, делясь своим личным опытом и некоторыми из самых глупых «ага!» моменты, которые у меня были на этом пути. Так что пристегнитесь, и давайте начнем!

Простой реальный пример C++

Чтобы продемонстрировать возможности WebAssembly и Cheerp, давайте возьмем классическую программу на C++, которая вычисляет последовательность Фибоначчи, и преобразуем ее в WebAssembly. Вот код С++:

#include <iostream>

int fibonacci(int n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}
int main() {
    int n = 10; // The position of the Fibonacci number we want to calculate
    std::cout << "Fibonacci number at position " << n << " is: " << fibonacci(n) << std::endl;
    return 0;
}

Теперь, когда у нас есть наш пример кода C++, давайте скомпилируем его в WebAssembly с помощью Cheerp (Для установки перейдите здесь):

  1. Сохраните приведенный выше код C++ как fibonacci.cpp.
  2. Откройте терминал и перейдите в каталог, где находится fibonacci.cpp.
  3. Выполните следующую команду, чтобы скомпилировать код C++ в смесь JavaScript и WebAssembly с помощью Cheerp:

/opt/cheerp/bin/clang++ -target cheerp-wasm fibonacci.cpp -o fibonacci_wasm.js -O3

4. Теперь, когда у нас есть файл fibonacci_wasm.js, создайте файл HTML с именем fibonacci.html со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
    <title>Fibonacci WebAssembly Example</title>
    <script src="fibonacci_wasm.js"></script>
</head>
<body>
    <h1>Fibonacci WebAssembly Example</h1>
    <button onclick="runFibonacci()">Run Fibonacci</button>
    <p id="result"></p>
    <script>
        function runFibonacci() {
            let result = _Z4mainv(); // Call the compiled Fibonacci function
            document.getElementById("result").innerHTML = "Fibonacci number at position 10 is: " + result;
        }
    </script>
</body>
</html>

5. Откройте fibonacci.html в браузере и нажмите кнопку «Выполнить Фибоначчи», чтобы увидеть результат вычисления Фибоначчи.

И вот оно! Вы успешно скомпилировали простую программу на C++ в WebAssembly с помощью Cheerp и выполнили ее в браузере. В следующей части нашей серии мы рассмотрим более сложные темы и углубимся в волшебное царство WebAssembly.

А пока удачного кодирования!