Recently I was thinking about writing a sealer cloud product, which we call Sealer Cloud, that would allow users to customize, share, and run k8S clusters online.

As an advanced system, there must be high – end technology can be matched! To flex muscles to the limit, I decided to use Rust +wasm.

Unlike traditional backend languages that render HTML on the back end and return it to the front end, rust code is actually compiled into WASM and run in the browser

From now on, say goodbye to JS and write with rust

I have to admire rust’s awesome performance, from the kernel operating system all the way to the front end.

Yew framework

Yew is a front-end framework for Rust. Through a series of toolchains rust code is compiled into WASM to run in the browser.

Create an app

cargo new yew-app
Copy the code

Configure the following information in Cargo. Toml:

[package] name = "yew-app" version = "0.1.0" edition = "2018" https://crates.io/crates/yew yew = "0.18"Copy the code

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>();
}
Copy the code

The important thing to note here is that the callback function fires the update, and what the update should do is determined by the message. Msg is just an enumeration of messages that do different things for different messages.

To write a index. HTML:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "/> <title>sealer Cloud </title> <p> </head> </ HTML >Copy the code

Run the app

Trunk is a very convenient wASM packaging tool

cargo install trunk wasm-bindgen-cli
rustup target add wasm32-unknown-unknown
trunk serve
Copy the code

CSS

This is a very important issue, because we definitely don’t want to write ugly UI, so I’m integrating Bulma here

As simple as adding CSS to index.html:

<! 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 >Copy the code

Then we can use it directly in our HTML macro:

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"> {" Sealer implements distributed software Build&Share&Run!" } </p> </div> </section> </div> } }Copy the code

There will be more articles on routing, module aggregation, request backend, etc. Stay tuned! Kubernetes one-click installation

Sealer cluster in one package!