minimal, obvious, graphical web application interface

mogwai 是用于创建 GUI 应用程序的视图库。它用 Rust 编写，在浏览器中运行，并在服务器端有足够的渲染功能。它是 React、Backbone、Ember、Elm、Purescript 等的替代品。

• 目标
• 概念
• 示例
• 简介
• 为什么
• 入门
• 食谱
• 更多示例
• 赞助此项目

目标

• 提供创建和管理视图节点的声明性方法
• 封装组件状态并轻松组合组件
• 解释视图突变
• 小巧快速（即保持简洁）

概念

mogwai 的主要概念包括

• 使用流而非回调

  视图事件（如点击、鼠标悬停等）通过流发送，而不是调用回调。流可以进行映射、过滤和折叠。

• 小部件视图是哑的

  视图只是一个在收到流的消息后修改 UI 树的结构体。视图使用普通的 Rust 函数或 RSX 宏进行构建和嵌套。

• 小部件逻辑是一个或多个异步任务，这些任务循环遍历事件消息

  小部件使用异步任务循环，接收来自视图的事件并发送更新到视图。

示例

以下是一个计数器按钮的示例，它计算被点击的次数

use mogwai_dom::prelude::*;

#[derive(Default)]
struct Button {
    clicks: usize,
    click: Output<()>,
    text: Input<String>,
}

impl Button {
    /// Convert into a `ViewBuilder`
    fn builder(mut self) -> ViewBuilder {
        rsx! (
            button(on:click=self.click.sink().contra_map(|_: JsDomEvent| ())) {
                // Using braces we can embed rust values in our UI tree.
                // Here we're creating a text node that starts with the
                // string "Clicked 0 times" which updates every time a
                // message is received on the stream.
                {("Clicked 0 times", self.text.stream().unwrap())}
            }
        ).with_task(async move {
            while let Some(()) = self.click.get().await {
                self.clicks += 1;
                self.text.set(if self.clicks == 1 {
                    "Clicked 1 time".to_string()
                } else {
                    format!("Clicked {} times", self.clicks)
                }).await.unwrap();
            }
        })
    }
}

let btn = Button::default();
// Get a sink to manually send events.
let mut click_sink = btn.click.sink();
// Build the view to render in the browser
let view = Dom::try_from(btn.builder()).unwrap();
// Attach it to the browser's DOM tree
view.run().unwrap();

// Spawn asyncronous updates
wasm_bindgen_futures::spawn_local(async move {
    // Queue some messages for the view as if the button had been clicked:
    click_sink.send(()).await.unwrap();
    click_sink.send(()).await.unwrap();
    // view's html is now "<button>Clicked 2 times</button>"
});

简介

如果您想了解更多信息，请阅读 简介和文档。

为什么

• 没有 vdom diffing，更新保持快速，实现最小化
• 默认异步逻辑
• 显式突变
• ViewBuilder 允许在多个平台上运行（Web、iOS、Android、桌面等）

mogwai 使用流、接收器、声明性视图构建器和异步逻辑来定义组件及其随时间的变化。

视图突变是显式的，并且是视图接收消息的结果，因此没有 vdom diffing 的性能开销。

如果您喜欢使用大量映射和折叠的函数式编程风格，或者您想“vroom！”那么也许 mogwai 正适合您 :)

请记住，mogwai仍处于alpha版本，API正在积极变化 - 欢迎提交pull请求、报告问题和提问。在0.6版本中，我们预计API将与旧版本有较好的向后兼容性。

专为Rustaceans制作，由Rustaceans制作

mogwai是一个Rust优先的库。您无需安装npm或node。在无需编写任何JavaScript的情况下，轻松将项目搭建起来。

基准测试

mogwai非常快速！这里有一些非常模糊和草率的todomvc指标

好的 - 我从哪里开始？

首先，您需要较新的Rust工具链版本。您可以通过访问https://rustup.rs/并遵循安装说明来完成此操作。

然后您需要wasm-pack。

为了启动新的mogwai项目，我们将使用出色的cargo-generate，您可以使用以下命令安装：cargo install cargo-generate。

然后运行

cargo generate --git https://github.com/schell/mogwai-template.git

并为项目命名。然后使用cd进入您全新的项目

wasm-pack build --target web

然后，如果您还没有安装，可以使用以下命令安装cargo install basic-http-server或使用您喜欢的其他替代方案来托管您的应用程序

basic-http-server -a 127.0.0.1:8888

祝您快乐编程！☕ ☕ ☕

食谱

📗 Mogwai烹饪指南是一系列针对各种UI问题的示例解决方案。它旨在成为一本良好的参考资料，而不是一个逐步教程。

小组频道 ☎️

在支持频道中闲逛并讨论mogwai

• 直接链接到元素应用
• 邀请https://matrix.to/#/!iABugogSTxJNzlrcMW:matrix.org?via=matrix.org。

请提供更多示例

示例可以在示例文件夹中找到。

要构建示例，请使用

wasm-pack build --target web examples/{the example}

其他外部示例包括

• mogwai-realworld 一个“真实世界”应用程序实现（WIP）
• 基准测试套件
• 请在这里输入您的示例 ;)

赞助

请考虑赞助此库的开发！

• 在GitHub上赞助我