This is a term that has been growing for past years. But, what is exactly a micro frontend?
Introduction
Since the dawn of the internet...
For further actions, you may consider blocking this person and/or reporting abuse
In my personal opinoin the effort required for such implementation does not match its value unless you have a very specific business requirment. and this doesn't provide all the upsides of microservice implementation. for scalable frontend setup Nx & React might be interesting to check out.
It surely is a huge effort! An approach to slowly migrate old apps and to ease this implementation is to use the iframe technique, just like @dastasoft said.
I think the typical case to assume that effort is if in your company there are two different frameworks (or more) and you need to build a new application that has some parts with legacy code and the new projects are with React for example.
For example when you log into Amazon or Paypal sometimes you navigate to a screen that looks very legacy, imagine that scenario in an app that you can't navigate completely to "somewhere else", there I think it becomes very useful.
One additional thing is that any solution other than iframes will make you change the project. Many companies can adopt a new architecture if the product is new and you are in the planning phase, but if you have a lot of projects already done, frameworks like single-spa don't fit at all.
So my bet is that if any company starts migrating to this architecture they will choose iframes because they can combine existing projects with new ones more easily.
I will keep an eye out for changes to the Webpack Module Federation as it looks very promising.
Thanks for sharing!
Single-spa can bring together many UI frameworks (not just SPAs). Check out their website, it’s pretty impressive.
And unlike iframes, you can still test it really easily. Iframes have all kinds of challenges in UI testing.
Yes, you can combine them, but you have to adapt existing projects, that's the real problem with legacy projects.
You are definitely right! Iframe is commonly picked to help companies migrate their monolithic apps.
What about design and usability consistency? If you split the front in parts like these, they may look and feel different from each other because of different implementation approaches to the same design - and here I'm hoping there is going to be a single design to the whole system.
Hey Jonatas! Your concern is very valid. This problem is commonly solved by using a design system application that makes components available for other applications.
As every app will be using these components, the general look and feel will be the same. Something like that:
Stencil.js can be used build framework agnostic component libraries. Apple use it in their design system
That's nice to know! Thanks for sharing.
Might I suggest for those wanting to move in the direction of MicroFrontend look at building separately compiled npm packages with shared dependencies using project templates in order to strategically plan a migration strategy for legacy apps.
I am currently in progress with this in my day-job and it's working out great. I am migrating a monolithic Angular app to React, so I am building libraries (collections of React components) that contain a single feature and/or related pieces in order to segregate the purposes of a given application. This allows me to include them in the shell app (the monolith) as an npm dependency and then later, at my choosing, move the npm dependencies to webpack federation or another means to remotely host and version them to lazy load them at runtime.
It's a stepping stone to MicroFrontend, but it certainly enforces the same patterns and ideas without the immense burden of using single-spa or another MicroFrontend tool. The great thing about React is you can just use ReactDOM.render() in order to render the precompiled components you want within an Angular (or whatever framework) component with lifecycle hooks to ensure proper creation, update, and garbage collection.
I'm not sure but Twitch does something similar to this. They have video team that maintains the video player, chat team to maintain the live stream chat, etc
Iframe SEO :(
Yep :( iframes have huge downsides like security and SEO. That's why the most fit technique must be picked by each company.
When you say, "huge downsides like security", can you be more specific in what you are referring to?
Hey Michael!! In terms of micro frontend maybe iframes don't expose big security problem as long as the same origin is preserved and the X-Frame-Options header is set. This mitigates attacks such as Clickjacking and XSS.
This is very informative, thank you!
Thanks Wassef!