网站 | 书籍 | Docs.rs | 沙盒 | Discord

您可以在 awesome-leptos 中找到有用的库和示例项目列表。

Leptos

use leptos::*;

#[component]
pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
    // create a reactive signal with the initial value
    let (value, set_value) = create_signal(initial_value);

    // create event handlers for our buttons
    // note that `value` and `set_value` are `Copy`, so it's super easy to move them into closures
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| *value -= 1);
    let increment = move |_| set_value.update(|value| *value += 1);

    // create user interfaces with the declarative `view!` macro
    view! {
        <div>
            <button on:click=clear>Clear</button>
            <button on:click=decrement>-1</button>
            // text nodes can be quoted or unquoted
            <span>"Value: " {value} "!"</span>
            <button on:click=increment>+1</button>
        </div>
    }
}

// we also support a builder syntax rather than the JSX-like `view` macro
#[component]
pub fn SimpleCounterWithBuilder(initial_value: i32) -> impl IntoView {
    use leptos::html::*;

    let (value, set_value) = create_signal(initial_value);
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| *value -= 1);
    let increment = move |_| set_value.update(|value| *value += 1);

    // the `view` macro above expands to this builder syntax
    div().child((
        button().on(ev::click, clear).child("Clear"),
        button().on(ev::click, decrement).child("-1"),
        span().child(("Value: ", value, "!")),
        button().on(ev::click, increment).child("+1")
    ))
}

// Easy to use with Trunk (trunkrs.dev) or with a simple wasm-bindgen setup
pub fn main() {
    mount_to_body(|| view! {
        <SimpleCounter initial_value=3 />
    })
}

关于框架

Leptos 是一个全栈、同构的 Rust 网页框架，利用细粒度反应性来构建声明性用户界面。

这是什么意思？

• 全栈：Leptos 可以用于构建在浏览器中运行（客户端渲染）、在服务器上（服务器端渲染）或通过在服务器上渲染 HTML 然后在浏览器中添加交互性（服务器端渲染与水合）的应用程序。这包括对数据（Resource）和 HTML（无序或有序流式传输 <Suspense/> 组件）的 HTTP 流的支持。
• 同构：Leptos 提供了编写同构 服务器函数 的原语，即可以在客户端或服务器上以“相同形状”调用的函数，但只在服务器上运行。这意味着您可以在与客户端组件一起消耗它的服务器端逻辑（数据库请求、身份验证等）旁边编写，并像它们在浏览器中运行一样调用服务器函数，而不需要创建和维护单独的 REST 或其他 API。
• Web平台: Leptos基于Web平台和Web标准构建。该路由器旨在使用Web基础（如链接和表单）并在此基础上构建，而不是试图取代它们。
• 框架: Leptos提供了构建现代Web应用所需的大部分功能：反应式系统、模板库以及能够在服务器和客户端上运行的路由器。
• 细粒度反应性：整个框架都是由反应式原语构建的。这允许代码具有极高的性能和最小的开销：当一个反应信号值发生变化时，它可以更新单个文本节点、切换单个类或从DOM中删除元素，而无需其他代码运行。（因此，没有虚拟DOM开销！)
• 声明式：告诉Leptos页面应该如何显示，然后让框架告诉浏览器如何实现。

了解更多

以下是一些学习Leptos的资源

• 书籍（正在制作中）
• 示例
• API文档
• 常见错误（以及如何修复它们！）

nightly 注意

大多数示例都假设您正在使用nightly版本的Rust和Leptos的nightly功能。要使用nightly Rust，您可以将其设置为全局工具链或按项目设置。

要将nightly设置为所有项目的默认工具链（如果您尚未这样做，则添加将Rust编译成WebAssembly的能力）

rustup toolchain install nightly
rustup default nightly
rustup target add wasm32-unknown-unknown

但是，如果您只想在Leptos项目中使用nightly，请添加以下内容的rust-toolchain.toml文件

[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]

nightly功能启用了用于访问和设置信号的函数调用语法，而不是.get()和.set()。这导致了一种一致的思维模型，其中访问任何类型的反应值（信号、memo或派生信号）始终表示为函数调用。这只有在nightly Rust和nightly功能的情况下才有可能。

cargo-leptos

cargo-leptos是一个构建工具，旨在使构建同时运行在客户端和服务器上的应用程序变得容易，具有无缝集成。现在开始一个真实的Leptos项目的最佳方式是使用cargo-leptos和我们的Actix或Axum入门模板。

cargo install cargo-leptos
cargo leptos new --git https://github.com/leptos-rs/start
cd [your project name]
cargo leptos watch

打开浏览器到https://127.0.0.1:3000/。

常见问题解答

这个名字是怎么回事？

Leptos（λεπτός）是古希腊语中的一个词，意为“轻薄、轻巧、精致、细腻”。对我来说，一个古典学者而不是狗的主人，这个词让我想起了驱动框架的轻量级反应式系统。后来我了解到，同一个词也是医学术语“莱姆病”的词根，这是一种影响人类和动物的血液感染……抱歉。在创建这个框架的过程中没有伤害任何狗。

