1 个不稳定版本
使用旧的 Rust 2015
| 0.0.1 | 2017年1月28日 |
|---|
#11 in #asmjs
1KB
Quasar
一个实验性的 rust-to-{wasm,asmjs} 前端框架。
超大质量黑洞存在于大多数观测到的星系中心，但关于它们还有很多未知。有人认为，迅速将足够的质量增加到超大质量黑洞的吸积盘上，会导致形成通过垂直于黑洞自转的射流发射大量电磁能量的 类星体。这些射流可以以几乎光速发射物质，并在星系内延伸数十万光年。
WASM 正处于即将到来的 Web 开发转变的中心，但关于这次转变还有很多未知。有些人认为，Rust 作为早期行动者，凭借零成本抽象，非常适合投资于在事件循环上运行的字节码。Rust 可能能够为 Web 上的最快应用程序提供动力，在未来几年内在前端生态系统中变得高度可见。
哦，黑洞是由铁的核心塌缩形成的...你知道，这是唯一会生锈的元素。
一切都是实验性的，半成品的，充满警告，经常出错，并可能随时更改。但一些基本原则正在开始出现。有了 Quasar...
- 您的组件和状态类型传播到事件处理器（无需猜测状态类型或结构）。
- 修改状态以更新依赖于该状态的可视化（除非您通过内部可变性更新状态）
- 自带模板引擎并在服务器端渲染中重用它（尽管 Quasar 将提供一个默认的 OOB 引擎 - 待定）
它是如何工作的
目前，Quasar 将一些基本的类似 jQuery 语义与状态和组件管理相结合，同时确保状态修改触发依赖于该数据的组件的重绘。
- 模板引擎 可互换。有使用 示例 使用 bart、mustache 和 maud。但替换模板引擎只是实现
Renderable特性的一个问题。 - 组件 是数据与模板或其他渲染过程的组合 - 任何实现了
Renderable的内容。Quasar 在将组件绑定到 DOM 时会接管它们，并通过data()和data_mut()方法使数据对您的事件处理器可用。一般来说，会改变组件的方法将在事件处理器的末尾重新渲染它。注意，组件数据是局部的，且无法在组件外部共享。 - 视图 是将组件单向绑定到 DOM 的结果。您也可以将事件监听器附加到视图中。注意，目前渲染视图使用的是具有破坏性的
innerHtml = ...方法，这会杀死 DOM 状态，如输入焦点，因此最终某种形式的 DOM diffing/patching 或虚拟 DOM 解决方案将变得非常重要。 - 应用数据 是可供事件处理器使用的共享状态。它按键（以及按
TypeId）划分，任何尝试读取共享数据分区（调用data(key)）的操作都会自动将您的视图注册为该数据分区的观察者。任何尝试写入应用数据分区（调用data_mut(key)）的操作都会自动将观察该数据分区的所有视图添加到事件处理器末尾的重渲染队列中。
一个基本的例子可能包括一个这样的 HTML 文件
<html>
<body>
<div id="counter"></div>
</body>
</html>
您可以使用如下片段绑定和更新数据
#[derive(Default, BartDisplay)]
#[template_string = "<p>Count: {{count}}</p><button>+1</button>"]
struct CounterData { count: u32 }
impl Component for CounterData {
fn onload(view: &View<Self>) {
view.on_each(EventType::Click, "button", |mut evt| {
evt.binding.data_mut().count += 1;
});
}
}
fn main() {
let mut app = quasar::init();
app.bind("#counter", CounterData::default());
app.spin();
}
每个这样的框架都需要一个待办事项应用程序；Quasar 有两个：Mustache 待办事项，和 Maud 待办事项。
目标
Quasar 仍在探索一些想法，并努力更好地理解 webplatform 中什么有效什么缺失。以下是现在指导这项实验的一些总体问题
- Quasar 能否达到与现代 JavaScript 框架相当的程度抽象？（可能最终在尘埃落定后通过宏实现。）
- “同构”的 Rust 会是什么样子，其中相同的渲染代码可以在客户端和服务器端运行？
- 我如何利用类型系统来实现更灵活的或更健壮的前端开发？（例如，基于特质的模板，利用不可变与可变访问作为识别观察或修改特定数据的视图的门槛。）
诚然，Quasar 目前没有任何性能目标。
构建
您需要设置和激活 emscripten（请参阅 brson 的帖子），然后添加几个编译目标
rustup target add asmjs-unknown-emscripten
rustup target add wasm32-unknown-emscripten
现在您可以构建 quasar 了
cargo build --target=asmjs-unknown-emscripten
# or using cargo-web
cargo install cargo-web
cargo-web build
您可以通过在它们的目录中运行 cargo-web start 来运行各种示例
cd www
cargo-web start