Автор Алекс Мерсед✏️
15 декабря 2022 года GitHub объявит день ATOM IDE, которая занимает особое место в истории программного обеспечения как первое настоящее приложение Electron.
Electron позволил разработчикам использовать стандартные веб-технологии, с которыми они уже были знакомы, для создания кросс-платформенных настольных приложений для Windows, Mac и Linux. Все это замечательно для таких приложений, как Atom, VSCode и Postman, но не всегда идеально. Например, распространенная критика приложений Electron заключается в том, что они часто используют много памяти по сравнению с тем, что использовали бы языки более низкого уровня, такие как C, C++, Rust или Go.
В этой статье мы рассмотрим Tauri, новый фреймворк для создания двоичных файлов для большинства основных настольных платформ. Давайте начнем! Чтобы проследить за нашим простым примером, вы можете получить доступ к полному коду здесь:
- Что такое Tauri?
- Краткое описание архитектуры Tauri
- Пробный запуск Tauri
- Структура папок
- Создание базовой команды
Что такое Tauri?
Tauri — это новый фреймворк, который предлагает то, что больше всего нравится людям в Electron, но устраняет многие проблемы безопасности и производительности. Tauri предлагает возможность разработки пользовательского интерфейса с использованием веб-технологий, таких как HTML, CSS и JavaScript, но позволяет использовать языки более низкого уровня для написания логики приложения и бэкенда.
На момент написания статьи Tauri в основном поддерживает язык Rust в качестве языка бэкенда, но его API может быть реализован на нескольких языках. Со временем мы можем ожидать привязки к бэкенду на C, C++, Go, Ruby, Python и даже JavaScript, если пользователи решат их реализовать.
Краткое описание архитектуры Tauri
Как и Electron, Tauri использует многопроцессный подход. Процесс Core — это, по сути, бэкенд приложения со всеми моделями данных и логикой приложения, написанными на языке Rust. Процесс WebView — это пользовательский интерфейс приложения, построенный на выбранном вами JavaScript-фреймворке. Вы даже можете использовать варианты, не связанные с JavaScript, например, Rust с помощью Dominator или ClojureScript.
Эти два процесса взаимодействуют либо через события, либо через команды, которые представляют собой вызовы RPC. Любой процесс может испускать события, которые другой процесс может прослушивать, чтобы запустить логику в одном процессе, когда другой процесс выполняет определенное действие.
Процесс WebView может отдавать команды для запуска заранее определенных функций в основном процессе. Это основные вызовы RPC.
Пробная эксплуатация Tauri
Чтобы все установить, я рекомендую следовать этому руководству из официальной документации. Вам понадобятся установленные Node.js и Rust. Как только все будет готово, вы можете создать приложение, выполнив следующую команду:
npx create-tauri-app
Вам будет предложено несколько вариантов того, какой фреймворк или язык использовать для WebView. Для этого руководства выберите SolidJS, а затем шаблон ts-sass Solid.
cd в новую папку и запустите npm install. Затем запустите npm run tauri dev, который включит процессы Core и WebView, чтобы вы могли предварительно просмотреть страницу на localhost:3000. На странице, по сути, просто отображается число, которое отсчитывает каждую секунду.
Обратите внимание на вывод терминала, потому что там могут быть библиотеки и переменные окружения, которые нужно установить, чтобы приложение успешно собралось. Я работаю с POP OS, и мне пришлось установить несколько библиотек, прежде чем приложение получило все необходимые зависимости.
Структура папок
Наше приложение, которое я назвал /Your-Tauri-App, будет использовать следующую структуру папок:
/Your-Tauri-App
|
|-- /node_modules //All the NPM Libraries
|
|-- /src // Your frontend UI Code for the WebView Process
|
|-- /src-tauri // Your backend code for the Core process in Rust
|
|-- .gitignore // files to be ignored by git
|-- index.html // just the HTML file the WebView mounts to
|-- package-lock.json // lockfile for npm
|-- package.json // config file for npm
|-- pnpm-lock.yaml // lock file for pnpm
|-- readme.md // template readme
|-- tsconfig.json // Typescript Configurations
|-- vite.config.js // Vite configurations
Создание базовой команды
Вы можете думать о командах, как о написании маршрутов в бэкенде стандартного веб-приложения. Однако вместо использования fetch для выполнения запроса к маршруту, мы будем использовать invoke для вызова одной из этих команд из нашего фронтенда.
Давайте создадим очень простую команду в /src-tauri/src/main.rs:
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
// Our Tauri Command
#[tauri::command]
fn return_string(word: String) -> String{
return word
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![return_string])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
Макрос #[tauri::command] превращает нашу функцию в команду, и мы регистрируем нашу команду в приложении с помощью метода invoke_handler в конструкторе Tauri.
Затем, используя метод invoke, мы вызываем эту команду из Solid. Давайте обновим наш файл App.js:
import { invoke } from '@tauri-apps/api/tauri';
import { Component, createSignal } from 'solid-js';
import './App.scss';
import Counter from './Counter';
const App: Component = () => {
const [counter, setCounter] = createSignal(0);
setInterval(setCounter, 1000, (c: number) => c + 1);
async function handleClick(event){
// Invoke the command from our backend using the invoke function
const result = await invoke("return_string", {
word: "This is the argument"
})
// print the result to an alert
alert(result)
}
return (
<>
<div>
<h1 class="header">{counter()}</h1>
<button onClick={handleClick}>Click Me</button>
</div>
<Counter />
</>
);
};
export default App;
В приведенном выше коде мы импортируем метод invoke import { invoke } from '@tauri-apps/api/tauri';. Мы вызываем invoke и передаем ему два аргумента, строку с именем команды для вызова и объект с любым аргументом по имени.
Теперь, когда мы нажмем на новую кнопку Click Me, посланный нами текст будет отправлен обратно, подтверждая, что мы успешно вызвали метод из нашего бэкенда. Вот и все! Вы можете создавать команды, используя Rust, а также любые библиотеки Rust для управления данными в вашем приложении.
Сборка приложения
На момент написания статьи Tauri не поддерживает кросс-компиляцию, поэтому он будет компилироваться под ту операционную систему, на которой вы сейчас находитесь, в моем случае — Linux.
Чтобы включить эту функцию, достаточно выполнить команду npm run tauri build. Только не забудьте обновить свойство identifier в tauri.config.json на то, которое вы хотите.
Для меня, после завершения сборки, в src-tauri/target/bundle были доступны файлы AppImage и Deb.
Заключение
Tauri открывает возможности для настольных приложений, использующих веб-технологии и ваш любимый frontend-фреймворк, для лучшей производительности и меньших по размеру пакетов. Tauri, несомненно, побудит многих разработчиков Electron перейти на него для приложений, которым требуется повышенная производительность.
Хотя мы лишь поверхностно ознакомились с возможностями Tauri, я рекомендую прочитать о следующих интересных функциях:
- Запуск кода с помощью событий
- Создание меню окна
- Настройка окна
Удачного кодирования!
LogRocket: Полная видимость производственных приложений Rust
Отладка приложений Rust может быть сложной задачей, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании производительности ваших Rust-приложений, автоматическом выявлении ошибок, отслеживании медленных сетевых запросов и времени загрузки, попробуйте LogRocket.
LogRocket — это как видеорегистратор для веб-приложений, записывающий буквально все, что происходит в вашем приложении Rust. Вместо того, чтобы гадать, почему возникают проблемы, вы можете собрать и сообщить, в каком состоянии находилось ваше приложение в момент возникновения проблемы. LogRocket также отслеживает производительность вашего приложения, сообщая такие показатели, как загрузка процессора клиента, использование памяти клиента и многое другое.
Модернизируйте способы отладки приложений Rust — начните мониторинг бесплатно.