Convenient micro frontend framework?

Question

Which is the best approach/framework for micro frontend development?

I have more than 5 apps based on angular, react and vue and want to display all 5 apps on a single UI. We have many micro frontend frameworks like single spa, piral, moisaic project, Podium and many more.. available in market now.Need a clear picture which help me to achieve it using any framework.

Answer 1

1. I believe Web Components (Custom Elements) comes as a rescue for you.
2. Customized built-in elements inherit from basic HTML elements and these are capable to run as standalone
3. Bundle your any javascript framework into single bundled JS file and wrap it in custom elements (its framework independent)
4. Share Data across MFE using custom events

You can find a good example here - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Answer 2

I think web components comes to the rescue in your case. You encapsulate your react/angluar/vue/whatever in custom element and communicate each other with properties and events

But be careful, not all frameworks play well with custom elements - https://custom-elements-everywhere.com/

Answer 3

It all depends.

Obviously, I am biased towards Piral, but in order for Piral to be efficient you'll need to check some (the more, the better) of the following bullet points:

• [ ] You want an app shell (either for technical reasons, e.g., provide shared dependencies and / or for other reasons such as a shared / centrally governed design)
• [ ] You have a clear tendency towards React (i.e., you have lots of different frameworks, but the majority of your apps is written in React)
• [ ] You need to have components in components (e.g., a component from microfrontend A should be used in a page from microfrontend B)
• [ ] Your application is "dynamic" / has a "tool" (or application)-like character; no-JS is not a requirement
• [ ] You want to enable / disable modules on the fly (e.g., certain users should only see microfrontend A, but not B)
• [ ] You'd love to have rich tooling support, e.g., when scaffolding a new module - and TypeScript support should be first-class, too
• [ ] Lazy loading (not only of full microfrontends, but of individual components such as pages) should be possible
• [ ] Communication via the different modules is never direct, but always indirect (i.e., your system will never break if microfrontend A is there, but microfrontend B is not)

The others you mentioned have similar lists.

Hope that helps!

Answer 4

First of all, let's figure out why you are going to use micro frontend?

• Complex business logic in your current frontend?
• Distributed teams?
• Restructure your legacy systems?
• Any other reasons?

We are going to use micro frontend because we have distributed systems and want to provide our customers with consistent experience when they need to use different web service for their daily work.

We are using React to structure our micro frontend services, because it's easy to manage those components that following our material design, there must be some team or someone to doing and maintain the overall architecture, like styling, common components and practices.

For details, we mainly following this great article

We are still on progress, hope to discuss more about it.