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

Rust构建一切。

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

• 高性能。 Rust 速度惊人且内存利用率极高。由于没有运行时和垃圾回收，它能够胜任对性能要求特别高的服务，可以在嵌入式设备上运行，还能轻松和其他语言集成。
• 可靠性。 Rust 丰富的类型系统和所有权模型保证了内存安全和线程安全，让您在编译期就能够消除各种各样的错误。
• 生产力。 Rust 拥有出色的文档、友好的编译器和清晰的错误提示信息， 还集成了一流的工具——包管理器和构建工具， 智能地自动补全和类型检验的多编辑器支持， 以及自动格式化代码等等。

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

• 命令行。 使用 Rust 强大的生态系统快速实现命令行工具。Rust 可助您放心维护，轻松分发应用程序。
• WebAssembly。 使用 Rust 来逐个增强您的 JavaScript 模块。发布到 npm，使用 webpack 打包，即可感受到惊人的速度提升。
• 网络。 可预见的性能，极小的资源占用，坚如磐石的可靠性。Rust 极其适合网络服务。
• 嵌入式。 针对资源匮乏的设备？需要底层控制而又不失上层抽象的便利？Rust 包您满意！

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

Web 开发框架

框架	github star	github user	github 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 提供了这些开箱即用的功能：

• 路径路由和参数提取
• 标题要求和提取
• 查询字符串反序列化
• JSON 和表单主体
• 多部分表单数据
• 静态文件和目录
• 网络套接字
• 访问记录
• Gzip、Deflate 和 Brotli 压缩

    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! {
                <div>
                    <button onclick={self.link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
                    <p>{ self.value }</p>
                </div>
            }
        }
    }

    fn main() {
        yew::initialize();
        App::<Model>::new().mount_to_body();
    }

Hyper

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

• 支持HTTP/1 和 HTTP/2
• 异步设计
• 性能领先
• 测试并正确
• 广泛的生产用途
• 客户端和服务器API

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<hyper::body::Incoming>,
) -> Result<Response<Full<Bytes>>, 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 应用程序、微服务和低延迟系统。

• 使用无宏 API 将请求路由到处理程序。
• 使用提取程序以声明方式分析请求。
• 简单且可预测的错误处理模型。
• 使用最少的样板生成响应。
• 充分利用中间件、服务和 tower-http。
• 支持 WebSocket 和其他协议
• 异步 I/O

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<CreateUser>,
) -> (StatusCode, Json<User>) {
    // 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! {
            <div>
                <h2>{"你的第一个Rust App"}</h2>
                <span>{"点击: "}</span>
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

在根目录添加index.html

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