Rust Web 开发框架，前端你可以选择哪个？

Rust构建一切。

在如今流行的语言中，Rust可谓是将构建和高效作为自己优美的身姿在大众视野中脱颖而出。它是一门赋予每个人构建可靠且高效软件能力的语言。它有什么特性呢？

Rust 构建应用，Rust 最大的特性当然就是在不同领域去提升我们的编程体验。

Rust拥有非常活跃和快节奏的开源生态系统，有大量的贡献者在做着许多很棒的项目，Rust 几乎可以构建一切。

Web 开发框架框架github stargithub usergithub fork

Rocket

20.8k

25.1k

1.4k

actix-web

17.8K

44.5K

1.5K

Zola

11.1k

562

795

warp

8.2k

22.4k

667

yew

27.8k

9.2k

1.3k

Hyper

12k

223k

1.4k

axum

10.6k

15.7k

716

本文将介绍一些开源的 Rust Web 开发框架。对于前端工作者来说，WebAssembly是一种简单的机器模型和可执行格式，具有广泛的规范。它被设计为便携、紧凑，并以或接近本机速度执行。

Rocket

Rocket 是 Rust 的异步 Web 框架，专注于可用性、安全性、可扩展性和速度。它让编写 Web 应用程序变得非常简单和快速，并且它不会牺牲灵活性和类型安全，它无样板、且扩展易于使用

它是高度可定制化的，可以快速启动一个新的应用程序。同时，它避免了许多不必要的文件。

    #[get("/")]
    fn hello() -> &'static str {
        "Hello, world!"
    }
    #[launch]
    fn rocket() -> _ {
        rocket::build().mount("/", routes![hello])
    }

Actix Web

Actix Web 是一个强大、实用且速度极快的 Rust Web框架。也有很强大的功能：提供了许多开箱即用的功能。HTTP/2、日志记录等、轻松创建任何应用程序都可以使用的自己的库、运行速度也是快的飞起、有强大的类型储备，从请求到响应，一切都有类型

    use actix_web::{get, web, App, HttpServer, Responder};
    #[get("/")]
    async fn index() -> impl Responder {
        "Hello, World!"
    }
    #[get("/{name}")]
    async fn hello(name: web::Path<String>) -> impl Responder {
        format!("Hello {}!", &name)
    }
    #[actix_web::main]
    async fn main() -> std::io::Result {
        HttpServer::new(|| App::new().service(index).service(hello))
            .bind(("127.0.0.1", 8080))?
            .run()
            .await
    }

Zola

Zola是一站式静态站点引擎。Zola 作为一个单一的可执行文件提供，具有 Sass 编译、语法突出显示、目录和许多其他传统上需要设置开发环境或向您的站点添加一些 JavaScript 库的功能。

如果你需要一些快速和简单的提供一个静态网站，Zola是一个极好的工具，可以创建快速和可伸缩的网页，没有任何其他依赖。

Warp

一个超级简单、可组合的 Web 服务器框架，可实现极速。Warp 突出的构建块是 Filter，它可以组合和组合以表达对请求的丰富需求。

由于其Filter系统，warp 提供了这些开箱即用的功能：

    use warp::Filter;
    #[tokio::main]
    async fn main() {
        // GET /hello/warp => 200 OK with body "Hello, warp!"
        let hello = warp::path!("hello" / String)
            .map(|name| format!("Hello, {}!", name));
        warp::serve(hello)
            .run(([127, 0, 0, 1], 3030))
            .await;
    }

Yew

Yew是一个 Rust 框架，用于使用 WebAssembly 创建 web 应用。

它主要的特点就是，它完全像一个类似 React 和 Elm 那样的基于组件的框架，对于前端工作人员很友好，由于对多线程的支持和 JavaScript 的互操作性，它具有出色的性能。

具有一个macro，用于使用 Rust 表达式声明交互式 HTML。在 React 中使用过 JSX 的开发人员在使用 Yew 时应该会感到很自在。

