Gloo

一个用于使用Rust和Wasm构建快速、可靠的Web应用程序和库的工具包。

是什么？
目标
示例
参与其中！

是什么？

Gloo是一个库的集合，这些库为浏览器API提供了人体工程学的Rust包装器。直接使用web-sys/js-sys非常困难/不便，因此gloo提供了围绕原始绑定的包装器，使得使用这些API更加容易。这就是为什么它被称为"工具包"，而不是"库"或"框架"。

背景

在Rust和WebAssembly工作组的2019年路线图中，我们选择通过构建模块化工具包来有意识地培养我们的库生态系统：

合作开发模块化工具包

以模块化的方式构建[高级库]的想法非常令人兴奋，这将允许社区中的其他人以不同的方式组合这些组件。这有望使整个生态系统变得更加强大。

特别是我希望看到一个模块化的努力，以实现具有类似JSX语法的虚拟DOM库。在这方面已经有了几个尝试，但都似乎相对单一和"包含所有功能"。我希望这种情况在2019年会有所改变。

<cite>— Ryan Levick 在 Rust WebAssembly 2019</cite>

不要创建品牌孤岛。品牌化可能对获得名声有用。但如果我们真的希望Rust的Wasm故事成功，我们应该考虑如何合作，而不是划分领地。

<cite>— Yoshua Wuyts 在 Wasm 2019</cite>

在2018年，我们创建了像js-sys和web-sys这样的基础库。在2019年，我们应该在它们之上构建模块化的高级库，并将这些库收集到一个伞形工具包箱中，以提供全面的体验。这个工具包及其库将提供你在面向Wasm时想要的所有功能。

构建全新的Web应用程序？使用整个工具包快速启动。小心翼翼地制作一个小型Wasm模块并将其集成回现有的JavaScript项目中？从工具包中单独获取你需要的那个针对性库并使用它。

Gloo就是这个模块化工具包。

目标

支持完整的Web应用程序和小型、有针对性的库： Gloo及其组成工具包的实用程序箱集合应该帮助你在使用Rust和Wasm编写全新的web应用程序时提高生产力。同时，它也应该帮助你在编写将集成到现有JavaScript应用程序中的小型、有针对性的Wasm库时提高生产力。
培养Rust和Wasm库生态系统： 我们希望使用Gloo作为创建和共享Web开发构建块的强制函数。这些是任何框架或高级库都需要构建的那种库。我们希望明确地解开这些库之间的联系，使它们可以在整个生态系统中共享。
模块化工具包，而非框架： Gloo应该是一个松散的实用程序箱集合，可以单独使用，也可以一起使用。Gloo不假设它"拥有"整个网页，不控制Wasm的start函数等。这种不做假设的方式使得它能够覆盖比单一框架更多的用例（例如手术式地替换JS中的热点代码路径）。在可能的情况下，Gloo应该更倾向于接口而不是实现，以便不同的实现可以采用不同的方法进行交换。
快速： 让我们利用Rust的零成本抽象，并在设计时考虑性能，向所有人展示Web可以有多快 ;)
可靠： 每个箱子都应该经过彻底的测试。无头浏览器测试。Quickcheck测试。使用类型系统使整类错误变得不可能。
小巧： 小代码大小以实现更快的页面加载。不会意外地引入所有的恐慌和格式化基础设施。用户不应该在使用Gloo库和拥有小型Wasm二进制文件之间做出权衡。
惯用： 我们希望构建Rust风格的API，让使用起来感觉自然。Web的API并不是为Rust语言设计的，你有时会感受到这种不匹配。让我们纠正这一点，弥合差距，并制作出使用起来令人愉悦的库。

示例

这个例子使用gloo::events添加事件监听器，使用gloo::timers创建超时。它创建一个<button>元素并为其添加"click"事件监听器。每当按钮被点击时，它会启动一个一秒钟的超时，然后将按钮的文本内容设置为"一秒钟前的问候！"。

use gloo::{events::EventListener, timers::callback::Timeout};
use wasm_bindgen::prelude::*;

pub struct DelayedHelloButton {
    button: web_sys::Element,
    on_click: events::EventListener,
}

impl DelayedHelloButton {
    pub fn new(document: &web_sys::Document) -> Result<DelayedHelloButton, JsValue> {
        // 创建一个 `<button>` 元素。
        let button = document.create_element("button")?;

        // 监听按钮上的"click"事件。
        let button2 = button.clone();
        let on_click = EventListener::new(&button, "click", move |_event| {
            // 一秒钟超时后，更新按钮的文本内容。
            let button3 = button2.clone();
            Timeout::new(1_000, move || {
                button3.set_text_content(Some("一秒钟前的问候！"));
            })
            .forget();
        });

        Ok(DelayedHelloButton { button, on_click })
    }
}