格洛乌

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

• 是什么？
• 目标
• 示例
• 加入我们！

是什么？

格洛乌是一组库，这些库提供了浏览器 API 的 Rust 包装器。直接使用 web-sys/js-sys 非常困难/不便，因此 gloo 提供了原始绑定的包装器，这使得消费这些 API 更容易。这就是为什么它被称为“工具包”，而不是“库”或“框架”。

背景

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

合作开发模块化工具包

以模块化方式构建[高级库]，以便社区中的其他人可以以不同的方式组合组件的想法对我来说非常令人兴奋。这希望会使整个生态系统变得更强大。

特别是，我希望看到一项模块化工作，目标是实现具有 JSX 语法样式的虚拟 DOM 库。在这方面已经有一些工作，但似乎都相对庞大且“包含电池”。我希望这将在 2019 年有所改变。

—— Ryan Levick 在 Rust WebAssembly 2019

不要创建品牌孤岛。品牌或许可能有助于成名。但如果我们真正希望Rust的Wasm故事成功，我们应该考虑合作的方式，而不是划分地盘。

—— Yoshua Wuyts 在 Wasm 2019

在2018年，我们创建了基础库，如 js-sys 和 web-sys。在2019年，我们应该在它们之上构建模块化、高级库，并将这些库汇集在一个工具箱crate下，以获得整体体验。这个工具箱及其库将为针对Wasm提供所有你需要的功能。

构建绿色Web应用程序？使用整个工具箱快速入门。精心制作一个微小的Wasm模块并将其集成到现有的JavaScript项目中？从工具箱中获取你需要的那个目标库，并单独使用它。

Gloo是这个模块化工具箱。

目标

• 支持整个Web应用程序和小型目标库： Gloo及其工具箱中的实用crate集合，可以帮助你使用Rust和Wasm编写绿色字段Web应用程序时提高生产力。它也应该帮助你编写小型、目标化的Wasm库，该库将被集成到现有的JavaScript应用程序中。

• 培育Rust和Wasm库生态系统： 我们希望将Gloo作为一个推动力，用于创建和共享Web开发的构建块。任何框架或高级库都需要构建的库。我们希望明确地分解这些库，并使它们在整个生态系统中共享。

• 模块化工具箱，而非框架： Gloo应该是一个松散的实用crate集合，可以单独使用，也可以一起使用。Gloo不假设它“拥有”整个Web页面，它控制Wasm的start函数等。这种无假设的特性使得它能够达到比单体框架更多的用例（如从JS中外科手术般替换热代码路径）。 wherever可能，Gloo应优先考虑接口而非实现，以便可以使用不同方法的不同实现进行交换。

• 快速： 让我们利用Rust的无成本抽象，并考虑性能进行设计，向每个人展示Web可以有多快 ;)

• 可靠： 每个crate都应该经过彻底测试。无头浏览器测试。Quickcheck测试。使用类型系统使整个类别的错误成为不可能。

• 小： 小型代码大小，以实现更快的页面加载。不会意外地引入所有恐慌和格式化基础设施。用户不需要在Gloo库和小的Wasm二进制文件之间进行权衡。

• 惯用的： 我们希望构建Rust风格的API，使用起来感觉自然。Web的API不是为了Rust语言设计的，并且你有时可以感觉到阻抗不匹配。让我们纠正这一点，弥合差距，并创建易于使用的库。

示例

此示例使用 gloo::events 添加事件监听器，并使用 gloo::timers 创建超时。它创建一个 <button> 元素，并向它添加一个“点击”事件监听器。每当按钮被点击时，它就会启动一个一秒的超时，将按钮的文本内容设置为“来自一秒前的问候！”。

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> {
        // Create a `<button>` element.
        let button = document.create_element("button")?;

        // Listen to "click" events on the button.
        let button2 = button.clone();
        let on_click = EventListener::new(&button, "click", move |_event| {
            // After a one second timeout, update the button's text content.
            let button3 = button2.clone();
            Timeout::new(1_000, move || {
                button3.set_text_content(Some("Hello from one second ago!"));
            })
            .forget();
        });

        Ok(DelayedHelloButton { button, on_click })
    }
}

加入我们！

想帮助我们构建Gloo？查看 CONTRIBUTING.md！