Trying out Leptos: Fine‑grained Reactive Framework for Rust 🦀 # Trying out Leptos: Fine-grained Reactive Framework for Rust 🦀 #

🌾 What is Fine‑grained Reactivity? #

Fine-grained reactivity is about running minimal code to effect precise DOM updates when some, relevant, piece of state changes. The Leptos approach is different to React’s; Leptos has no virtual DOM to update and reconcile. Instead, you add reactivity by supplying a function for Leptos to run, when state changes. Leptos runs the function efficiently, and only when one of the function’s inputs changes. In fact, this is important to remember. The app will not be reactive unless, for example, you provide a function to determine which branch of an if statement to render.

🧱 How to Create a Leptos App #

Before you get going, you’ll face a steep learning curve, creating a Leptos project as your very first Rust project. Leptos concepts will not be too tricky to get used to, if you already know React. That said, I recommend building a CLI tool or creating an embedded Rust project, using microelectronics, before trying Leptos.

You have a couple of options for the underlying web framework to pair with Leptos: Axum  or Actix. Axum seems to carry more favour currently, so we start with that. Assuming you already have Rust set up on your system:

1. Install cargo leptos:

       
   cargo install cargo-leptos
   
     

2. Get the Axum starter code:

       
   cargo leptos new --git https://github.com/leptos-rs/start-axum
   
     

3. Change into the new project directory, then run the Leptos dev server in watch mode:

       
   cargo leptos watch
   
     

🌟 What I Built #

There’s a lot of social media apps now, and my contacts page started to get a little too busy including them all. Instead of creating a Linktree profile to list all these accounts, I built my own, using Leptos.

I wanted to deploy the app serverlessly, opting for Deno Deploy hosting. The JS fetch example  and the leptos-deno  examples were handy to get me going.

I wanted to use cutting-edge CSS features like:

• scroll-linked animation;
• :has selectors; and
• oklch colours.

I set up Lightning CSS to transform the CSS (adding polyfills for older browsers). For developer convenience, I wanted to have separate source CSS files, then bundle these into a single CSS file, for end-site speed and a better user-experience. At the time of writing, the Lightning CSS WASM version (for use with Deno) does not support bundling  . I set up ESBuild to handle that (feeding ESBuild output into Lightning CSS for minification and transformation).

WASM Support #

All popular browsers support WASM  , however testing in Safari on macOS in Lockdown mode and also, on a hardened Chromium-based browser running on Android, I noticed the page was not hydrating. Enabling JavaScriptJIT manually in the Chromium browser. Though, ensuring the page to works if WASM and JavaScript are disabled would provide a more robust experience. Following the Leptos guidance of designing defensively  , I set about implementing this.



I created a widget for each set of links in the app. For example, X (previously Twitter), Mastodon, Bluesky and Nostr share a widget. You only see full details for one link (initially Mastodon). Though, by clicking a button (for Bluesky, Nostr or X, for example) you promote that site’s details. This reactivity requires hydration.

To design defensively, when the page first loads, I created all the buttons as anchor tags. They only change to buttons when the page hydrates. This let me try out more Leptos features, managing state to display the correct details. That is, while keeping the page accessible and functional to users with JavaScript disabled or WASM blocked.

Leptos Reactivity #

Many features will look familiar to React, as well as Svelte users. As an example, you let Leptos know a variable is reactive by assigning a function to it, similar to Svelte 5. Typically, you will use Rust closures for these functions. The APIs have names like create_effect, which almost sounds familiar if you already know React!

Here is an example code snippet:

    
1 #[component]
2 pub fn LinkGroup(link_group: LinkGroupStruct) -> impl IntoView {
3     let (hydrated, set_hydrated) = create_signal(false);
4     create_effect(move |_| {
5         request_animation_frame(move || set_hydrated.set(true));
6     });
7  
8     if hydrated.get() {
9         view! {
10             <TreeLink /* TRUNCATED...*/ />
11         }.into_view()
12     } else {
13         view!{
14             <a href=url aria-label=description >
15                 {get_icon( &icon)}
16             </a>
17         }.into_view()
18     }
19 }

  

• createSignal in line 3 is a Leptos API used to create and update state
• create_effect is line 4 is a Leptos API, which runs in the browser; here we update set_hydrated automatically, so the DOM updates reactively on hydration
• Rust does not let you return different expression types from the two arms of an if statement. into_view is added to convert the anchor tag and the TreeLink component to the same type

Notice we call a function (hydrated.get), to determine the current state of the app, and decide which branch to render. Again, Leptos uses functions to update reactive elements efficiently.

🧡 What I Liked #

• Leptos compiles the app to WASM, giving you some choice over where you deploy. You can set up a Docker container for a long-running service, or use Deno Deploy, for example, if you prefer to go serverless
• although you work in Rust, you have access to JavaScript Web APIs via the web_sys crate. I used that to call window.open, from Rust, to implement sharing the page on social networks.
• Leptos uses the web primitives you are used, meaning you don’t have to learn new tools. I used ESBuild to minify emitted JavaScript code ready to serve on Deno Deploy and SVGO to minify the SVG sprite sheet for the app’s icons.

🧐 What I need to Explore More #

Overall, Leptos provides a great developer experience. Anecdotally, I noticed a slight delay in the WASM initially loading, compared to Svelte apps I created using Astro. I have done no scientific measurement though, and once WASM has loaded the page is super snappy. Here are a few more aspects I need to explore further.

• Hot reloading is slower than with modern JavaScript-based frameworks such as Astro, Remix and SvelteKit. I need to see if there are some optimizations for shortening the feedback loop.
• I like concentrating on just getting the code down (albeit poorly formatted), then hitting save to get it looking pretty. I missed this for the web markup in Leptos, and need to look into what options are available for automatically formatting web markup.
• I mentioned you can use the web_sys crate to access regular JavaScript Web APIs, however, these will probably always be a step behind on the latest APIs. If you need to have bleeding edge APIs, you might need to add implementations yourself to web_sys.

🥏 What’s Coming #

Islands architecture is on its way! The recent Leptos 0.5.0 release  introduced experimental support the islands of interactivity with frameworks like Deno Fresh and Astro use to serve your pages at warp speed. The feature is still experimental, though demos show it can reduce your WASM bundle size by up to 80%. As well as Islands architecture, you can now create static routes with Leptos. Looking forward to exploring these new features.

🗳 Poll #

Will you use a Rust framework for your next web app project?

• 🌾 Yes, I will use Leptos
• 🦀 Yes, I will use Yew/Dioxus or other Rust library
• 🙈 No, I prefer JavaScript/node
• 😲 No, I prefer something else

Vote  

Voting reveals latest results.

🙌🏽 Trying out Leptos: Wrapping Up #

In this post, we saw some key Leptos features and why you should consider it for your Rust web app. More specifically, we saw:

• what fine-grained reactivity is;
• how to create a Leptos app; and
• some Leptos features you might like, such as support for JavaScript Web APIs.

I plan to open source code for a Linktree app, lie the one I created. You can see the live version at links.rodneylab.com  . Let me know what you plan to build with Leptos, also whether you go down the Docker deployment route, give Deno a go, like I did.

🙏🏽 Trying out Leptos: Feedback #

If you have found this post useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.


Rodney
@askRodney
Just dropped a new post on trying Leptos, where

I talk about building defensively with Leptos,
upcoming features, like static routes, and
targetting a serverless, rather than Docker native app.

Hope you find it interesting!

#askRodneyhttps://t.co/pwPE7CpSfE
— Rodney (@askRodney) October 11, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on X (previously Twitter) and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on Deno as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.