Введение в Tauri: альтернатива Electron

Tauri — это кроссплатформенный фреймворк, который превращает код JavaScript или TypeScript в нативное приложение практически для любой операционной системы. Хотя он похож на Electron или React Native, Tauri может работать с широким спектром интерфейсных технологий. В сочетании с внешним интерфейсом он создает собственное приложение для требуемой операционной системы.

С архитектурной точки зрения Tauri запускает интерфейсный код приложения вместе с процессом Tauri, который параллельно генерирует собственное приложение. В результате вы можете разрабатывать нативное приложение в тандеме с веб-приложением и включать вызовы Rust в нативное приложение для доступа к возможностям операционной системы. Это гибридный процесс, который дает Tauri большую часть его силы; процесс разработки остается одинаковым независимо от того, какой стек вы используете. Таури просто украшает существующий процесс.

Таури со SvelteKit

Процесс разработки веб-приложения с поддержкой Tauri состоит в том, чтобы создать или внедрить инфраструктуру Rust вместе с кодом приложения, а затем запустить Tauri в режиме разработки веб-приложения. Затем вы запускаете коннектор Tauri (IPC или межпроцессное взаимодействие), запускаете собственное приложение и наблюдаете, как ваши изменения в веб-приложении отражаются там. Когда вы будете готовы предоставить приложение для производства, вы можете создать пакет выпуска для конкретных целевых платформ.

Мы рассмотрим процесс запуска Tauri для приложения SvelteKit. У каждого стека свои требования, но общие шаги одинаковы.

Во-первых, нам нужно установить Rust. Tauri использует Rust из-за его характеристик производительности, кроссплатформенности и безопасности. rustc --version должен вернуть ответ в вашей командной строке. Чтобы настроить Rust, вы можете выполнить шаги по настройке в документации Tauri. Не забудьте запустить rustup update и проверьте установку с помощью rustc --version.

Как только Rust станет доступен, вы сможете создать новый макет Tauri с помощью npm create tauri-appчто требует наличия npm установлен. В кратком руководстве по Tauri описаны другие способы установки инфраструктуры Tauri для вашего приложения, такие как использование сценария оболочки или загрузки Rust. Нам понадобится npm во всяком случае для SvelteKit, поэтому мы будем использовать его.

Для нашей настоящей цели, как только мы запустим npm create tauri-appмы можем следовать подсказкам, дав имя проекту (у меня iw-tauri). Затем вы укажете менеджер пакетов (в данном примере Yarn), а затем используемую вами структуру (SvelteKit). Как только это будет сделано, вы сможете cd в новый iw-tauri каталог и тип yarn install установить пакеты, затем yarn run dev для запуска сервера разработки.

Теперь, если вы посетите localhost:1420, вы увидите приложение с экраном, подобным показанному на рисунке 1.

IDG

В настоящее время на экране отображается только приложение SvelteKit. Чтобы увидеть магию Таури в действии, введите npm run tauri dev. Это запустит как приложение SvelteKit, так и внешний интерфейс Tauri, реализованный его близнецом Tauri Rust. Tauri создаст собственное окно, отражающее тот же пользовательский интерфейс, что и веб-интерфейс.

Обратите внимание, что когда вы сделаете это в первый раз, Tauri установит свои зависимости, что займет некоторое время. После этого запуск будет быстрым.

Когда вы пишете код и вносите изменения, они будут автоматически отражаться в собственном пользовательском интерфейсе при условии, что вы используете настройку разработки (например, SvelteKit), которая автоматически обновляет сборку для разработчиков.

Как создать приложение Таури

Tauri работает, запуская родное для Rust приложение, которое наблюдает за веб-приложением и отражает там изменения кода. В предыдущем разделе мы использовали npm create tauri-app, который является ярлыком для ручного процесса создания приложения Tauri. Процесс состоит из таких шагов:

1. Создайте интерфейсный проект, используя такую ​​​​инфраструктуру, как SvelteKit.
2. Настройте интерфейсный проект для работы с Tauri.
3. Запустите приложение Таури.
4. Настройте приложение Tauri для наблюдения за интерфейсным приложением.

В ручном процессе нам также потребуется установить параметры, специфичные для платформы, на этапе настройки внешнего интерфейса. Например, в случае со SvelteKit нам нужно убедиться, что используется статический адаптер.

