minimal, obvious, graphical web application interface

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

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

目标

• 提供创建和管理视图节点的一种声明式方法
• 封装组件状态，并轻松组合组件
• 阐明视图突变
• 小巧快速（也就是保持敏锐）

概念

mogwai 背后的主要概念是

• 使用汇和流而不是回调

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

• 小部件视图是哑的

  视图只是一个在收到流的消息后修改UI树的struct。视图使用普通的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 使用流、汇和声明式视图构建器以及异步逻辑来定义组件以及它们随时间的变化。

视图变异是显式的，它是由于视图接收消息而产生的，因此没有性能开销来自虚拟DOM差异。

如果你喜欢大量使用映射和折叠的函数式编程风格，或者如果你想要快速实现功能（vroom!）那么或许 mogwai 正适合你 :)

请注意，mogwai 仍处于alpha测试阶段，API正在积极变更 - 欢迎提交PR、问题和提问。截至 0.6 版本，我们预计API将与早期版本有较好的向后兼容性。

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

wasm-pack build --target web

basic-http-server -a 127.0.0.1:8888

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