Yew

本期的每周一库带来的是一个Rust下的WebAssembly多线程前端框架Yew 相关链接 Yew Github仓库 Yew中文文档 Yew 是一个设计先进的Rust前端框架，目的是使用WebAssembly来创建多线程前端web应用。 Yew的主要特性包括 基于组件的框架 高性能 支持与Javascript交互 下面我们结合Yew官方文档来创建一个简单的Web App并在本地预览。 为了能够在本地预览通过Yew实现的Web App，我们首先要选择一个 Wasm构建工具 ，构建工具可以方便WebAssembly和JavaScript交互。从而减轻了部署和打包工程的复杂度。 Yew文档中介绍了三种Wasm构建工具 wasm-pack wasm-bindgen cargo-web 这里我们选择相对简单并且兼容性更好的 cargo-web 构建工具。 安装cargo-web 我们可以使用如下命令来安装 cargo-web 构建工具，安装时间大约2mins cargo install cargo-web 第一个简单的Web App 这里参考Yew文档中的 第一个简单的App 章节来进行实验 首先创建一个rust工程 cargo new --bin hello-yew 然后在 Cargo.toml 文件中添加Yew依赖 [dependencies] yew = { version = "0

Yew 子组件的创建和渲染 前一篇 Yew框架（一） 应用初始化过程 我们了解一应用启动的过程，后续我将探索Yew中的一些功能是如何实现的，先来看看 子组件的创建渲染过程。 Yew 支持在组件的视图中嵌套组件，支持给子组件传递属性，下图是测试代码扩展前后的对比： 上面的代码主要是创建VChild对象，不是特别难，但要看懂它做了什么，为什么要这样做，还得先看 Properties 宏对组件的属性做了什么。 Properties 属性 这是我们自定义的Button组件的属性声明： 扩展后： 代码一下变多了。 首先是定义了一个 PropsWrapper，包含两个属性，但属性的类型都为Option类型，并且实现了Default特性，从后面的代码可以看到它就是PropsBuilder 用来存储过程信息的。 定义了两个结构体，都实现PropsBuilderStep特性，定义一个PropsBuilder结构体，有一个泛型参数，参数实现PropsBuilderStep。这是一个状态机在Rust的实现模式，用泛型参数来表示构建器的状态，通过构建器的方法来进行状态迁移，不同的状态可以调用不同的方法。 因为我们只有两个属性，所以 PropsBuilderStep 只有两个状态。PropsBuilderStep_missing_required_prop_text 是初始状态，该状态来可以调用

安装 virtualenvwrapper 时报错：Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-81rq7yew/virtualenvwrapper/ root@iZuf6bcqegh8n0l5hcge16Z:~ # sudo pip3 install virtualenvwrapper -ihttps://pypi.douban.com/simple/ Collecting virtualenvwrapper Downloading https: //pypi.doubanio.com/packages/c1/6b/2f05d73b2d2f2410b48b90d3783a0034c26afa534a4a95ad5f1178d61191/virtualenvwrapper-4.8.4 .tar.gz (334kB) 100% |████████████████████████████████| 337kB 2.7MB/ s Complete output from command python setup.py egg_info: Could not find a version that satisfies the requirement pbr (from

Yew 框架 Yew 是 Rust 语言生态中最为成熟的前端应用框架。框架的具体介绍及使用方法详见Yew官网 https://yew.rs/docs/ ，官网刚做好没有多久。 最简单的Yew应用 最简单的Yew应用只包含一个组件，即根组件，和一个main()方法。 use yew::{html, Component, ComponentLink, Html, ShouldRender}; pub struct Model { link: ComponentLink<Self>, } pub enum Msg { Click, } impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { Model { link } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::Click => {} } true } fn view(&self) -> Html { html! { <div> <button onclick=self.link.callback(|_| Msg