Combining with other web frameworks / ecosystems

[aschrijver]

Leptos offers an attractive and modern web framework, where one can have an all-Rust back-end to front-end techstack. I am evaluating wasmCloud on the back-end. That also gives kind of a "WebAssembly. Everywhere." paradigm.

What is less clear to me is how I can still leverage existing web frameworks and benefit from their rich ecosystem. I am particularly thinking of React in this case and specifically React Flow diagramming component.

Say that I'd like to do as much UI-related stuff in Leptos as I can, what are approaches I could take to integrate this component in the UX?

[aschrijver]

Starting to answer my own question with some findings on the web:

• There's a SO answer on Using NPM packages with Rust and WebAssembly.
• wasm-bindgen can be used, but it doesn't look straight-forward, esp. given large API of React Flow.
  • Another SO question on How to load a NPM package to wasm-bindgen. Refers to the top SO answer as solution.
• Yew has a wasm-bindgen section in the Docs.
• I started a related discussion in the wasm-bindgen repo: Using NPM modules in Rust web frameworks

[gbj]

wasm-bindgen is the way to integrate JS libraries with Rust compiled to WebAssembly.

Trying to integrate two frameworks (React and Leptos in this case) is always difficult, and especially so with React, which doesn't necessarily play nicely with the DOM.

The most straightforward way to do this, if you need to use React for something, would be to create a web component/custom element that wraps the React component, and then simply use it as an HTML element in your Leptos app.

[gbj]

Oh, okay. Well if it's client-rendered, what you definitely want to do (IMO) is to wrap it in a web component. What this means is that you can then use it directly in your Leptos app as if it were an ordinary HTML element, which it now is!

  <div>
    <react-flow prop:data=something></react-flow>
  </div>
}

[aschrijver]

Interesting. I would have to experiment with this to see how that works in practice. Thank you for your feedback!

PS. There are some Rust + Wasm diagramming projects I found (but they don't come close to features of React Flow):

• yew-flow: Looks like the start of a port of React Flow, but no longer maintained (see: Demo).
• egui_node_graph: based on egui which is compiled to WebAssembly for the browser.
• D2: Declarative Diagramming is also apparently using WebAssembly in the browser. This is not yet available to integrators.

[Manubi]

hey @aschrijver can you tell me more about your findings? I am also interested in knowing about a workflow that let's you use some npm packages in rust. Thanks

[aschrijver]

I didn't find more straightforward ways and decided that it is probably prudent to wait some more. The wasm ecosystem is growing fast. Instead I am now looking into Tauri + Wasm + TS/React.

[Manubi]

Yeah, I also think the most productive way to go forward is to use some established frontend library like react/svelte.