Что это на самом деле?

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

Как все происходило на этом пути...

На сегодняшний день JavaScript считается языком Интернета, который был создан в 1995 году для того, чтобы сделать Интернет интерактивным. В то время он не был разработан, чтобы быть быстрым.

В 2008 году в браузеры были введены компиляторы Just-In-Time (JIT). JIT могут распознавать шаблоны во время выполнения и ускорять выполнение кода на основе этих шаблонов. Это введение JIT создало переломный момент в истории производительности JavaScript. С JIT выполнение JS было в 10 раз быстрее.

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

В 2017 году, когда MVP WebAssembly был завершен, кривая веб-производительности увеличилась и открыла новые возможности в Интернете.

WebAssembly не предназначен для замены JavaScript в Интернете. WASM не предназначен для автономного использования в Интернете. Вместо этого WASM предназначен для использования вместе с JavaScript, где JavaScript может повысить производительность.

Например, Фигма разработана с использованием React.js для внешнего интерфейса, а для внутреннего интерфейса их код написан на C++, который работает с использованием WebAssembly. Figma удалось добиться более быстрого времени загрузки и более быстрой обработки.

Возможности

WASM открыл новые возможности в Интернете и может выполнять задачи с интенсивными вычислениями внутри браузера. Кроме того, это может быть полезно, если вы хотите перенести свою кодовую базу в Интернет. Например, AutoCAD создала веб-версию своего приложения, перенеся свою устаревшую кодовую базу 30-летней давности в WebAssembly.

Многие организации используют WebAsssembly для поддержки своих платформ и продуктов. Также есть организации, предоставляющие необходимые инструменты и инфраструктуру для создания вещей с использованием WASM. Организации варьируются от самых разных, таких как развлечения, исследования, телекоммуникации, спутниковые снимки и многое другое.

Помимо браузера

Системный интерфейс WebAssembly, также известный как WASI, представляет собой среду выполнения, которая позволяет запускать код WebAssembly вне вашего браузера. Вместо того, чтобы быть ограниченным ограничениями API браузера, WASI добавляет такие возможности, как доступ к файловой системе, управление сетью и другие собственные функции.

WASI реализует ключевые функции, такие как Threading, SIMD (Single Instruction Multiple Data), которые очень полезны, когда речь идет о задачах с большим количеством числовых арифметических операций над большим набором чисел, таких как обработка мультимедиа, криптографическое хэширование и физические движки.

Начиная

Давайте рассмотрим простой пример Hello World с использованием TypeScript.

Прежде всего убедитесь, что в вашей системе установлен Node.js.

Во-первых, давайте создадим наш файл helloworld.ts:

Чтобы скомпилировать этот файл, нам нужно установить компилятор AssemblyScript, выполнив

npm install -g assemblyscript

Теперь давайте скомпилируем наш записанный файл в модуль WASM, который выведет helloworld.wasm file.

asc hello-world.ts -b hello-world.wasm

Теперь давайте создадим файл helloworld.js, который мы будем использовать для добавления функции для загрузки нашего скомпилированного модуля WASM с помощью WebAssembly Web API.

Теперь давайте воспользуемся приведенной выше функцией из helloworld.js для загрузки и создания экземпляра нашего созданного модуля WASM. После загрузки созданного модуля мы можем вызвать нашу экспортированную функцию add() нашего модуля wasm.

Наконец, давайте загрузим наш файл JavaScript в файл HTML.

и, наконец, вы должны увидеть работающую функцию WASM в браузере. Вуаля, у тебя получилось!

Будущее

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