Convenient micro frontend framework? [closed]

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.

Fontenot

dodo.mikosoft.info - The Dodo as an alternative framework. Blazing fast, easy to learn, Javascript, frontend framework for reactive web pages & apps. – Poirer

Answer 1

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!

Godown

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/

Lightfingered

Aren't web components more suited for, well components, rather than full-fledged apps? How would you go about bundling an app in a component if that app also contains static resources, such as images or fonts? – Walloper

The same way you do it for normal apps - push static resources to some CDN, then start using it. If it's image, then add <img> element pointing to resource, if it's font, then add <link rel="stylesheet"> and attach it this element to the shadowdom – Lightfingered

@ladyd3v For normal apps I'd tend to serve the static resources in same host as the app tbh, so I can use relative paths. But then again I'm still very new to all of this :D I take it that you'd allow overriding the CDN host with a component attribute? – Walloper

If you want to serve static resources on the same host and use relative paths, you still can do it. All relative paths inside web components are relative to document root – Lightfingered

Answer 3

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

Subterrane

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.

Anthodium