Раскрытие тайны 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 (Для установки перейдите здесь):
- Сохраните приведенный выше код C++ как
fibonacci.cpp
. - Откройте терминал и перейдите в каталог, где находится
fibonacci.cpp
. - Выполните следующую команду, чтобы скомпилировать код 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.
А пока удачного кодирования!