Веб-сборка — это новый веб-стандарт, который позволяет разработчикам запускать низкоуровневый код, такой как C++ или Rust, прямо в браузере. Его часто сокращают до wasm
, это двоичный формат инструкций для виртуальной машины на основе стека. Он разработан как переносимая цель для компиляции языков высокого уровня, что позволяет развертывать в Интернете клиентские и серверные приложения. Это позволит разработчикам создавать более мощные и производительные веб-приложения с такими функциями, как трехмерная графика и аудио и видео в реальном времени.
Вот простой пример использования WebAssembly в JavaScript.
Во-первых, вам нужно создать файл .wasm
, содержащий код WebAssembly, который вы хотите запустить. Следующий код представляет собой простой пример модуля WebAssembly, который экспортирует одну функцию, которая принимает два целых числа в качестве входных данных и возвращает их сумму:
(module (func (export "add") (param i32 i32) (result i32) get_local 0 get_local 1 i32.add) )
Затем вы можете использовать API JavaScript WebAssembly для загрузки и создания экземпляра модуля, а также вызывать экспортированные функции из JavaScript.
<script> // Fetch and instantiate our wasm module WebAssembly.instantiateStreaming(fetch('add.wasm')) .then(obj => { // Use the exports object to call the add function var result = obj.instance.exports.add(2, 3); console.log(result); // Outputs: 5 }); </script>
Это всего лишь простой пример, и WebAssembly можно использовать для гораздо более сложных и мощных приложений. Стоит отметить, что это все еще новая технология, которая еще не широко поддерживается во всех браузерах.
Интересно, что вам не нужно импортировать какую-либо конкретную библиотеку JavaScript, чтобы использовать WebAssembly. WebAssembly JavaScript API — это встроенная функция современных веб-браузеров, которую можно использовать непосредственно в коде JavaScript.
В приведенном ранее примере код использует метод WebAssembly.instantiateStreaming()
для загрузки и создания экземпляра модуля WebAssembly. Этот метод является частью JavaScript API WebAssembly, который доступен во всех современных веб-браузерах, поддерживающих WebAssembly.
Другой пример использования WebAssembly для вычисления факториала числа с использованием кода C:
// factorial.c #include <stdio.h> int factorial(int n) { int result = 1; for (int i = 1; i <= n; i++) { result *= i; } return result; }
Чтобы скомпилировать этот код в WebAssembly, мы можем использовать набор инструментов Emscripten:
emcc factorial.c -s WASM=1 -o factorial.wasm
Это создаст файл с именем factorial.wasm
, который содержит двоичный файл WebAssembly.
Чтобы использовать этот модуль WebAssembly в JavaScript, мы можем использовать метод WebAssembly.instantiate()
:
const importObject = {}; WebAssembly.instantiateStreaming(fetch('factorial.wasm'), importObject) .then(({instance}) => { const factorial = instance.exports.factorial; console.log(factorial(5)); // 120 });
В этом примере мы используем метод WebAssembly.instantiateStreaming()
для загрузки файла factorial.wasm
, а затем мы можем вызвать функцию factorial()
, экспортированную из модуля WebAssembly. Функция принимает целочисленный параметр n
и возвращает факториал этого числа.
Таким образом, мы можем использовать код C в веб-сборке и сделать веб-страницы более эффективными.
Также стоит отметить, что если вы хотите использовать WebAssembly с фреймворком JavaScript, таким как React или Angular, вы все равно можете использовать JavaScript API WebAssembly непосредственно в своем коде без необходимости в каких-либо дополнительных библиотеках.
Однако есть некоторые библиотеки с открытым исходным кодом, такие как
wasm-bindgen
, которые могут помочь вам упростить процесс взаимодействия с модулями WebAssembly из JavaScript. Он предоставляет высокоуровневый интерфейс для работы с модулями WebAssembly, а также может обрабатывать некоторые низкоуровневые детали за вас.
Заключение
WebAssembly может революционизировать наши представления о веб-разработке. Благодаря возможности запуска высокопроизводительного кода в браузере он открывает совершенно новый мир возможностей для веб-приложений. WebAssembly справится со всем: от видеоигр и виртуальной реальности до сложных научных симуляций. По мере того, как все больше и больше разработчиков используют эту технологию, мы можем ожидать взрыв новых и инновационных веб-приложений, которые раздвигают границы возможного в Интернете. Будущее веб-разработки выглядит ярче, чем когда-либо прежде, и WebAssembly находится в авангарде этой захватывающей новой эры.
Иконки предоставлены: Flaticon
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.