Фронтенд написания Rust действительно ароматный

задняя часть Go

Я думал о том, чтобы датьsealerНапишите облачный продукт, мы называем его Sealer Cloud, который позволяет пользователям настраивать, совместно использовать и запускать кластеры k8s в Интернете.

Будучи продвинутой системой, она должна иметь передовые передовые технологии, чтобы быть достойной! Чтобы показать мускулы на пределе, я решил использовать rust+wasm для достижения.

Это полностью отличается от традиционного внутреннего языка, который отображает html в серверной части и возвращает его во внешний интерфейс.Это настоящая компиляция кода rust в wasm для запуска в браузере.

Попрощайтесь с js с этого момента, и передняя и задняя части написаны на ржавчине

Я должен восхищаться великолепием ржавчины.От операционной системы ядра до внешнего интерфейса производительность по-прежнему потрясающая.

рамка из тиса

yewЭто ржавый интерфейсный фреймворк. Скомпилируйте код Rust с помощью набора наборов инструментов вwasmзапустить в браузере.

создать приложение

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

Здесь следует отметить, что функция обратного вызова запускает обновление, а то, что должно делать обновление, определяется сообщением. Msg — это перечисление сообщений, выполняющих разные действия в соответствии с разными сообщениями.

Напишите другой index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>sealer cloud</title>
		<p>安装k8s就选sealer</p>
  </head>
</html>

запустить приложение

багажник - очень удобный инструмент для упаковки wasm

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

CSS

Этот вопрос очень важен. Мы определенно не хотим, чтобы пользовательский интерфейс, который мы пишем, был уродливым.bulma

Очень просто, просто добавьте css в 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/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>
        }
    }

В будущем будет серия статей об использовании маршрутизации, агрегации модулей, истории запросов и т. д., так что следите за обновлениями!Установка kubernetes в один клик

Кластер герметика упакован целиком!

Категории