Shine — C++ Фреймворк для десктоп приложений с использованием React

Доброго времени суток, уважаемые пользователи Хабра.

Я не то что бы профессиональный разработчик на C++, в основном я занимаюсь геймдевом на UE5 (по крайней мере последнее время). Но последнее время достаточно часто я балуюсь разработкой десктоп приложений под Windows. Для красоты и простоты я задумывался об использовании именно react. Но из выбора что я увидел было 2 варианта:

1. Tauri - Фреймворк под Rust с отрисовкой фронтенда сделанном на React и т.п.

2. Electron -  фреймворк для разработки кроссплатформенных настольных приложений с использованием веб-технологий (скопировал описание с гугла)

Electron я отмел сразу, так как хотел писать бэкенд на чем то более удобном чем JS/TS для себя. Tauri мне очень понравился, но изучение Rust заняло немного времени. И смотря на это все я подумал, что можно реализовать какой-нибудь аналог Tauri используя C++.

Немного посидев поизучав информацию, я примерно выстроил себе план работы, из этого вылился первый MVP Shine. Фреймворк на данный момент поддерживает только Windows и тесно связан с vcpkg, так как находится на очень ранней стадии разработки, но его уже вполне себе можно потыкать и использовать.

Репозиторий проекта

А теперь к установке и использовании:

Для начала то, что нам нужно для запуска:

• CMake

• Node.JS

• CLion (можете использовать что-то своё, мне комфортнее в нём)

Дальше мы открываем терминал и прописываем команду:
npm create shine-app@latest

У нас появится простая на данный момент настройка проекта, а именно указание его имени:

Дальше после того как мы введём имя приложение он создаст папку со всем, что нам нужно для реализации приложения

Структура проекта у нас выглядит следующим образом:

D:.
├───cmake # кастомные cmake функции для удобства сборки и запуска
├───frontend # Тут у нас находится фронтенд, сам UI приложения
│   ├───public
│   └───src
│       └───assets
├───generated # Тут у нас лежат ассеты собранные в бинарник, чтобы не таскать их за собой в релизе
├───scripts # Скрипты сборки для удобства
├───shine # Код библиотеки
│   ├───components
│   │   ├───include
│   │   │   └───shine
│   │   │       └───components
│   │   └───src
│   └───core
│       ├───include
│       │   └───shine
│       │       └───engine
│       └───src
│           └───engine
│               └───win32
└───src # Код нашего приложения (в данном случае main.cpp)

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

Дальше мы открываем проект в CLion (или там где удобно вам) и настраиваем профили CMake, У меня это выглядит так:

Дальше идем в View -> Tool Windows -> vcpkg

Далее выбираем наш существующий манифест, и нажимаем на карандашик сверху чтобы он работал с нашими CMake профилями:

Кликаем галочку Add vcpkg integration to existing CMake profiles

Далее кликаем ПКМ по корневому CMakeLists.txt и нажимаем Reload CMake Project.

Дальше мы можем спокойно запустить приложение и увидеть что оно работает:

Идею темплейта я решил взять просто с Tauri, простое окно где можно ввести имя и при нажатии Greet наше C++ ядро отформатирует сообщение и выведет его во фронтенде:

Со стороны C++ наш handler функции greet выглядит следующим образом:

SHINE_COMMAND(greet) {
    // У функции собранной с SHINE_COMMAND по дефолту есть аргументы
    // В развернутом виде функция выглядит примерно так:
    // nlohmann::json greet(const nlohmann::json& args)
    std::string name_str = args["name"];

    return std::format("Hello, {}", name_str);
}

и указание того, что мы можем вызвать эту функцию из фронтенда:

app.GetRouter().AddHandlers({SHINE_HANDLER(greet)});

После этого наш фронтенд знает что мы можем вызывать функцию greet с помощью метода invoke. Выглядит это следующим образом:

    async function handleGreet() {
        if (!name.trim()) return;

        setIsLoading(true);
        try {
            // Вызываем функцию и записываем ответ в setGreetMsg
            const res = await invoke('greet', { name });
            setGreetMsg(res.result || res);
        } catch (error) {
            setGreetMsg("Error: Could not connect to Shine Core");
        } finally {
            setIsLoading(false);
        }
    }

Дальше мы можем как угодно переделывать наш проект React и делать наше UI. При сборке в дебаге приложение просто слушает локалхост с нашим портом, в Shine есть поддержка HMR и при изменении кода, UI в приложении так же изменится. При релизе же, проект фронтенда собирается и после чего переводятся в байты, дальше мы используем эти байты внутри приложения не распаковывая их храним в памяти.

Помимо всего этого у нас есть конфиг файл: shine.conf.json, выглядит он так по стандарту:

{
  "window": {
    "title": "Shine Secure App",
    "width": 900,
    "height": 600
  },
  "capabilities": {
    "allowedCommands": [
      "fs_read_text_file",
      "window_drag"
    ]
  }
}

В нем пока что мы указываем title окна приложения, его размеры. Помимо этого есть ещё 2 параметра конфига:

• frameless - Отключает рамки у окна

• resizable - Разрешает / запрещает изменение размера окна

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

Учитывая что мы пишем на C++, и запихиваем ассеты фронтенда прямиком в бинарник, приложение из template имеет достаточно приятный вес - всего 845кб, при этом он не требует зависимостей для запуска и можно отправлять голый .exe пользователю и он запустится на его системе.

В планах у меня реализовать поддержку Linux и MacOS, а так же возможность получать состояние элементов фронтенда из плюсов и взаимодействия с ними. Например заполнять прогресс бар условный из C++ при какой-нибудь загрузке и т.п.

Это моя первая попытка сделать что-либо полезное на C++ для опенсорса, буду очень рад объективной критике, советам и контрибьютингу.