最近在考慮給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/[email protected]/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>
}
}
後續還會有路由使用，模塊聚合，請求後臺等系列文章，敬請期待！ kubernetes一鍵安裝