Как веб-технологии помогают искать золото
Я хочу рассказать о своем опыте добавления графического интерфейса пользователя, созданного с помощью HTML-разметки и CSS-стилей, к ранее разработанному мной консольному приложению для золотодобывающей компании. Возможно, описанный мною пример воодушевит на использование веб-технологий в вашем проекте.
В своей работе я реализую прикладные алгоритмы вычислительной геологии. В одном из последних проектов, в котором я участвовал, горнодобывающая компания заинтересовалась анализом золоторудных кварцевых жил (см. пример на фото). Компания имела данные о расположении трещин в горной породе, но не знала, какие из них были открытыми и поэтому могли быть жилами, а какие остались закрытыми и не представляли интереса. Для решения этой задачи я разработал консольное приложение на языке Python с использованием библиотеки NumPy. Приложение оказалось полезным, поэтому в компании решили использовать его для поисково-разведочных работ и на других месторождениях. Однако для этого необходимо было разработать пользовательский интерфейс, совместимый с Windows, MacOS и Linux.
Я придерживаюсь мнения, что пользовательский интерфейс следует делать с помощью HTML и CSS, так как эти технологии никуда не пропадут в ближайшие годы, как это сделали другие фреймворки с которыми я работал: WinForms, WPF, Xamarin.Forms. Каждый из этих фреймворков требовал времени на изучение, а опыт, полученный при работе с одним из них, невозможно применить с любым другим. Мне же, как разработчику, рационально инвестировать время в изучение веб-технологий, так как эти знания можно применить во множестве областей: от создания интерфейсов десктопных и мобильных приложений до подготовки книг к печати (см Paged Media CSS[1][2][3]). А если моих знаний недостаточно для сложной верстки, то найти исполнителя, который разработает и сверстает интерфейс программы с помощью веб-технологий, проще и дешевле, чем найти специалиста, способного подготовить описание интерфейса в специализированном DSL фреймворка, такого как XAML, QML, Xib или Nib.
Множество популярных приложений используют веб-технологии при разработке пользовательских интерфейсов, например, VS Code, Figma, Obsidian, Notion, GitHub Desktop, Slack, Signal, 1Password и многие другие. У большинства инструментов есть обширный список приложений, разработанных с их использованием: Electron, Tauri, Wails. Презентовать графический интерфейс пользователю можно и в браузере с помощью локального веб-сервера. Так поступили при разработке таких программ и сервисов как Proxmox (гипервизор), Ventoy (создание загрузочных флешек), CUPS (сервер печати в MacOS и Linux), Syncthing (синхронизация файлов).
В моей предметной области, связанной с нефтегазовой и горнодобывающей промышленностью, использование локального веб-сервера для представления интерфейса — не лучший выбор. Это связано с тем, что клиенты из этих сфер часто ассоциируют работу в браузере с передачей данных через сеть, что вызывает опасения по поводу безопасности. Поэтому требуется прикладывать дополнительные усилия на пояснения, как работает локальный сервер, и почему данные не покидают компьютер. Но мне все равно кажется, что мои объяснения не до конца рассеивают их опасения. Также я был в ситуации, когда политика безопасности предусматривала отсутствие браузера и сетевого подключения на компьютерах, которые работали с особо ценными данными. К тому же, веб-сервер нужно дополнительно установить и аккуратно реализовать его обновление и деинсталляцию, что усложняет инсталляционный скрипт и распространение обновлений.
Десктопное приложение более привычно пользователю, так как он видит интерфейс программы в отдельном окне. Фреймворк берет на себя работу по созданию и управлению нативным окном приложения, по размещению в созданном окне компонента WebView, который отрисовывает HTML-страницу экрана приложения. С помощью таких фреймворков можно легко сделать из веб-приложения десктопное или дополнить существующее консольное приложение пользовательским интерфейсом, созданным с помощью веб-технологий.
Сравнение Tauri и Electron
Существует не один проект, позволяющий создать пользовательский интерфейс с помощью веб-технологий. Наиболее известны Electron, Tauri, Wails, Ultralight и Fyne. Electron самый зрелый из перечисленных выше, поэтому используется во многих популярных приложениях, но Tauri обладает существенными преимуществами перед Electron, на основании которых я сделал выбор в его пользу. Об этих преимуществах я расскажу далее.
При создании приложения с помощью Electron в ваше приложение будет добавлен движок Chromium, поэтому минимальный размер получающегося архива будет более 200 Мб[4]. Tauri и Wails используют компонент WebView, уже присутствующий в системе пользователя; в Windows это будет Chromium, а в macOS и Linux это будет WebKit[5][6]. Размер минимального приложения, созданного с помощью Tauri, будет меньше 7 Мб[7].
Каждый из фреймворков дает возможность взаимодействия с операционной системой, например, доступ к файловой системе или периферийным устройствам. В Electron доступно API Node.js. В Tauri взаимодействовать с операционной системой можно либо со стороны фронтенда, то есть изнутри HTML-страницы, используя JavaScript, либо со стороны бэкенда, то есть в той части приложения, которая создает и контролирует окно c WebView компонентом. Бэкенд приложения в Tauri пишется на Rust, что дает возможность реализовать часть приложения с помощью компилируемого языка программирования. В моем проекте по расчету параметров трещин это будет иметь огромное значение, когда потребуется добавить интерактивную визуализацию, так как в этом случае программа должна будет делать перерасчет без видимых задержек.
Electron приложение распространяется как asar архив[8], распаковав который, можно получить доступ к исходному коду JavaScript приложения. С Tauri так не получится, так как все ресурсы, такие как JavaScript код веб-приложения, HTML-верстка и CSS-стили, встраиваются в исполняемый двоичный файл программы, что сильно затрудняет процесс декомпиляции. Подробнее о мерах безопасности, предпринятых в Tauri, можно прочитать в документации Tauri Apps: Security.
Как я рассказал выше, я не хотел переписывать уже реализованную и протестированную программу, чтобы интегрировать ее с каким-либо фреймворком создания пользовательских интерфейсов. Наоборот, я планировал дополнить существующую программу графическим интерфейсом, чтобы пользователь мог задать в нем необходимые для консольного приложения параметры, а после запустить расчеты с указанными параметрами.
В Tauri-приложение можно добавить внешние исполняемые файлы, которые будут распространяться вместе с приложением, чтобы избавить пользователя от необходимости самостоятельно устанавливать дополнительные зависимости. Примером таких зависимостей могут быть интерпретаторы Node.js или Python. В документации Tauri такие встраиваемые внешние зависимости называются sidecar. Разработчики приводят пример использования sidecar API для запуска Node.js приложения из приложения Tauri. Аналогичного примера для запуска Python программы в документации нет, но сделать это также просто. Для этого потребуется упаковать интерпретатор Python, скрипт программы и все ее зависимости, такие как NumPy, в единый исполняемый бинарный файл, для чего я использовал PyInstaller.
Для Windows Tauri подготовит *.msi инсталлятор, используя набор инструментов WiX, или *.exe установочный файл, используя NSIS[9]. Для MacOS можно создать *.dmg образ или архив приложения *.app[10]. Для Linux могут быть созданы Debian пакет *.deb или *.AppImage файл[11]. Это избавляет от необходимости самостоятельно писать инсталляторы или, как минимум, отложить это до момента, когда возможностей Tauri начнет не хватать.
Несмотря на то, что Electron более распространен на сегодняшний день, некоторые популярные программы такие, как 1Password, рассматривают возможность перехода на Tauri[12]. Если такие известные проекты присматриваются к Tauri, то имеет смысл обратить внимание на этот инструмент всем нам.
Выводы
С помощью Tauri я быстро добавил пользовательский интерфейс к написанной ранее программе, не внося в нее никаких изменений. Применяемые в проекте технологии позволили создать кросс-платформенное приложение из единой кодовой базы, которое работает в операционных системах Windows, MacOS и Linux. Использование Tauri упростило установку приложения, так как оно содержит в себе все необходимые для работы зависимости, а пользователь видит знакомый интерфейс инсталлятора. Также я получил возможность реализовать часть функционала на современном компилируемом языке программирования.
Разработанное мной приложение используют при бурении поисково-разведочных скважин, при этом большая часть времени была уделена реализации прикладных алгоритмов, их тестированию, обсуждению результатов с коллегами-геологами, а не на изучение фреймворков для создания пользовательских интерфейсов!
Начать использовать Tauri оказалось очень просто. Если мой опыт вас заинтересовал, то создать первое приложение можно, следуя подробному руководству из документации. Думаю, сейчас самое время попробовать.
Сноски
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_paged_media
[2] https://weasyprint.org
[3] https://print-css.rocks
[4] https://www.youtube.com/watch? v=yRT5rhuSjdU
[5] https://tauri.app/v1/references/webview-versions/
[6] https://wails.io/docs/introduction#native-elements
[7] https://www.youtube.com/watch? v=yRT5rhuSjdU
[8] https://www.electronjs.org/docs/latest/tutorial/asar-archives
[9] https://tauri.app/v1/guides/building/windows
[10] https://tauri.app/v1/guides/building/macos
[11] https://tauri.app/v1/guides/building/linux
[12] https://1password.community/discussion/comment/618609/#Comment_618609
