gloo

官网：https://gloo-rs.web.app/
Github：https://github.com/rustwasm/gloo

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

• 简介
• 目标
• 示例

简介

Gloo是一些库的集合，这些库为浏览器api提供了符合人体工程学的Rust包装器。由于web-sys/js-sys这两个库直接使用非常困难也不太不方便，因此为原始绑定提供了包装器，这使得使用这些api更容易。这就是为什么它被称为“工具箱”，而不是“库”或“框架”。

背景

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

在模块化工具包上进行协作

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

特别是我希望看到用类似JSX的语法实现虚拟DOM库的模块化努力。在这方面有过几次努力，但似乎都是相对单一的，而且“内置电池”。我希望这在2019年能够改变。

— Ryan Levick in Rust WebAssembly 2019

不要创建品牌孤岛。品牌化或许有助于获得名声。但如果我们真的想要拉斯特的瓦姆故事获得成功，我们应该想办法合作，而不是开拓领地。

— Yoshua Wuyts in Wasm 2019

2018年，我们创建了js-sys和web-sys这样的基础库。2019年，我们应该在它们的基础上构建更加模块化、高水平的库，并将这些库收集到一个完整的工具箱中，以提供整体体验。你在处理 wasm 时这个工具包和它的库将提供所有你想要的。

构建一个全新的Web应用程序?使用所有的工具来开始工作。精心制作一个小Wasm模块，并将其集成到现有的JavaScript项目中?从工具箱中获取您需要的目标库，并单独使用它。

Gloo是一个模块化工具包。

目标

• 同时支持完整的Web应用程序和小型的、有针对性的库: 如果您正在用Rust和Wasm编写一个新开发的Web应用程序，Gloo 和组成其工具箱的实用工具集合，应该会帮助您提高工作效率。如果您正在编写一个小型的、有针对性的Wasm库，并将其集成到现有的JavaScript应用程序中，那么它也将帮助您提高工作效率。
• 构建Rust和Wasm库生态系统: 我们希望使Gloo成为创建和共享Web开发构件的强有力工具。任何框架或高级库都需要构建的类库。我们希望明确地解耦这些库，使它们可以在整个生态系统中共享。
• 模块化工具包，而不是框架: Gloo应该是一个松散的实用工具箱集合，可以单独使用，也可以一起使用。Gloo不假设它“拥有”整个网页，如控制Wasm启动函数等。这种缺乏假设的情况比单一框架能够达到更多的用例(比如外科手术式地用JS替换热代码路径)。只要有可能，Gloo应该更多的是接口而不是实现，这样不同实现和不同方法都可以交换。
• 快速: 让我们利用Rust的零成本抽象，并在设计时考虑性能，向所有人展示Web可以有多快:)。
• 可靠: 每一个库都应经过彻底的测试，无头浏览器测试，Quickcheck测试。使用类型系统使所有类型的bug都不可能出现。
• 小: 较小的代码体积，可以更快的加载页面。不会出现把所有的错误和格式化基础设施拉进来。用户不需要在使用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")?;

    // 监听按钮的点击事件
    let button2 = button.clone();
    let on_click = EventListener::new(&button, "click", move |_e| {
      // 1秒延时后更新按钮的文本内容
      let button3 = button2.clone();
      Timeout::new(1_000, move || {
        button3.set_text_content(Some("来自一秒前的问候!"));
      })
      .forget();
    });

    Ok(DelayedHelloButton { button, on_click })
  }
}