pâro-rs for tauri

一种开发基于 html 和 css 的 tauri 桌面应用程序的见解方法，其中您无需编写任何客户端代码（没有 JavaScript，没有 WebAssembly），因为所有 HTML 渲染和事件处理都在您的 tauri 应用程序内部完成。pâro 已经为您完成了所需的最低限度的客户端代码。无需更多 https 调用或处理 JSON。

这降低了代码复杂性、构建过程复杂性、编译时间，减少了令人烦恼和挫败感。

pâro 不强制您如何生成 HTML。使用您喜欢的模板引擎或只需在字符串上使用 format!()。pâro 不关心，但在许多示例中会使用 maud 编译时模板 以获得编译时检查。

示例

一个简单的计数按钮示例 (完整示例在此)

/**
 * Pure html rendering without template engine. Has no compile time checks on
 * the generated html.
 */
fn render_with_format(paro_app: &mut Arc<Mutex<ParoApp<ApplicationState>>>) -> String {
     let html = format!(
        r#"<button onclick='{}'>
            counter: {}
        </button>"#, // we use single quotes on onclick, as event! returns a string with double quotes. maud handles that iself
            event!(paro_app, (move |state: &mut ApplicationState, _value| {
                // this is executed here in tauri and not in the gui client application
                state.current_count += 1;
                println!("first number of state.numbers updated to: {}", state.current_count);
            })),
            paro_app.lock().unwrap().state.current_count
        );
    println!("format! generated html:\n{}", html);
    return html;
}

/**
 * Html rendering with a template engine. We are using maud here, as it has compile time checks
 * on the generated html, but you can use whatever you prefer.
 */
fn render_with_maud(paro_app: &mut Arc<Mutex<ParoApp<ApplicationState>>>) -> String {
    let maud_template = html! {
        button onclick=({
            event!(paro_app, (move |state: &mut ApplicationState, _value| {
                // this is executed here in tauri and not in the gui client application
                state.current_count += 1;
                println!("first number of state.numbers updated to: {}", state.current_count);
            }))
        }) { "counter:" (paro_app.lock().unwrap().state.current_count) }
    };
    let html = maud_template.into_string();
    println!("maud generated html:\n{}", html);
    return html;
}

名字的由来

名字 pâro 来自于 《难以言说的悲伤词典》，描述了无论您做什么都总觉得有些不对——任何试图舒适地在这个世界上找到自己的方法都将最终触碰到一些无形的禁忌——就像有一条显而易见的前进道路，别人都能看到，而你却只能坐在椅子上，无助地寻求帮助，越来越冷，越来越冷。

Pâro 是我在编写我的第一个 tauri 应用程序并不得不编写一个完整的第二个应用程序进行 GUI 开发时所感受到的，该 GUI 通过 http 调用和 json（反）序列化分离，以及 pâro 的概念阶段。

路线图

• 使 pâro 运作
• 改进 API（CallbackStore 与 ApplicationState 作为顶级元素）
• 内部重新发布 uuid，并将其称为 paro::UUID，以便无需将其添加到应用程序的依赖项中
• 在 event! 返回值中使用反引号，以便单引号和双引号都有效
• 从 tauri 获取端口并直接使用它
• 使用日志框架
• 示例
  • 最小计数器示例
  • 使用pâro实现html2maud的GUI，并将其作为子模块放在examples下
  • 包含以下更复杂的示例
    • 路由
    • 条件渲染
    • 服务器端非GUI事件，如API事件或异步数据库查询
    • 表单验证
• pâro启动器
  • 作为GitHub启动仓库
  • 包括基础功能，如路由、表单和组合
  • 纯格式!() pâro启动器
  • maud pâro启动器
• 文档 / gitbook
• 建立最佳实践
• 差异HTML更新
• 获取一个Logo

许可证

MIT或Apache 2

技术细节

pâro本身由三个主要组件组成

• ParoAppMyState ParoApp保存您的应用程序状态 HashMap<CallbackID, Callback>。所有服务器端回调都存储在此。
• event! 一个宏，用于创建具有ID的服务器端回调并将其添加到 ParoApp。它返回一个小的js调用到pâro客户端脚本作为String。示例：window.__PARO__.emitEvent("f0cbfc89-677b-481a-8746-05e2335d5cf8")，您可以将其添加到您的HTML中 onclick='event!([...])'。
• paro.js 一个相当小的js脚本，通过WebSocket连接到您的tauri应用程序，并显示由您的tauri应用程序发送的html，并将所有客户端事件发送到服务器/tauri进行处理。在这里使用Wasm会过度设计。

这三个组件允许您在不编写任何客户端代码的情况下编写HTML GUI，即没有javascript或webassembly。

此外，pâro还需要

• 您需要在依赖项中添加具有功能 uuid 并启用 v4 的crate
• 一个WebSocket，用于连接到该WebSocket处理对 CallbackStore 的调用并发送要显示给客户端的html

趣闻轶事

虽然pâro主要与 tauri 一起使用，但在readme和代码注释之外，它以任何方式都不引用tauri。如果您愿意，您可以使用pâro与tauri替代品或在实际web应用程序上使用它。请注意，在web应用程序中处理成千上万用户的状态和事件处理在服务器上需要相当多的资源。