In a monolithic frontend architecture, a single codebase handles the entire user interface. While this can simplify initial development, it can bec...
For further actions, you may consider blocking this person and/or reporting abuse
This is great for SPAs, but if you guys just want a traditional website with different frameworks for functionality, try Astro instead
Thanks for this post i will try this with angular
Absolutely agree with your points. This is a game-changer!
very good tutorial, but angular v19 do not have .\app\app.module.ts, in dist folder, vue generated header.umd.cjs file, react do not generate trending.umd.js.
I passed everything in ESM since it's more standard now. Thank you for the feedback <3
current status - 2024-12-11 - base concept works fine
I added the repository with the overall code working (except for Angular) at the end of the article : github.com/mairouche/mfe-news-portal
Thanks for sharing.
Thanks
This is amazing.
This is exactly what's happening in Astro behind the hood.
Correct me if I'm wrong.
To be Honest I discovered Astro with a previous comment and I'll deep dive into it. It looks like the same with Astro being maybe a bit more opinionated and closer to a framework than a library. But I'll look for it to see if I well understood
Couldnt integrate angular app, got error:
Uncaught SyntaxError: The requested module '/apps/highlights/dist/main.js' does not provide an export named 'mount' (at main.js:3:10)
has anyone make it run successful?
Depends on the version. Try with this in src/main.js:
got an abnormal main.js file under dist folder:
Do you mind sharing your full project code? this is really interesting...i have never seen a solution like this...
I update to last versions and share it tomorrow. I ping you in comment when it's done
@lwz7512 Indeed, I was using module federation with old Angular versions. I will find out what's the best approach between, widgets, module federation or web component and propose it in an edit of the article.
Integrating multiple technologies within a micro frontend architecture is generally regarded as a suboptimal design choice. This approach can lead to significant performance issues, as it necessitates loading numerous technology libraries alongside each component, resulting in a bloated and resource-intensive application. Moreover, the complexity introduced by this multi-technology setup can make maintenance and management exceptionally challenging.
A more streamlined and efficient approach is to standardize on a single library or framework across the micro frontend ecosystem. This strategy offers several advantages:
By focusing on a unified technology stack, development teams can create more cohesive, performant, and maintainable micro frontend applications that align better with the core principles of this architectural pattern.
Agree. This is why I explained in the article that it can be a solution (temporary one) to shift from a framework to another smoothly here :
For example, in my experience, we transitionned form Angular to Vue step by step thanks to this approach. I'm not saying it's a desirable design but it's an existing one. Used in the appropriate context, it can bring value.
did you have any luck with precious angular versions , eg 18?
I succeed with module federation from Angular 16- but it's not that simple. I'm still testinfg things but Vue and React are Libraries whereas Angular, as a Framework, has it's own event, state, data management etc... So it's not that easy.