Rust Yew builds front-end pages first experience

This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

XDJMM, I am still the same unladylike cat, HEARD rust can also write front page, harm, curiosity killed this cat, come 44.

An introduction to

You can read this article about Rust: [Minimum necessary knowledge] A quick introduction to Rust. I heard that Rust can write front end, FEer to get started

Project introduction

start

git clone --depth=1 https://github.com/SASUKE40/yew-starter.git rust-yew-miao 
Copy the code

Install dependencies

cargo install wasm-pack
cargo install cargo-web
npm i
Copy the code

The directory structure

   .
   |--Cargo.toml
   |--index.html
   |--LICENSE
   |--index.js
   |--README.md
   |--.gitignore
   |--package.json
   |--src
   |   |--lib.rs
   |   |--app.rs
Copy the code

The development of

npm start
# navigate to http://localhost:1234
Copy the code

build

npm build
Copy the code

Test the deployed

A static service Serve can be started globally by installing it

npm i serve -g
serve dist
# navigate to http://localhost:5000
Copy the code

process

Cargo.toml

Similar to package.json in NPM

[package]
name = "yew-starter"
description = "A template for starting a Yew."
version = "0.1.0 from"
authors = ["shilinzhu <[email protected]>"]
categories = ["gui"."wasm"."web-programming"]
keywords = ["yew"."wasm"."wasm-bindgen"."web"."starter"."template"]
edition = "2018"
readme = "README.md"
repository = "https://github.com/SASUKE40/yew-starter"
license = "MIT"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
yew = "0.16"
Copy the code

Cdylib is for configuration to build C interoperability(C FFI), and Wasm-Bindgen dependencies are for interoperability between WASM modules and JavaScript.

src

What the hell is this? It’s like seeing vue/ React

lib.rc

mod app;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn run_app() -> Result<(), JsValue> {
  yew::start_app::<app::App>();
  Ok(())
}
Copy the code

app.rc

use yew::prelude::*;

pub struct App {}

pub enum Msg {}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        App {}
    }

    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        true
    }

    fn view(&self) -> Html {
        html! {
            <p>{ "Hello world!" }</p>
        }
    }
}
Copy the code

Make it another

            <p>{ "Hello miao!" }</p>
Copy the code

Hot more, this has to be

Nothing wrong with

#[wasm_bindgen] This stuff looks like annotations

This can be introduced in JS

import {run_app} from "./lib";
run_app();
Copy the code

Cargo Loader: Cargo Loader: Cargo Loader: Cargo Loader: Cargo Loader: Cargo Loader

import {run_app} from './Cargo.toml';
run_app();
Copy the code

This looks like JSX:

html! {
    <p>{ "Hello world!" }</p>
}
Copy the code

The HTML! Switch to

// Conditional rendering
html! {
  <div>
    {
      if true {
        html! {
          <a href="https://example.com"> {"Link"}</a>
        }
      } else {
        html! {}
      }
    }
  </div>
}
Copy the code

Normal rendering

conclusion

With the current JS ecology, this thing is hard to shake, can only say that as a supplement, the official is also so positioned, such as the client transplant to the Web. There are more directions we need to explore.

Learn more about Yew