Fermyon Spin стал одним из лучших фреймворков WebAssembly. Spin делает разработку ваших микросервисных приложений более быстрой, переносимой и даже более масштабируемой. Spin поддерживает такие языки, как Rust, TypeScript, Go, C/C++, C#, Zig, Ruby, Python, Grain и даже JavaScript. В этой статье мы сосредоточимся на Spin JavaScript SDK, который был представлен в декабре 2022 года. С помощью Spin JavaScript SDK теперь вы можете создавать микросервисные приложения.

В этом посте мы углубимся в создание реального приложения с помощью нового Spin JS SDK. Мы перейдем от установки Spin и его плагинов к созданию приложения Spin. Это довольно просто, но мы углубимся в процесс в этой статье. Мы также обсудим, как мы можем использовать службу Some-Random-API, чтобы получить случайные цитаты из аниме.

Предпосылки

Вот некоторые вещи, которые вы должны знать, прежде чем читать эту статью:

  • Базовые знания о том, как использовать JavaScript.
  • npm ›= 8.5.5 или более поздней версии, установленной на вашем локальном компьютере для разработки.
  • Базовые знания о том, как использовать API.

Начиная

Вам нужно иметь все перечисленное выше, прежде чем углубляться в вещи. Как мы уже говорили ранее, мы будем использовать Spin JavaScript SDK для создания генератора случайных цитат из аниме. Во-первых, давайте начнем с установки Spin на MacOS. Мы установим последнюю версию (v1.0.0). Это первый шаг, потому что приложение, которое мы собираемся создать, также будет работать на Spin. Скачать Spin можно по этой ссылке. Кроме того, вы можете установить Spin в CLI, следуя этим инструкциям:

  • Запустите команду ниже на своем терминале, чтобы установить Spin на свой компьютер:
$ wget https://github.com/fermyon/spin/releases/download/v1.0.0/spin-v1.0.0-macos-aarch64.tar.gz # for Silicon 
$ tar xfv spin-v1.0.0.tar.gz
$ ./spin --help

После установки Spin обязательно добавьте его в основной путь вашего компьютера, чтобы вы могли получить к нему доступ из любого каталога, как показано ниже.

sudo mv ./spin /usr/local/bin/spin

Делая это, вам не нужно устанавливать Spin в каждый отдельный каталог, с которым вы хотите работать.

Работа с Spin JavaScript SDK

Теперь, когда мы установили Spin и сделали его доступным в каждом каталоге, мы можем приступить к сборке с помощью Spin JavaScript SDK, но перед этим обратите внимание, что Spin JavaScript SDK является экспериментальным и даже поддерживает TypeScript — если вы используете TypeScript, это SDK также для вас. Работа со Spin JS SDK означает, что вы просто работаете с JavaScript и другими компонентами Spin. Теперь давайте начнем с установки плагина js2wasm. Теперь нам нужно будет запустить следующую команду для установки плагина:

$ spin plugin update
$ spin plugin install js2wasm

Первая команда spin plugin update помогает обновить плагин Spin по умолчанию. Для второй команды он вызывает Spin для установки плагина js2wasm. Плагин js2wasm помогает преобразовать код JavaScript в WebAssembly и выполнить его в браузере.

Далее мы установим шаблон Spin JS, и вы должны сделать это прямо в интерфейсе командной строки Spin с помощью следующей команды:

$ spin templates install --git https://github.com/fermyon/spin-js-sdk
Copying remote template source
Installing template http-ts...
Installing template http-js...
Installed 2 template(s)
+-------------------------------------------------+
| Name      Description                           |
+=================================================+
| http-js   HTTP request handler using Javascript |
| http-ts   HTTP request handler using Typescript |
+-------------------------------------------------+

Приведенная выше команда также устанавливает шаблон JavaScript и TypeScript из своего источника, поэтому в этом случае вы можете использовать TypeScript или JavaScript для создания своего приложения Spin, в зависимости от того, какой способ работает! Теперь, когда вы установили шаблон, вам нужно его использовать.

Для JavaScript вот как создать проект из шаблона, который вы установили ранее:

$ spin new http-js my-project --accept-defaults

Если вы сделали это, вы должны запустить команду cd my-project, чтобы найти каталог, который вы создали для проекта. После этого вы можете запустить код. Команда для открытия проекта в Visual Studio Code. А если вы не используете VSCode, просто откройте IDE и найдите путь к проекту вручную.

В качестве альтернативы, если вы используете TypeScript, вот как вы можете создать свой проект:

$ spin new http-ts my-project --accept-defaults

Вы также можете следовать тем же инструкциям, что и для JavaScript, если хотите начать с TypeScript. Эта статья посвящена JavaScript, поэтому мы продолжим работу с JavaScript. Теперь, когда вы открыли проект в Visual Studio Code, вы должны получить следующее:

![Вращение JS-проекта в Visual Studio Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1676029514927/7a7c9827-454d-4122-aa2c-f4d1e2a27ef9.png align="center")

Теперь вы можете изучить весь код. Во-первых, вы можете перейти к файлу spin.toml, который является файлом конфигурации для Spin, и вы можете увидеть всю необходимую информацию о проекте и его настройках. Вы также можете проверить файл webpack.config.js; файл конфигурации для кода JavaScript. Мы будем работать с файлом index.js в каталоге src/; здесь вы будете писать весь свой код JavaScript.

