Выполняйте сложные вычисления почти с естественной скоростью, взаимодействуйте с другими языками программирования, а также повышайте безопасность и песочницу.
«WebAssembly заменит JavaScript».
Я много раз читал это на этих интернет-улицах, и это заставило меня задуматься о возможности создания полнофункциональных веб-приложений с помощью WebAssembly.
Во-первых, чтобы успокоить ваши нервы, в настоящее время невозможно использовать WebAssembly в браузере для веб-приложений без связующего кода JavaScript (подробнее о «клеевом коде» позже). Но есть много вещей, которые вы уже можете делать в браузере с помощью WebAssembly, которые раньше вы могли делать только с помощью JavaScript.
Как насчет того, чтобы я отвел вас в путешествие, пока мы изучаем WebAssembly и как вы можете воспользоваться его функциями в качестве разработчика JavaScript? Большинство обсуждаемых вещей также распространяется на Rustaceans, Gophers, Pythonians и любых других разработчиков C++. В конце этой статьи я также покажу вам, как можно подключить небольшой сценарий JavaScript к двоичному файлу WASM и выполнить простую программу на Rust. Так что приходите, пока мы исследуем…
Веб-сборка? Что?
WebAssembly, или сокращенно WASM, — это новая технология, которая в последние годы привлекает большое внимание. Это низкоуровневый двоичный формат инструкций для виртуальной машины на основе стека (ВМ). Он разработан как переносимая цель для предварительной компиляции (AOT) языков высокого уровня, таких как C, C++ и Rust, что позволяет развертывать в Интернете клиентские и серверные приложения.
Ладно, это похоже на много модных словечек. Проще говоря:
WebAssembly — это модная новая виртуальная машина, которая теперь поставляется со всеми веб-браузерами — ну, почти со всеми браузерами (взгляните на вас с Internet Explorer 11 и Opera Mini! — и позволяет запускать критически важный для производительности код бизнес-логики с молниеносной скоростью.
Конечно, мы можем поместить много логики в наши интерфейсы JavaScript, используя наши надежные клиентские фреймворки рендеринга, или мы можем просто поместить нашу логику в серверную часть Node.js и взаимодействовать с ней из внешнего интерфейса с помощью API, верно?
Я могу написать свою логику на JavaScript
Ну да, и именно так это было сделано до того, как WebAssembly присоединился к вечеринке, но помните, когда я сказал «критическую для производительности» бизнес-логику? WebAssembly позиционирует себя не как еще одну среду сценариев для анимации кнопок или отправки форм, а как альтернативу для выполнения тяжелых рабочих нагрузок с почти естественной скоростью. Помните, когда разработчики приложений говорили, что «веб-браузеры никогда не будут запускать прогрессивные веб-приложения (PWA) так же быстро, как нативные приложения»? Ну, уже не совсем так.
Проблема с использованием интерпретируемого языка программирования с динамическими типами (JavaScript) для написания бизнес-логики для приложений, критически важных для производительности, заключается в том, что просто сложно добиться какой-либо приличной производительности или вообще запустить ее в браузере.
С помощью WebAssembly вы можете выполнять сложные вычисления почти с естественной скоростью. JavaScript — это интерпретируемый язык с динамической типизацией, что означает, что он может работать медленно при выполнении сложных операций. WebAssembly, будучи компилируемым языком со статической типизацией, позволяет выполнять сложные вычисления намного быстрее, чем JavaScript. Это делает WebAssembly отличным вариантом для таких задач, как рендеринг видео, трехмерная графика и других операций, требующих больших вычислительных ресурсов.
WebAssembly обеспечивает улучшенную безопасность и песочницу. JavaScript — это язык высокого уровня, который выполняется движком JavaScript браузера, который может быть уязвим для атак. WebAssembly, с другой стороны, выполняется движком WebAssembly браузера, который более безопасен и может быть изолирован для предотвращения запуска вредоносного кода. Это делает WebAssembly отличным вариантом для веб-задач, таких как онлайн-банкинг, обработка платежей, онлайн-игры и безопасное подписание документов, которые требуют высокого уровня безопасности.
WebAssembly приглашает C, C++, Rust, Go и других на браузерную вечеринку!!!
Самое лучшее в WebAssembly — это его способность взаимодействовать с другими языками программирования. Модули WebAssembly могут быть написаны на любом языке, который может быть скомпилирован в байт-код WebAssembly, например C, C++, Rust и других.
Это позволяет разработчикам использовать предпочитаемый ими язык для конкретной задачи, а затем легко интегрировать его в веб-приложение с помощью WebAssembly. Это может быть особенно полезно для разработчиков, которые уже знакомы с определенным языком и хотят использовать его для веб-разработки.
Должны ли вы быть обеспокоены?
Некоторым разработчикам JavaScript появление WebAssembly может показаться обескураживающей перспективой. По мере того, как разрабатывается все больше и больше веб-фреймворков, написанных на таких языках программирования, как Rust, Go и C++, разработчикам становится все проще писать интерфейсы на языках, отличных от JavaScript.
Следует признать, что для других разработчиков JavaScript WebAssembly может стать желанной передышкой от сложного синтаксиса и особенностей JavaScript.
Одним из примеров фреймворка, использующего WebAssembly, является Yew, современный фреймворк Rust для создания веб-приложений. Yew позволяет разработчикам писать безопасный и производительный код, который можно скомпилировать в WASM и запустить прямо в браузере. Это означает, что разработчики Rust теперь могут создавать веб-приложения без изучения JavaScript.
Другой пример — GopherJS, транспилятор, который позволяет разработчикам писать интерфейсный код на Go, а затем компилировать его в JavaScript. Это означает, что разработчики Go также могут создавать веб-приложения без необходимости изучения JavaScript.
Точно так же разработчики C++ теперь могут использовать C++ WebAssembly Framework (CWasm) для создания веб-приложений. CWasm — это библиотека C++, которая предоставляет интерфейс C++ для виртуальной машины WebAssembly, упрощая разработчикам C++ написание веб-приложений, запускаемых в браузере.
Внутри Five, нашей среды с низким кодом, логика приложения может быть написана на JavaScript или TypeScript. Пока что это обычная ванильная веб-разработка. Однако Five предназначен для поддержки WASM. Это означает, что в будущем разработчики смогут писать код на любом языке, который компилируется в WASM, прямо в редакторе кода Five, будь то C#, Python или Rust.
Появление этих фреймворков и решений указывает на то, что WebAssembly становится жизнеспособной альтернативой JavaScript для клиентской веб-разработки. Это пугающая перспектива для разработчиков JavaScript, поскольку это означает, что их навыки могут стать менее востребованными в будущем.
Однако важно отметить, что JavaScript по-прежнему является наиболее широко используемым языком программирования в Интернете, и вряд ли он будет полностью заменен WebAssembly. Вместо этого WebAssembly, скорее всего, будет использоваться для дополнения и расширения возможностей JavaScript.
Начало работы — Запуск двоичного файла WASM с помощью JavaScript
Ты же знаешь, я не могу оставить тебя без кода. Давайте попробуем написать простой двоичный файл WASM, написанный шестью строками на Rust, а затем запустить его в веб-браузере, используя всего 11 строк JavaScript. Я также добавил ссылку на уже скомпилированный двоичный файл WASM на случай, если вы не хотите писать шесть строк на Rust.
Вот пошаговое руководство:
1. Установите Руст
Вы можете установить Rust с помощью скрипта rustup. Просто запустите в своем терминале следующее:
curl https://sh.rustup.rs -sSf | sh
2. Установите wasm-pack
wasm-pack — это библиотека Rust, которую мы будем использовать для компиляции Rust в WASM.
Если вы установили Rust, значит у вас уже установлен Cargo. Выполните следующее, чтобы установить wasm-pack:
cargo install wasm-pack
3. Создайте новый проект Rust
Далее вам нужно создать новый проект Rust. Запустите следующую команду в своем терминале, чтобы создать новый проект Rust с именем wasm_example:
cargo new --lib wasm_example
4. Обновить Cargo.toml
После этого вам нужно добавить библиотеку wasm-bindgen в ваш файл Cargo.toml, который был сгенерирован Cargo. Эта библиотека позволит вам взаимодействовать с JavaScript в вашем коде на Rust.
Добавьте следующую строку в файл Cargo.toml в разделе зависимостей:
wasm-bindgen = "0.2"
ваш Cargo.toml должен выглядеть так:
[package] name = "wasm_example" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib", "rlib"] [dependencies] wasm-bindgen = "0.2"
Не забудьте добавить:
[lib] crate-type = ["cdylib", "rlib"]
как показано выше.
5. Шесть линий Rust
Теперь вам нужно написать свой код на Rust. В каталоге src откройте файл lib.rs и напишите свой код Rust. Нам нужна очень простая функция Add, которая принимает два целых числа в качестве аргументов и возвращает их сумму:
use wasm_bindgen::prelude::wasm_bindgen;
#[wasm_bindgen]
pub fn add(left: usize, right: usize) -> usize {
left + right
}
6. Построй!
Затем вам нужно использовать инструмент wasm-pack для компиляции кода Rust в WebAssembly. Запустите следующую команду в своем терминале:
wasm-pack build
После завершения компиляции вы найдете каталог pkg в своем проекте. Внутри каталога pkg вы найдете несколько файлов JavaScript и файл WebAssembly.
7. Связующий код JavaScript
Теперь вам нужно написать файл JavaScript, который будет взаимодействовать с вашим кодом WASM.
Создайте новый файл glue.js в каталоге вашего проекта и напишите в нем следующее:
// Load the WebAssembly module
const importObject = {};
const path_to_wasm = "./pkg/wasm_example_bg.wasm";
fetch(path_to_wasm)
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, importObject))
.then(results => {
const wasm = results.instance.exports;
// Call a function exported by the WebAssembly module
console.log(wasm.add(20, 4));
});
8. HTML
Чтобы запустить что-либо в браузере, нам нужен файл HTML. Создайте новый файл `index.html` в каталоге вашего проекта и напишите в нем следующее:
<!DOCTYPE html> <html> <head> <title>WASM example</title> <script src="./glue.js"></script> </head> <body> </body> </html>
9. ОТПРАВИТЬ!!!
Чтобы запустить его в своем браузере, вы можете просто открыть файл HTML в своем браузере, но вы можете столкнуться с некоторыми проблемами CORS, поэтому я рекомендую вам использовать простой инструмент под названием http-server для обслуживания ваших статических файлов.
Если у вас установлен Node.js, вы можете установить его, используя:
npm install http-server -g
Теперь, когда он у вас установлен, просто запустите http-server в каталоге вашего проекта, и вам будет предоставлен URL-адрес, который вы можете открыть в своем браузере.
10. Проверьте это!
Вы видите пустой экран и удивляетесь, почему? Помните, мы не написали ничего особенного в нашем HTML-файле? Нам нужно открыть консоль браузера, чтобы увидеть результат нашего добавления.
Если все работает нормально, вы должны увидеть число, напечатанное в консоли, которое должно быть суммой двух чисел, которые мы передали функции в glue.jsat console.log(wasm.add(20, 4));.
Вы можете изменить эти числа, чтобы получить другую сумму. Поздравляем! Вы только что сделали свой первый проект WASM!
Если вы меняете числа, а в консоли по-прежнему отображается тот же номер, это происходит потому, что ваш браузер кэширует JavaScript. Вы можете принудительно перезагрузить страницу, удерживая Shift и нажимая кнопку обновления, когда консоль открыта.
Весь код находится в этом репозитории GitHub. Не стесняйтесь использовать его и играть с ним.
Если вы ненавидите Rust или не хотите писать код на Rust, не беспокойтесь. Я скомпилировал код Rust для JS-разработчиков. Вывод команды wasm-pack build находится в папке pkg в указанном выше репозитории.
Отблагодаришь позже!
Заключение
WebAssembly — это мощная новая технология, которая может дополнить и расширить возможности JavaScript. Хотя маловероятно, что JavaScript будет полностью заменен WebAssembly, его можно использовать для выполнения сложных вычислений почти с естественной скоростью, взаимодействия с другими языками программирования, а также для обеспечения повышенной безопасности и песочницы.
Поскольку веб-разработка продолжает развиваться, вполне вероятно, что WebAssembly будет играть все более важную роль в разработке веб-приложений. Разработчики, которые хотят расширить свои навыки и оставаться на шаг впереди, должны изучить WebAssembly и поэкспериментировать с его возможностями.
Чтобы узнать больше о WebAssembly и о том, как он связан с разработкой с низким кодом, ознакомьтесь с нашим сообщением в блоге на Five.co.
Спасибо за чтение, и увидимся на следующем!
Это сообщение в блоге было предоставлено 0xHiro. Найдите Хиро на GitHub или Twitter здесь.
Первоначально опубликовано на https://five.co