具有所有 SEO 的服务器端渲染和服务器渲染应用程序的增强功能，同时保持 SPA 的感觉

    use yew::prelude::*;
    struct Model {
        link: ComponentLink<Self>,
        value: i64,
    }
    enum Msg {
        AddOne,
    }
    impl Component for Model {
        type Message = Msg;
        type Properties = ();
        fn create(_: 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
            }
            true // 指示组件应该重新渲染
        }
        fn view(&self) -> Html {
            html! {
                

                    <button onclick={self.link.callback(|_| Msg::AddOne)}>{ "+1" }
                    
{ self.value }
                
            }
        }
    }
    fn main() {
        yew::initialize();
        App::::new().mount_to_body();
    }

Hyper

一种快速且稳定Rust HTTP 实现方案。该框架也是今年1月份发布了稳定版本。该框架是在麻省理工学院许可证明下提供的，可以期待一下。特点是：

use std::{convert::Infallible, net::SocketAddr, error::Error};
use http_body_util::Full;
use hyper::{Request, Response, body::Bytes, service::service_fn};
use hyper::server::conn::http1;
use tokio::net::TcpListener;
async fn hello(
    _: Request,
) -> Result<Response<Full>, Infallible> {
    Ok(Response::new(Full::new(Bytes::from("Hello World!"))))
}
#[tokio::main]
async fn main() -> Result<(), Box<dyn Error + Send + Sync>> {
    let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
    let listener = TcpListener::bind(addr).await?;
    loop {
        let (stream, _) = listener.accept().await?;
        tokio::task::spawn(async move {
            if let Err(err) = http1::Builder::new()
                .serve_connection(stream, service_fn(hello))
                .await
            {
                println!("Error serving connection: {:?}", err);
            }
        });
    }
}

Axum

Axum 是一个专注于人体工程学和模块化的 Web 应用程序框架。

Axum Web 框架旨在高效，快速和轻量级。Axum 的灵感来自 Erlang 编程语言，为开发人员提供了高效的并发性，非常适合开发实时 Web 应用程序、微服务和低延迟系统。

use axum::{
    routing::{get, post},
    http::StatusCode,
    response::IntoResponse,
    Json, Router,
};
use serde::{Deserialize, Serialize};
use std::net::SocketAddr;
#[tokio::main]
async fn main() {
    // initialize tracing
    tracing_subscriber::fmt::init();
    // build our application with a route
    let app = Router::new()
        // `GET /` goes to `root`
        .route("/", get(root))
        // `POST /users` goes to `create_user`
        .route("/users", post(create_user));
    // run our app with hyper, listening globally on port 3000
    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}
// basic handler that responds with a static string
async fn root() -> &'static str {
    "Hello, World!"
}
async fn create_user(
    // this argument tells axum to parse the request body
    // as JSON into a `CreateUser` type
    Json(payload): Json,
) -> (StatusCode, Json) {
    // insert your application logic here
    let user = User {
        id: 1337,
        username: payload.username,
    };
    // this will be converted into a JSON response
    // with a status code of `201 Created`
    (StatusCode::CREATED, Json(user))
}
// the input to our `create_user` handler
#[derive(Deserialize)]
struct CreateUser {
    username: String,
}
// the output to our `create_user` handler
#[derive(Serialize)]
struct User {
    id: u64,
    username: String,
}

以上是我所了解的一些web框架，对于前端来说最容易上手的还是yew，类似于react组件式的框架，也与javascript进行互通。

示例

下面简单给大家写个例子，也是以yew框架作为基础来输出。

安装rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

创建一个新的 cargo 项目

    cargo new yew-demo

安装trunk, 该插件是web 程序捆绑器，通过简单的可选配置模式通过源 HTML 文件构建和捆绑 WASM、JS 片段和其他资产（图像、css、scss）

cargo install trunk wasm-bindgen-cli

在scr/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! {
            

                
{"你的第一个Rust App"}
                {"点击: "}
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }
                
{ self.value }
            
        }
    }
}
fn main() {
    yew::start_app::();
}

在根目录添加index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Yew App</title>
  </head>
</html>