大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

前言

本文主要和大家讨论全网最火的5个基于Wasm 的 Rust 框架，使得开发者不用编写一行JS代码就可以写前端应用。在年初，我也确实使用 WebAssembly 将客户端应用成功移植到了 Web，这也是为什么我一直对 WebAssembly 充满好奇的原因。我甚至在头条上开了一个合集《WebAssembly 前沿技术》来专门探讨 WebAssembly ，并将持续关注 WebAssembly 的最新动态。

下面是已发布部分文章传送门（更多文章可以阅读我的头条专题）：

《 2023 年让 WebAssembly 大火的 10+应用！》《 万字长文！2023 年 WebAssembly 各个运行时性能对比！》《 让 JavaScript 在 WebAssembly 上加速运行！》《全网最火的5+优秀 WebAssembly 运行时！》《 在线表格再添一员猛将excelize，支持 wasm！ 》

正如大家所看到的，当我们还在迟疑是否要在日常开发中引入 WebAssembly 的时候，很多优秀的应用、工具已经开始吃 WebAssembly 的红利了，而且取得了不错的成就，这可能也是为什么各个浏览器厂商、开发者如此热衷 WebAssembly 的原因吧。

1.Rust 拥抱 WebAssembly

WebAssembly (WASM) 是一种可移植的底层二进制代码格式，可在现代浏览器上运行，就像 JavaScript 一样。 事实上，WebAssembly 也可以与 JavaScript 互操作。 开发者目前可以将大多数程序源代码转换为 WebAssembly，并在浏览器上运行它，无论是否使用 JavaScript。

Rust 速度很快，使该语言成为构建 WebAssembly 程序的首选，在此基础上衍生出了一系列的 Rust 库和框架可以为开发者提供帮助以快速构建 Web 应用程序。

2.Rust 生态的最火 Web 框架Sycamore

Sycamore 是一种快速、符合人体工程学且直观的类似 SolidJS 的反应式框架。 开发者可以使用它在 Rust 中构建 Web 应用程序，以利用 WebAssembly 的强大功能。 Sycamore 提供了在 Rust 中创建 Web 应用程序前端所需的大部分功能，因此开发者无需手动编写 JavaScript。

Sycamore 还使用 JS-sys 或 Web-Sys 在 Wasm-Bindgen 上提供路由和 JavaScript 互操作性，同时该项目也会在不久的将来发布测试和 CSS 功能。

#[component]fn Hello<G: Html>(cx: Scope) -> View<G> {    view! { cx,        p { "Hello World!" }    }}

Sycamore 的独特优势包括：

速度飞快：Sycamore 通过 WebAssembly 充分利用 Rust 的强大功能，让开发者可以完全控制性能。符合人体工程学且直观：编写代码比较自然， 这都建立在没有繁琐的虚拟 DOM 的反应式原语上。没有 JavaScript： 使用 Sycamore 创建应用程序，无需接触一行 JS，特别适用于非前端生态的开发者。支持 SSR： Sycamore 支持创建同构 Web 应用程序，即使用相同代码在服务器和客户端上运行的应用程序

目前 Sycamore 在 Github 上通过 MTI 协议开源，有超过 2.3k 的 star、540+的项目依赖量，代码贡献者 50+，是一个值得长期保持关注的项目。

Percy

Percy 是一组 Rust 库，用于构建由 WebAssembly 提供支持的前端 Web 应用程序， 支持即时服务器端渲染， 该项目擅长构建搜索引擎友好的单页应用程序 (SPA)。

Percy 提供了一个 html！ 用于生成虚拟 DOM 的宏。 开发者可以在前端将它们直接渲染为 DOM 元素，或将它们用于应用程序后端的操作。

use percy_dom::prelude::*;let text_var = " world";// 文本变量必须用大括号括起来。html! {  Hello { <div> { text_var } </div> }}

Percy 框架的典型特征包括：

支持虚拟 DOM：借助于 percy-dom 来提供虚拟 dom ，Percy 允许开发者编写功能性前端应用程序。支持 SSR： 借助于 percy-dom 的能力，Percy 可以通过渲染成字符串而不是 DOM 元素在后端工作，这种在后端渲染的能力被称为服务器端渲染。没有 JavaScript： 使用 Percy 创建应用程序，无需接触一行 JS，特别适用于非前端生态的开发者。

Percy 目前还很新，虽然这个库还没有准备好在生产环境部署，但这个项目很受欢迎，在 Github 上通过 MIT 协议开源，有超过 2.2k 的 star、80+的 fork，是一个值得长期关注的多端项目。

Seed

Seed 是一个开箱即用的全栈式 WebAssembly 框架，用于在 Rust 中构建快速的 Web 应用程序。 Seed 框架提供了一个模板系统，它使用宏语法而不是 Yew 的类 JSX 语法， 同时还还具有内置的状态管理系统以提高生产力。

