В прошлый раз, когда я писал на эту тему, экосистема Svelte-Deno все еще находилась в зачаточном состоянии. Мы могли скомпилировать сценарий Svelte с помощью Deno, но не более того.
Со времени выхода оригинальной статьи произошло несколько приятных улучшений:
- Экосистема Svelte выросла, чтобы лучше поддерживать Deno (через Snel), и
- Мои мысли о том, как взаимодействовать с Deno от Svelte, созрели.
Давайте опишем мой опыт программирования в следующих разделах:
Раздел A: Snel - Создайте приложение Svelte с помощью Deno!
Раздел Б. Snel - удаленное подключение Svelte к Deno
Раздел C: Использование методов Deno от Svelte
Раздел A - Snel
Теперь у нас есть многообещающий фреймворк для создания приложений Svelte в Deno: Snel. Я хотел попробовать создать приложение Svelte на 100% в Deno без какого-либо взаимодействия с Nodejs. Снел был самым многообещающим ответом.
TL; DR: По сути, работает! По большей части.
Следуя инструкциям Snel с помощью встроенного инструмента Trex, вы быстро подготовите проект к работе. Однако, если вы хотите выполнить некоторые из причудливых работы с накопительными пакетами (например, importa json file в вашем коде Svelte), поддержка rollup плагинов и _4 _ (Deno Rollup) еще недостаточно развита. Но импортировать jsonfile - это единственное, чего Snel до сих пор не позволял мне сделать. К сожалению, похоже, что Snel не позволяет вам вызывать Deno.readFile () из вашего кода Svelte, поэтому я как бы застрял в поиске обходного пути для этого. В конце концов, я просто скопировал и вставил json config data, который искал, и двинулся дальше. Я полагаю, что в ближайшее время для подобных мелочей будет путь вперед.
Часть B: Snel - Deno Connection
Итак, у нас есть рабочий интерфейс, который мы можем построить с помощью Deno. А теперь самое интересное!
Мы знаем, что одна из лучших особенностей Deno заключается в том, что вы можете изолировать свой код JavaScript от окружения, такого как net и чтение / запись, чтобы действительно контролировать программируемый доступ. Это особенно важно при запуске чужого кода (OPC). Даже больше важно, когда вы запускаете чужой код с вашими данными. Меньше всего вам нужна встроенная функция, глубоко вложенная библиотека или ошибка JavaScript, которая тайно перекачивает ваши личные данные на удаленный сервер.
Мы хотим выполнять чужой код (OPC) в Deno, но за пределами CLI, поэтому нам нужен интерфейс для взаимодействия с Deno - поскольку нет стандартного графического интерфейса Deno - мы можем использовать Svelte для нашего графического интерфейса и развернуть клиент-серверные отношения для взаимодействия друг с другом.
Но нам нужен способ получать наши команды и данные в / из Deno из нашего кода браузера Svelte.
Enter: удаленные вызовы процедур (RPC)
RPC - это круто, как этот аватар из фильма или бардачок. Вы получаете все возможности присутствия без фактического присутствия. Функциональность на безопасном расстоянии.
Использование RPC с Deno дает нам полный контроль из браузера, но обеспечивает безопасность Deno.
В сторону: я также рассмотрел и поэкспериментировал с альтернативами, такими как компиляция кода JS в Deno с использованием рендеринга на стороне сервера или Puppeteer, которые также будут работать, но в этих случаях JavaScript удаляется во время рендеринга, что делает наш сайт довольно статичным. HTML. Благодаря RPC мы по-прежнему получаем приличную реактивность в нашем клиентском коде. Я мог бы написать еще одну статью о версии SSR / Puppeteer позже, но пока мы делаем это в стиле RPC 😎 .
Тип RPC: HTTP против веб-сокетов
Первая дилемма - это выбор между HTTP POST или подключением через веб-сокет взад и вперед? Рассмотрим ситуацию, в которой работает Deno: если вы запускаете Deno на локальном хосте, вы можете использовать веб-сокеты, а если вы являетесь внутренним пользователем бета-версии Cloudflares Durable Objects, вы также можете использовать веб-сокеты. Но если вы собираетесь использовать Deno внутри функций Vercel или обычных рабочих процессов Cloudflare, они не поддерживают веб-сокеты, поэтому вы не сможете использовать эти инструменты.
Итак, поскольку HTTP был наименьшим общим знаменателем, я выбрал HTTP POST.
Еще одно отступление: последний собственный HTTP-сервер в Deno (и сервер Deno Oak) использует Hyper-сервер Rust, который поддерживает HTTP / 2, поэтому, если ваш интерфейс поддерживает HTTP / 2, вы надежны в будущем.
Теперь, когда мы выбрали протокол, нам нужно выяснить уравнение RPC. Я выбрал JSON-RPC, потому что он кажется довольно простым и легко читаемым.
Для настройки Deno JSON RPC нам понадобится Deno-сервер, поэтому я выбрал Deno Oak server, так как он упрощает маршрутизацию. Но нашему серверу нужна функция для выполнения, давайте воспользуемся функцией Javascript + WebAssembly, чтобы вернуть нам ответ и назовем его getAnswer():
Я решил выполнить WebAssembly (wasm), чтобы проиллюстрировать цель. Из байт-кода вы действительно не понимаете, что делает этот код. Насколько вам известно, он берет ваш драгоценный номер и отправляет его на какой-то удаленный сервер.
Что в этом хорошего, так это то, что мы можем запускать этот код JavaScript и WebAssembly в Deno без доверия, потому что по умолчанию Deno не разрешает скрипту иметь доступ в Интернет! Или жесткий диск. Если мы так не скажем.
В будущих версиях этого прототипа мы будем получать этот getAnswer код из Интернета, и нам не придется писать его самостоятельно. Но, например, нам нужно сначала что-то настроить, чтобы это работало.
Теперь, когда у нас есть обработчик ответов, мы просто получаем к нему доступ через .post() route в Oak и возвращаем ответ с помощью JSON-RPC. Все, что делает этот серверный маршрут, это захватывает функцию, запускает ее и возвращает ответ серверу.
Раздел C. Использование методов Deno в Svelte
Со стороны Svelte все гораздо проще, поскольку мы сделали большую часть работы на стороне Deno.
Нам нужно будет настроить методы JSON-RPC в файле .js, чтобы выполнять за нас фактические вызовы:
Функция RPC выполняет вызов выборки на сервер, передавая ему любые параметры. new Proxy - это стандартный объект JavaScript, который позволяет нам перехватывать и переопределять основные операции для этого объекта, поскольку мы хотим перенаправить действие на сервер, а не вызывать его локально.
Чтобы получить этот удаленный RPC-прокси в Svelte, я решил включить его main.js , где Svelte вставляется в HTML-страницу, но вы действительно можете импортировать его в любое место вашего кода. Но таким образом методы доступны App.svelte как свойство (опора).
Теперь в изящном коде мы можем вызвать нашу функцию Deno TypeScript / JavaScript Wasm!
Это здорово! Код безопасно выполняется в Deno, но доступен для использования в качестве локальной функции в Svelte.
С этим фреймворком мы можем сделать гораздо больше. Такие вещи, как извлечение кода из Интернета для запуска и настройка функций Deno в Vercel, чтобы все это можно было делать без сервера. Об бессерверности уже сказано?
Я уверен, что буду развивать это в будущем (так что нажимайте кнопку «Нравится», подписывайтесь и т. Д.… И т. Д., Чтобы получать обновления).
так что нажмите кнопку "Нравится", подпишитесь и т. д. и т. д., чтобы получать обновления
Мы прошли долгий путь от версии 1.0 этой установки в моей предыдущей статье о Deno + Svelte с помощью простого шага компиляции.
Полный код здесь:
