Автор оригинала: FreeCodeCamp Community Member.
Даниэль Симмонс
Webassembly – это новая веб-технология с огромным потенциалом. Это окажет существенное влияние на то, как веб-приложения разрабатываются в будущем.
Но иногда я чувствую, что это просто не хочет, чтобы быть поняты … почти в странно пассивном агрессивном пути.
Когда я смотрю на документацию и несколько учебных посох, которые уже нет, я не могу не чувствовать себя фермером, который молился за дождь, только чтобы утонуть в потопе. Я технически получил то, что хотел … просто не так, как я бы надеялся. “Вы хотите дождь?! О, я дам тебе дождь ! “
Это связано с тем, что Webassembly делает возможным так много новых вещей и может быть реализовано так много разных способов. Но это так сильно изменилось по пути к его Официальный выпуск MVP в феврале , что когда вы сначала начнутся учиться об этом, легко утопить в море деталей.
Продолжая дождевую метафору, эта статья является моей попыткой предоставить светлый душ введения в Webassembly. Не концепции или гайки и болты, а фактическая реализация.
Я пойду на вас по шагам, чтобы создать и реализовать чрезвычайно простой проект, удаление сложности везде, где это возможно. После того, как вы реализовали его один раз, однако просто многие из этих идей более высокого уровня намного легче иметь смысл.
Давайте сломаемся
Все будет гораздо яснее, если мы отступаем назад и посмотрим на список шагов, участвующих в реализации Webassembly в проекте.
Когда вы впервые начинаете начинать, легко посмотреть на WebAssembly и просто увидеть большой вариант опций и процессов. Разрыв его на дискретные шаги поможет нам получить четкую картину того, что происходит:
- Написать: Написать что-нибудь (или использовать существующий проект) в C, C ++ или RUST
- Компиляция: Составьте его в WebAsseMbly (давая вам двоичный файл.
- Включить: Получить этот файл. Wasm в проект
- Значение: Напишите кучу асинхронного JavaScript, который соберет двоичный двоич и создал его в то, что JS может играть хорошо.
И это в значительной степени. Предоставлено, есть разные перестановки этого процесса, но это суть этого.
В целом говоря, это не все, что сложно. Тем не менее, это может Получите чрезвычайно сложные, потому что большинство этих шагов позволяют широко различной степени сложности. В каждом случае я буду ошибаться на стороне простоты голых костей.
Для нашего проекта мы будем писать простую функцию в C ++ (не волнуйтесь, если вы не знакомы с C ++, это будет Чрезвычайно просто). Функция вернет квадрат данного числа.
Затем мы будем компилировать его в. Wasm, используя онлайн-инструмент (вам не нужно будет загружать или использовать любые утилиты командной строки). Далее мы создали его с 14 линиями JS.
Когда мы закончим, вы сможете вызвать функцию, написанную на C ++, как если бы это была функция JS, и вы будете поражены!
Чистое количество возможностей, которые это открывает, абсолютно дураки.
Напишите
Начнем с нашего C ++ Code. Помните, мы не будем использовать локальную среду Dev для записи или компиляции.
Вместо этого мы будем использовать онлайн-инструмент под названием Webassembly Explorer Отказ Это как кодепен для webassembly, и он позволяет компилировать код C или C ++ прямо в браузере и загрузить файл .wasm все в одном месте.
После того, как вы открыли Webassembly Explorer, введите этот код C ++ в левое окно:
int squarer(int num) { return num * num;}Как я уже сказал, мы используем действительно простой пример здесь. Даже если вы никогда не смотрели на C или C ++ раньше, наверное, не слишком сложно сказать, что происходит.
Компилировать
Затем нажмите кнопку, которая написана «Compile» в красной панели над вашим C ++. Вот что вы увидите:
Средний столбец показывает вам читаемую версию. Wash Binary, который вы только что создали. Это называется «Ват» или Webassembly Text Format Отказ
Справа является результирующий код сборки. Довольно круто.
Я не буду уходить в гораздо подробнее о любом из них, но вам нужно знать, по крайней мере, немного по поводу файла WAT, чтобы следовать следующим шагам.
Ват существует, потому что мы, люди, как правило, очень трудно, имея смысл прямой двоичной. По сути это слой абстракции, который помогает вам понять и взаимодействовать с вашим Webassembly Code.
В нашем случае то, что мы хотим понять, так это то, как наша wookassembly относится к функции, которую мы только что создали. Это потому, что нам нужно будет использовать это то же самое имя в нашем файле JS позже, чтобы ссылаться на него.
Любые функции, которые вы пишете в своем C ++, будут доступны в WebAssembly как что-то называемое «экспортом». ” Мы поговорим немного больше об этом позже, но на данный момент все, что вам нужно знать, состоит в том, что экспорт – это то, что вы сможете взаимодействовать и использовать.
Посмотрите на файл Wat и ищите слово «экспорт». «Вы увидите это дважды: один раз вместе с словом память и снова рядом с словом _z7squareri . Нам не нужно знать о память На данный момент, но мы определенно заинтересованы в _Z7squareri Отказ
Мы использовали имя функции рабур в нашем C ++, но теперь это как-то становится _z7squareri Отказ Это определенно может быть запутано в первый раз, когда вы видите это.
Насколько я могу сказать, префикс «_Z7» и суффикс «Я» – Маркеры отладки введен компилятором C ++. Это не очень важно понимать глубину, хотя. Вам просто нужно знать, что это произойдет, потому что вам нужно использовать это точное имя в вашем файле JS, чтобы вызвать функцию C ++.
Включают
Теперь просто нажмите кнопку «Скачать» в верхней части раздела Purple Wat. Вы получите двоичный файл. Wasm. Переименовать его Симпардер . Затем создайте новый каталог и поставьте свой Squarer.wasm Файл там вместе с двумя другими файлами:
index.html(Boilerplate)Scripts.js(пусто на данный момент)
Инстанция
Теперь для сложной части. Или, по крайней мере, часть, которая вызвала много путаницы, когда я впервые начал просеивать документацию.
Несмотря на то, что вы в конечном итоге сможете включить модули. Жаль, как регулярный старый модуль ES6 (используя
Оригинал: “https://www.freecodecamp.org/news/get-started-with-webassembly-using-only-14-lines-of-javascript-b37b6aaca1e4/”