Seed 目前还比较新，像日期选择器这样的预构建组件很少见。 尽管 Seed 当前不支持服务器端渲染，但该项目很快会实现它。但是，Seed 目前功能是完备的，开发者可以使用它构建生产环境的 Web 应用程序。 Seed 还使用了 Elm 架构，配置最少。 开发者可以使用 Trunk、Web Bundler 或 Seeder 构建和打包应用程序。

开发者还可以将 Seed 用于 Web 应用程序的后端。 Seed 提供了构建 REST 或 GraphQL API 的功能，具有路由和身份验证支持以及 AuthO 集成。Seed 的完整特性包括：

完全用 Rust 编写，包括模板系统（例如 div!macro）。基于 Elm 架构的内置状态管理。清晰而广泛的文档，适用于 Rust 初学者和专业人士。

目前 Seed 在 Github 上通过 MTI 协议开源，有超过 3.7k 的 star、150+的 fork、1.3k 的项目依赖量，代码贡献者 56+，是一个值得长期保持关注的项目。

MoonZoon

MoonZoon 是一个易于使用、全栈、支持 WebAssembly 的前端和后端应用程序框架。 开发者可以编写 Rust，而无需在前端编写 HTML、CSS 和 JavaScript，或在后端编写 REST、GraphQL 或 SQL。 MoonZoon 快速、简单、可扩展且对 SEO 友好。 它提供了一个 CLI 应用程序来构建易于部署的 Web 应用程序。

MoonZoon 项目理念是创建一个非常简单的工具，没有特殊术语、人为障碍或教条。 使用 MoonZoon，开发者可以专注于构建 Web 应用程序，但是需要安装 WASM-Pack 来构建前端。 MoonZoon 应用程序的后端在 Actix-web 和 Warp 上运行，这两个都是流行的 Rust 后端框架。 MoonZoon 还提供身份验证功能。

目前 MoonZoon 在 Github 上通过 MTI 协议开源，有超过 1.5k 的 star、60+的 fork、代码贡献者 16+，是一个值得长期保持关注的项目。

Yew

Yew 是一个 Rust 框架，用于使用 WebAssembly 构建多线程前端 Web 应用程序。 它允许开发者通过编写 Rust 代码并将 Rust 代码转换为 WASM，从而在任何支持 WASM 的设备上运行。

use yew::prelude::*;#[function_component]fn App() -> Html {    let counter = use_state(|| 0);    let onclick = {        let counter = counter.clone();        move |_| {            let value = *counter + 1;            counter.set(value);        }    };    // HTML宏    html! {        <div>            <button {onclick}>{ "+1" }</button>            <p>{ *counter }</p>        </div>    }}fn main() {    yew::Renderer::<App>::new().render();}

Yew 支持与 JavaScript 的 互操作（可以使用 npm 包），并且该框架提供了一个宏，用于使用 Rust 与 HTML 元素进行交互，例如 React 中的 JSX。

开发者可以使用 Trunk 应用程序打包器或 WASMPack 开始使用 Yew。Yew 框架的典型特征可以概括为以下几个点：

具有一个宏，用于使用 Rust 表达式声明交互式 HTML。 在 React 中使用过 JSX 的开发人员在使用 Yew 时很容易上手。同时，Yew 支持组件化开发，对前端开发也很友好通过最小化每个页面渲染的 DOM API 调用并轻松地将后续操作交给 Web Worker 来实现高性能支持与 JavaScript 互操作性，允许开发人员利用 NPM 包并与现有的 JavaScript 应用程序集成支持 SEO 友好的服务端渲染

目前 Yew 在 Github 上通过 Apache-2.0、MTI 协议开源，有超过 27.6k 的 star、1.3k 的 fork、9.1k+的项目依赖量，代码贡献者 376+，是一个值得长期保持关注的明星项目。

最后值得提醒的是，Yew 还不是 v1.0，如果使用 Yew 需要准备好因破坏 API 更改而进行重大代码重构。

3.本文总结

随着 Web 的不断发展，WebAssembly 会在 Web 应用程序的开发中发挥越来越重要的作用，很多高级语言如：C++/C、Rust、Go、Zig、C#、PHP、Java 等等都已经能将 WebAssembly 作为编译目标 。

基于 WebAssembly 的高级语言 Web 框架层面也是层出不穷，比如本文介绍的 Rust生态的Yew，Sycamore、percy、seed、MoonZoon 等等，又比如 Go 生态的 Vecty、Vugu、go-app、vue等等。这对于希望扩展技能并保持技术领先地位的开发人员是时候考虑学习 WebAssembly 并解锁其威力了。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料