它是否已经准备好投入生产？

人们通常通过这个问题来表达三种不同的意思。

1. API是否稳定？也就是说，我是否需要将整个应用程序从Leptos 0.1重写到0.2，再重写到0.3和0.4，或者我现在可以编写它，并随着新版本的推出受益于新功能和更新？

API基本上已经确定。我们正在添加新功能，但我们非常满意类型系统和模式的定位。我不期望在架构方面会有重大的破坏性变化来适应未来的发布。

2. 有没有错误？

是的，我确定有一些。你可以从我们问题跟踪器的状态中看到，并没有那么多很多的bug，而且它们通常被迅速解决。但当然，可能会有一些时刻，你会遇到一些需要在框架层面解决的问题，这些问题可能不会立即得到解决。

3. 我是消费者还是贡献者？

这可能是最大的问题：“生产就绪”意味着对库的一种特定定位：你可以基本上使用它，而无需了解其内部结构或贡献能力。每个人在他们的堆栈中都有一定程度的这种能力：例如，我（@gbj）目前没有能力或知识为像wasm-bindgen这样的东西做出贡献：我仅仅依赖它工作。

目前，社区中有多个人在工作中的内部应用程序中使用Leptos，他们也成为了重要的贡献者。我认为这是目前正确的生产使用级别。可能会有你需要的缺失功能，你可能最终会自己构建它们！但对于内部应用程序，如果你愿意在构建过程中构建和贡献缺失的部分，框架现在肯定是可以使用的。

我能用它来构建原生GUI吗？

当然可以！显然，view宏是用于生成DOM节点，但你也可以使用响应式系统轻松地驱动任何使用类似DOM的面向对象、基于事件回调框架的原生GUI工具包。原则是相同的。

• 使用信号、派生信号和memo创建你的响应式系统
• 创建GUI小部件
• 使用事件监听器更新信号
• 创建效果以更新UI

我已经创建了一个非常简单的GTK示例，以便你可以了解我的意思。

为0.7版本开发的新的渲染方法支持“通用渲染”，即它可以使用支持一组小到6-8个函数的任何渲染库。（这是在典型的保留模式、面向对象的GUI工具包之上构建的，如DOM、GTK等。）这项未来的渲染工作将允许以更类似于Web框架使用的声明式方法创建原生UI。

这与Yew有何不同？

Yew是Rust Web UI开发的常用库，但Yew和Leptos在理念、方法和性能方面存在一些差异。

• VDOM与细粒度：Yew基于虚拟DOM（VDOM）模型：状态变化会导致组件重新渲染，生成一个新的虚拟DOM树。Yew与之前的VDOM进行比较，并应用这些补丁到实际的DOM。组件函数在状态变化时重新运行。Leptos采用完全不同的方法。组件运行一次，创建（并返回）实际的DOM节点，并设置一个响应式系统来更新这些DOM节点。

• 性能：这有巨大的性能影响：Leptos在创建和更新UI方面比Yew要快得多。

• 服务器集成：Yew是在浏览器渲染的单页应用（SPA）是主流范式时期创建的。虽然Leptos支持客户端渲染，但它也侧重于通过服务器函数和多种HTML服务方式与服务器端应用程序集成，包括顺序流。

• 这与Dioxus有何不同？

与Leptos类似，Dioxus是使用Web技术构建UI的框架。然而，在方法和功能上存在重大差异。

• VDOM与细粒度：虽然Dioxus有一个性能良好的虚拟DOM（VDOM），但它仍然使用粗粒度/组件范围内的响应式：改变一个有状态值会重新运行组件函数，并将旧UI与新UI进行比较。Leptos组件使用不同的思维模型，创建（并返回）实际的DOM节点，并设置响应式系统来更新这些DOM节点。

• Web与桌面优先级： Dioxus在其全栈模式下使用Leptos的服务器功能，但并不具备相同的<Suspense>支持，例如流式HTML渲染，或者对整体Web性能的同样关注。Leptos倾向于优先考虑整体Web性能（流式HTML渲染、更小的WASM二进制大小等），而Dioxus在构建桌面应用程序方面拥有无与伦比的经验，因为您的应用程序逻辑以原生的Rust二进制形式运行。

• 这与Sycamore有何不同？

Sycamore和Leptos都受到了SolidJS的强烈影响。到目前为止，Leptos拥有更大的社区和生态系统，并且发展更加活跃。其他差异

• 模板DSLs： Sycamore使用自定义模板语言为其视图服务，而Leptos使用类似JSX的模板格式。
• 'static信号： Leptos的主要创新之一是创建了Copy + 'static信号，这些信号具有极佳的人体工程学设计。Sycamore正在采用相同的模式，但尚未发布。
• Perseus与服务器功能： Perseus元框架提供了一种具有观点的方式来构建包含服务器功能的应用程序。相反，Leptos在框架核心中提供诸如服务器功能等原语。