Теперь вы можете проверить файл src/index.js, и вы найдете следующий код:

const encoder = new TextEncoder()
export async function handleRequest(request) {
    return {
        status: 200,
        headers: { "foo": "bar" },
        body: encoder.encode("Hello from JS-SDK").buffer
    }
}

Теперь, когда вы видите этот код, вы увидите, что его вывод должен быть просто «Привет из JS-SDK». Но сначала давайте используем терминал для установки всех зависимостей, выполнив следующую команду:

$ npm install

Затем вам следует подождать несколько секунд, пока не будут установлены зависимости, прежде чем запускать следующую команду:

$ npm run build

После этого вы можете задать себе очень важный вопрос: «Почему я устанавливаю npm в проекте Spin?» Это важно, так как нам это нужно для запуска вашего кода JavaScript. Вы также заметите, что он включен в файлы package.json и package.lock.json.

Наконец, чтобы запустить приложение, выполните следующую команду:

$ spin up
Serving http://127.0.0.1:3000
Available Routes:
my-project: http://127.0.0.1:3000 (wildcard)

Это должен быть вывод вашего кода в браузере после запуска приложения.

![Привет из JS-SDK](https://cdn.hashnode.com/res/hashnode/image/upload/v1676052466130/2a308402-46e2-49d1-8c90-7caf6f3d86a5.png align=»center»)

Теперь, как вы видите, код в файле src/index.js выводит этот текст в вашем браузере.

Разработка генератора случайных цитат из аниме

Как ни странно, это будет сделано в том же файле src/index.js, но с использованием другой концепции. Теперь мы создадим приложение JavaScript, которое извлекает случайные цитаты из аниме с платформы Some Random API.

Во-первых, войдите в свой файл spin.toml. В конфигурации the [[component]] у вас должен быть следующий код:

[[component]]
id = "sample-gen"
source = "target/spin-http-js.wasm"
exclude_files = ["**/node_modules"]
allowed_http_hosts = ["https://some-random-api.ml"]
files = ["src/index.html"]
[component.trigger]
route = "/..."
[component.build]
command = "npm run build"

Единственное изменение, которое вы заметите, это добавление allowed_http_hosts = ["https://some-random-api.ml"] и files = ["src/index.html"]. Триггер компонента allowed_http_hosts вызывает службу API, которую мы будем использовать, что позволяет начать работу API в файле src/index.js.

Теперь давайте перейдем к файлу src/index.js и начнем. Идем дальше и добавляем следующий код:

const encoder = new TextEncoder("utf-8")
const decoder = new TextDecoder("utf-8")

TextEncoder помогает преобразовать все строки в байты, поэтому нам нужно включить его в первую очередь. Его аналог, TextDecoder, помогает декодировать строки UTF-8. Перепишите handleRequest() следующим образом:

export async function handleRequest(request) {
    const Quote = await fetch("https://some-random-api.ml/animu/quote")
    const QuoteBody = decoder.decode(await Quote.arrayBuffer() || new Uint8Array())
    const body = `Here's a Quote: ${QuoteBody}\n`
}

Мы просто использовали асинхронную функцию в первой строке кода и добавили функцию handleRequest; в данном случае это служит точкой входа для компонента Spin. В следующей строке мы пытаемся вызвать конечную точку API. Между тем, в других строках мы пытаемся структурировать ответ после получения API.

Теперь добавьте этот код перед закрывающей скобкой:

return {
        status: 200,
        headers: { "foo": "bar" },
        body: encoder.encode(body).buffer
    }

Этот код предназначен только для вывода ответа полученного вами API, поэтому весь код в файле src/index.js должен выглядеть так, как показано ниже:

const encoder = new TextEncoder("utf-8")
const decoder = new TextDecoder("utf-8")
export async function handleRequest(request) {
    const Quote = await fetch("https://some-random-api.ml/animu/quote")
    const QuoteBody = decoder.decode(await Quote.arrayBuffer() || new Uint8Array())
    
    const body = `Here's a Quote: ${QuoteBody}\n`
    return {
        status: 200,
        headers: { "foo": "bar" },
        body: encoder.encode(body).buffer
    }
}

Теперь вы можете запустить команду spin build, которая также выполняет команду npm run build . После этого запустите команду spin up, и в вашем браузере должны появиться случайные аниме-факты, вот так:

![Результат генератора случайных цитат аниме] (https://cdn.hashnode.com/res/hashnode/image/upload/v1676105458188/371d3166-e78d-421b-a74b-c7280bd87c2f.png align=»center» )

Идеальный! Теперь у вас запущено приложение Spin, и мы закончили.

Заключение

Я надеюсь, что вам было интересно узнать, как создать приложение Spin с помощью Spin JavaScript SDK. Несмотря на то, что в этом руководстве рассматривается только создание генератора случайных цитат из аниме с помощью Spin JavaScript SDK, с помощью Spin вы можете сделать гораздо больше. Например, вы можете создать приложение для списка задач WASM, простое приложение для вращения для обслуживания doom-wasm или даже создать игру, похожую на Finicky Whiskers. Спасибо, что остановились, чтобы прочитать эту статью. Вы также можете проверить этот пример кода на GitHub.

Если у вас есть какие-либо вопросы, вы можете оставить их в разделе комментариев ниже.

Первоначально опубликовано на https://semaphoreci.com 9 мая 2023 г.