Код для Tauri можно найти в /src-tauri каталог, который содержит tauri.conf.json файл для настройки самого Таури. Вы можете посмотреть файл, который create tauri-app сгенерировал для нас, чтобы понять, как это работает, и найти более подробную информацию здесь. Листинг 1 содержит небольшую часть кода конфигурации Tauri.

Листинг 1. Фрагмент конфигурации Tauri

 {
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
    "devPath": "http://localhost:1420",
    "distDir": "../build",
    "withGlobalTauri": false
  },

В листинге 1 вы можете видеть, что конфигурация сообщает Tauri, что делать перед запуском разработки, что в основном: использовать yarn dev чтобы запустить веб-приложение в режиме разработки, затем сообщите ему, где работает приложение (localhost на порту 1420).

Видеоруководство по разработке нативных веб-приложений с помощью Tauri см. в Tauri, альтернативе Electron на основе Rust. Также см. руководства по Tauri для получения дополнительной информации о ручной настройке проекта Tauri.

Нативные вызовы из JavaScript

Tauri позволяет привязывать вызовы JavaScript к нативным функциям в Rust. Основная идея заключается в том, что вы предоставляете функцию Rust как команду Tauri (в src-tauri/src/main.rs файл), затем Tauri делает это доступным в виде функции JavaScript, которую вы можете выполнять в своем веб-приложении. Вот краткий обзор документации Tauri:

Листинг 2. Использование собственной команды из JavaScript

// In src-tauri/src/main.rs
#[tauri::command]
fn my_custom_command() {
 println!("I was invoked from JS!");
}
// register the command:
fn main() {
 tauri::Builder::default()
   .invoke_handler(tauri::generate_handler![my_custom_command])
   .run(tauri::generate_context!())
   .expect("failed to run app");
}

// In your JavaScript
import { invoke } from '@tauri-apps/api/tauri'
const invoke = window.__TAURI__.invoke

invoke('my_custom_command');

В листинге 2 показаны основные принципы использования нативной команды из JavaScript. Возможностей гораздо больше, но в целом это неплохой способ привязать веб-приложение к операционной системе.

Tauri под капотом: Rust и WebViews

Теперь у вас должно быть общее представление о том, как Tauri расположен рядом с веб-приложением. Что гениально в Tauri, так это связь между двумя компонентами, которая в Tauri известна как межпроцессное взаимодействие. По сути, эти два приложения представляют собой изолированные песочницы, обменивающиеся сообщениями. Существует два типа сообщений: события и команды. События являются двунаправленными и имеют определенный формат, который клиент Tauri JavaScript или TypeScript использует для взаимодействия с сервером Tauri.

Протокол команд располагается над протоколом событий. Командный протокол всегда инициируется клиентским приложением и работает как взаимодействие запрос-ответ. Это что-то вроде интерфейса сторонней функции с удаленным согласованием через JSON-RPC (поэтому данные всегда должны быть сериализуемыми в формате JSON). Это не настоящий интерфейс сторонней функции в том смысле, что все вызовы в операционную систему опосредованы удаленным вызовом процедуры, поэтому многие риски безопасности снижены.

Tauri использует как Rust, так и WebViews для создания собственного пользовательского интерфейса. WebViews предоставляют Tauri стандартизированную, хорошо понятную основу, на которой строятся остальные его функции. WebViews встроены в операционную систему, что обеспечивает более высокую производительность, чем вторичный уровень, такой как Chromium.

Tauri использует модель с несколькими процессами для адаптивной обработки пользовательского интерфейса. По сути, Tauri порождает процессы по мере необходимости для обработки входящих событий и команд из клиентского приложения. Основной процесс Tauri создает подпроцессы с необходимыми разрешениями. Каждый процесс имеет время жизни, посвященное только текущей работе.

Вот подробнее о том, как работают WebViews. Вы также можете проверить проект Tauri на GitHub, чтобы взглянуть на собственный движок Tauri WebView на основе Rust. Чтобы понять, как много всего происходит за кулисами Tauri, окунитесь в архитектуру Tauri.

Заключение

Tauri — это фреймворк, похожий на Electron и React Native. У каждого есть свои плюсы и минусы, но быстрое освоение Tauri разработчиками указывает на то, что некоторые вещи он делает правильно. Решение использовать нативные WebViews и Rust приносит дивиденды в плане производительности. Tauri, безусловно, является сильным соперником для новых проектов, а также для существующих веб-приложений, которые должны иметь возможность генерировать собственное приложение.