Micro-Frontend guidance for integration of a Leptos app with a React container

[jreuben11]

Hi all,
As a Software Architect, I've been pushing Rust and the idea of Leptos at work.

While there is some interest in backend Rust microservices, our frontend is a typical React UI monolith with tens of man-years of development put into it. There is no way to rationalize to conservative R&D a complete replacement with an exotic technology stack.
However, I came accross the concept of Micro-Frontends - whereby the UI is in fact constructed as a composition of features which are owned by independent teams.

I see there are many challenges to such an approach: WebPack Module Federation, MonoRepo Github Actions, and sharing styles / auth / routing navigation / state reducers across independently developed components - much complexity.

Having said that, if there is guidance on how to integrate a Leptos app into the browser Micro-Frontend container "real-estate" of a React app, this could be the way to "wedge the foot in the door" and "open up the umbrella" for Leptos, so to speak !

Interested in hearing your thoughts on how to do this

[gbj]

It has always been my experience that the relationship between number of frameworks or number of languages and complexity is basically O(n^2) — i.e., going from 1 language and 1 framework (JS + React) to 2 languages and 2 frameworks (Rust + JS and React + Leptos) seems to me like it would be more like a 4x increase in the complexity of your application than a 2x one.

That said, feasible ways to integrate two different languages/two different frameworks would include:

• web components: building a few custom elements with Leptos and integrating them into your React app
• mounting to an empty element: render a <div> or whatever with React and then mount a Leptos app to it
• ???

There is no way to rationalize to conservative R&D a complete replacement with an exotic technology stack.

To be honest, if you don't have a compelling reason that you want to use Rust and it's not a greenfield project then the skepticism here is probably warranted!

Not intended as a pessimistic response. Maybe you really do have a compelling reason that you want to integrate Leptos into this application and then one of the two approaches above could work well.

[jreuben11]

I am currently investigating these micro frontend frameworks, which may be Leptos compatable:

• Module Federation 2.0
• Single-spa
• picard.js
• Piral