Leptos 是一个全栈、同构的 Rust Web 框架,利用细粒度的反应性来构建声明式用户界面。
全栈
Leptos可以用来构建在浏览器(客户端渲染)、服务器(服务器端渲染)中运行的应用程序,或者通过在服务器上渲染HTML,然后在浏览器中添加交互性(hydration)。这包括支持数据(资源)和HTML的HTTP流(<Suspense/>组件的失序流)。
同构性
Leptos提供了编写同构服务器函数的基元,即可以在客户端或服务器上以 "相同的形式 "调用的函数,但只在服务器上运行。这意味着你可以将你的服务器专用逻辑(数据库请求、认证等)与将消费它的客户端组件一起编写,并调用服务器函数,就像它们在浏览器中运行一样。
Web
Leptos是建立在Web平台和Web标准之上的。路由器被设计为使用Web的基本要素(如链接和表单)并建立在它们之上,而不是试图取代它们。
框架
Leptos提供了你构建现代Web应用所需的大部分东西:一个反应式系统、模板库和一个在服务器和客户端都能工作的路由器。
细粒度的反应性
整个框架是由反应式基元构建的。这允许以最小的开销实现极高性能的代码:当一个反应式信号的值发生变化时,它可以更新一个文本节点,切换一个类,或从DOM中删除一个元素,而无需运行任何其他代码。(所以,没有虚拟DOM!)。
声明性的
告诉Leptos你想让页面看起来如何,并让框架告诉浏览器如何做。
Leptos允许您以一种非常实用的方式在同一个源代码中编写后端和前端:(以下代码可能有书写错误)
#{server(AddTodo, ./api.)] pub async fn add_todo(title: String) -3 Result<(), ServerFnError /et mut conn = db().await?;
std thread:: sleep(std::tinie ::Duration,from_millis (1250))
sqlx::query(.INSERT INTO todos (title, completed) VALUES ($1, false) ) .bind(title) .execute(&mul conn) .await .maP(1_1 .mag-err(lel ServerFnError::ServerError(e.to_string()))
#{component} pub fn Todos(cx: Scope) -A impl IntoView let add_todo create_server_multi_action,<AddIod0>(.); let delete_todo create_server_action,<DeleteTodo,(co); let submissions add_todo.submissions(),
// list of todos is loaded from the server in reaction to changes let todos = create_resource( cx, move |||(add_todo.version().get(), delete_todo.version().get()), move |_| get_todos(cx), ),
view! { cx, <div> <MultiActionForm action=add_todo> <label> "Add a Todo" <input type="text" name="title" /> </label> <input type="submit" value="Add"/> </MultiActionForm> <Transition fallback=move II view! {cx, <p>.Loading....</P> }> {move || { let existing_todos = { move || { todos.read() .map(move Itodosl match todos { Err(e) => { vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
|
上述代码前端与后端在一起:
- #{server(AddTodo, ./api.)] 表示后端API
- #{component}和view! 代表前端