Веб-сборка (WASM) и Rust росли и развивались за последние пару лет, так каково использовать их вместе?
Вступление
Некоторое время я хотел использовать Rust и WASM по ряду причин: небольшой размер пакета, низкоуровневый доступ с надежной производительностью и все льготы, которые поставляются с Rust (строгая безопасность типов, абстракции с нулевой стоимостью и т. Д. .). Итак, когда мне представилась возможность двухнедельного обучения вне проекта, не было оправдания, чтобы не попробовать Rust и WASM!
То, что последовало в течение следующих 2 недель или около того, было для меня чем-то вроде американских горок программирования, через что все программисты проходили много раз. Но когда пришло время написать о моем опыте для этой статьи, я заметил, что есть закономерность, этот опыт не был просто американскими горками… он идеально соответствовал структуре Romcom! Итак, чтобы объяснить и проанализировать это официально не поддерживаемое сочетание сборщика веб-приложений и языка системного программирования, мы будем следовать стандартному формату Romcom, состоящему из 10 частей, для структуры и небольшого комедийного облегчения.
Часть 1: «Неисполненное желание»
Еще одна причина, по которой я хотел использовать Rust и WASM, заключается в том, что он был новым и блестящим, к тому же было бы неплохо подключить программу Rust к красивому веб-интерфейсу. Одна проблема: Rust и WASM официально поддерживаются только Webpack в качестве сборщика. Для меня Webpack был тем бывшим в Romcom, это никогда не было хорошими отношениями, и мы никогда не могли заставить их работать. Но казалось, что это может быть неизбежным злом, чтобы достичь моей цели - создать что-то, используя мою потерянную любовь, Ржавчину.
Часть 2: «Знакомьтесь, милый»
Итак, я неохотно начинаю клонировать шаблон Rust WASM Webpack, когда я возвращаюсь к предыдущему проекту, наблюдая, как я сражаюсь с Webpack, пытаясь скомпилировать одностраничное приложение (SPA). Список зависимостей растет с каждым плагином. Я спамлю Ctrl + C: Нет, должно быть что-то еще, я думаю. И тут мне приходит в голову: Посылка! Я помню, как там говорилось о WASM? Я думаю, что когда я быстро перехожу на сайт Parcel, и вот он, это то, что я искал, и после быстрого npm install я по уши.
Часть 3: «Счастливы вместе»
Один npm init и npm install -D parcel-bundler позже, и мы отправляемся на скачки. Parcel поддерживает импорт файлов .rs в JS и TS прямо из коробки, поэтому в простом шаблоне HTML5 с main.js я именно это и делаю. Файл rust содержит простую функцию, которая при заданных 2 числах возвращает их сумму, немного лишнего Rust, чтобы сообщить компилятору не искажать имя функции, и готово! JS вызывает эту функцию и отображает вывод в DOM, простой пример, но, похоже, в нем есть все, что мне нужно ...
Часть 4: «Возникают препятствия»
Но, как и в случае с большинством ромкомов, неровности на дороге ставят отношения под сомнение. Для Rust и Parcel эта проблема заключалась в возврате или приеме строк в функциях. Что бы я ни делал, это не сработает, и на мою консоль будут приходить потоки неопределенного. Хотя казалось, что решение существует, хорошо поддерживаемый пакет wasm_bindgen предоставляет полифил для вещей, отсутствующих между Rust и JS! Итак, создайте проект Rust с Cargo.toml, добавьте ящик wasm_bingen, импортируйте и запустите… Ой, подождите. Parcel, похоже, не работает с wasm_bindgen даже с плагином, который кто-то в проблеме с GitHub цитирует в качестве решения… что теперь?
Часть 5: «Путешествие»
После нескольких минут безумного поиска в Google и беглого чтения проблем GitHub и различных руководств в блогах я нашел альтернативный пакет stdweb. Похоже, у него есть большая часть функциональности wasm_bindgen и удобное руководство по его настройке с помощью Parcel! Быстрое переключение пакетов в cargo.toml, некоторые небольшие изменения кода, и мы снова находимся в курсе, возвращая и получая строки в этом простом приложении. Пора приступить к созданию чего-то более сложного ... простого симулятора генетического алгоритма!
Часть 6: «Новые препятствия»
Итак, новый проект, Parcel - установлен, модуль Rust - создан, stdweb - установлен, давайте приступим к этому шоу! В моей голове идея проста: создать структуру в Rust для представления моделирования генетического алгоритма, добавить к нему несколько методов для получения популяции или моделирования поколения, а затем просто создать экземпляр и использовать его в JS. Несомненно, это не может быть слишком сложно (предзнаменование)! Давайте просто создадим структуру, которая, кажется, создается в JS, давайте добавим несколько методов в структуру… подождите… что? Кажется, что экспорт структур в лучшем случае темпераментен при использовании stdweb и parcel. Я уже вернулся к квадрату 1?
Часть 7: «Выбор»
Кажется, все потеряно, у меня закончились жизнеспособные пакеты Rust, чтобы попытаться получить консоль, заваленную ошибками, что я могу сделать? В последнюю очередь я попытался вручную скомпилировать файл .wasm и импортировать его, но после 5 правок в файл Rust я уже чувствую, что это становится утомительным ... Когда я просматриваю проблему GitHub после проблемы с GitHub, веб-пакет появляется снова и снова, поскольку решение, может быть, мне нужно принять поражение и вернуться.
Часть 8: «Кризис»
Черт возьми, мне придется использовать Webpack, думаю я, возвращаясь к началу и открывая шаблон Webpack Rust, потерпев поражение.
Часть 9: «Крещение»
В качестве клонов репозитория шаблона Webpack Rust я в последний раз отправился в Google, используя один из моих старых поисковых запросов, надеясь на чудо. Подожди, что это? Проблема на GitHub о Parcel и WASM_Bindgen, которой раньше не было? Индекс поиска Google, должно быть, только что обнаружил, что это актуально? Погодите, кто-то связал здесь шаблон для Rust, WASM_Bindgen и Parcel! Слава богам поисковых систем, проект можно спасти!
Часть 10: «Разрешение»
Вот и все это время у меня под носом в репозитории rustwasm GitHub. Я быстро клонировал репо и следовал инструкциям по настройке, и все работало безупречно. В конце концов, эти поиски превратились в настоящую историю о Золушке, где ровно в полночь была найдена идеальная пара.
Так что теперь пора сделать из него что-нибудь крутое! Я не хотел слишком сильно сосредотачиваться на интерфейсе и подчинении SCSS, чтобы он выглядел красиво, поэтому я обратился к своему старому другу: TailWindCSS, CSS-фреймворк, ориентированный на служебные программы, который я раньше настраивал с PostCSS и Parcel. . Сделав все это, я создаю простой макет с боковой панелью для настройки моделирования и основной панелью для хранения результатов моделирования. После принятия решения о внешнем виде страницы я начинаю создавать некоторые компоненты TypeScript для управления и отображения моделирования.
Наконец, после того, как сайт был запущен и работал с некоторыми фиктивными данными из простого set_interval, я начал подключать его к WASM. В конечном итоге все оказывается на удивление простым, просто импортируйте объект module из cargo.toml проектов Rust, а затем к нему прикрепляются все структуры и функции! Несколько небольших настроек и тестов, и что вы знаете, все работает и сходится! Небольшая очистка, а затем я развертываю его на Firebase, и он хранится долго и счастливо.
Заключение
Написание этой статьи в таком стиле и рассказ о проекте, которым я искренне наслаждаюсь каждую минуту, и все взлеты и падения, были для меня забавным занятием. Но каково это на самом деле при использовании Rust и Parcel? Я могу искренне сказать, что это настоящее удовольствие ... когда вы найдете нужные ресурсы. Parcel просто делает это настолько простым, что не требует настройки для большинства проектов, и хотя он может быть не таким быстрым в более крупных проектах, он даст большим собакам возможность заработать свои деньги в 9/10 раз!
Что касается Rust и WASM, это было все, чего я ожидал, и даже больше. Rust всегда был языком, на котором я любил программировать, и, хотя это сложно, он никогда не устареет. Однако, если я должен пожаловаться на одну вещь в этом опыте, это будет отсутствие intellisense в экспортированном модуле JS. Это может не быть проблемой, когда вы пишете крошечный компилируемый файл Rust, но я вижу, что это болезненно для больших проектов, использующих Rust, WASM и Parcel.
В заключение, если у вас когда-либо был небольшой голос, говорящий вам попробовать Rust или WASM, я бы очень рекомендовал его и, возможно, подумал бы об использовании Parcel, чтобы избежать эмоциональных американских горок, на которые я пошел, чтобы сделать это!
