rust写前端真香
最近在考虑给sealer写个云产品，我们叫sealer cloud, 让用户在线就可以完成k8s集群的自定义，分享，运行。
作为一个先进的系统，必须有高大上的前端技术才能配得上！为了把肌肉秀到极限，决定使用 rust+wasm实现。
这里和传统后端语言在后端渲染html返回给前端完全不一样，是真正的把rust代码编译成wasm运行在浏览器中
从此和js说拜拜，前后端都用rust写
不得不佩服rust的牛逼，从内核操作系统一直写到前端，性能还这么牛逼。
yew框架
[yew] 就是一个rust的前端框架。通过一系列工具链把rust代码编译成[wasm])运行在浏览器中。
创建一个app
cargo new yew-app
在Cargo.toml中配置如下信息：
[package]
name = "yew-app"
version = "0.1.0"
edition = "2018"
[dependencies]
# you can check the latest version here: https://crates.io/crates/yew
yew = "0.18"
在src/main.rs中写代码：
use yew::prelude::*;
enum Msg {
AddOne,
}
struct Model {
// `ComponentLink` is like a reference to a component.
// It can be used to send messages to the component
link: ComponentLink<Self>,
value: i64,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
Self {
link,
value: 0,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::AddOne => {
self.value += 1;
// the value has changed so we need to
// re-render for it to appear on the page
true
}
}
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
// Should only return "true" if new properties are different to
// previously received properties.
// This component has no properties so we will always return "false".
false
}
fn view(&self) -> Html {
html! {
<div>
<button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
<p>{ self.value }</p>
</div>
}
}
}
fn main() {
yew::start_app::<Model>();
}
这里要注意的地方是callback函数会触发update, 那update到底应该去做什么由消息决定。
Msg就是个消息的枚举，根据不同的消息做不同的事。
再写个index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sealer cloud</title>
<p>安装k8s就选sealer</p>
</head>
</html>
运行app
trunk是一个非常方便的wasm打包工具
cargo install trunk wasm-bindgen-cli
rustup target add wasm32-unknown-unknown
trunk serve
CSS
这个问题非常重要，我们肯定不希望我们写的UI丑陋，我这里集成的是 [bulma]
非常简单，只需要在index.html中加入css：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sealer Cloud</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
</body>
</html>
然后我们的html宏里面就可以直接使用了：
fn view(&self) -> Html {
html! {
<div>
<nav class="navbar is-primary">
<div class="navbar-brand navbar-item">
{ "Sealer Cloud" }
</div>
</nav>
<section class="section">
<div class="container">
<h1 class="title">
{ "[sealer](https://github.com/alibaba/sealer) is greate!" }
</h1>
<a class="button is-dark">
{ "Button" }
</a>
<p class="subtitle">
{ "安装k8s请用sealer, 打包集群请用sealer, sealer实现分布式软件Build&Share&Run！" }
</p>
</div>
</section>
</div>
}
}
后续还会有路由使用，模块聚合，请求后台等系列文章，敬请期待！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