In the ever-evolving landscape of software development, two groundbreaking architectural styles, microservices, and micro frontends, have emerged a...
For further actions, you may consider blocking this person and/or reporting abuse
Sorry, but your example is for me not a microfrontend. Your example is a simple static web server. There is no difference in your example then having two html files called microfrontend1.html and microfrontend2.html.
You can say, that a classic webserver is kind of a microfrontend if it shares stuff. But your exampele isn't even sharing stuff. Also your proxy is not needed at all, you could simply serve the staic files from the root folder and it call the folder microfrontend1 and microfrontend2 and it would work the same way as described.
The main goal of microfrontends is to have it in one view. So you usually have one shell application and multiple remotes. The shell applications host those remotes (maybe one at a time, or multiple at a time) and they are mostly loaded on runtime. You then share certain dependencies (like a common framework) and can load it from different servers. Main goal for me, is to have more losley coupled deployments, espacially when you have big teams or if you want an extension concept for your forntend. We just integrated later into our product (while having classic static file hosting for nearly 10 years). I wrote something about it here:
tech.forums.softwareag.com/t/the-p...
Can you please make a second part of this tutorial where you make the micro frontends with React - Next for example.
Sure:)
Also micro frontends with Angular. Hopefully....
Great article.
Thank you!
Great article!
Thank You!
good stuff and illustration
This does not look like micro front-end from any angle. Your
frontend1andfrontend2are two separate and they are not sharing anything between them nor the implementation is right. You need to read about Webpack Module Federation, Single-SPA, BFF, Open Component, Bit etc., to understand micro front-end.A great blog with good hands on examples. I liked it.
Thanks for the support!
Great article! If you want to learn more about micro-frontends recommend to go through my series of articles: thesametech.com/micro-frontend-mig...
Sure. I'll go through your articles.
Frontends are usually a little more complicated than one HTML file 🙂 Given that the frontends are React applications, do you suggest having separate node projects for each of them? Dependencies could differ between them.
Sharing code between local npm projects in the same repo can work well, though there are many wrong ways to do this. Any thoughts on this?
I suggest you read this: turbo.build/repo/docs/handbook
Amazing, thanks Derick!
Nice practical article, thanks for writing it!
Could you explain Step 4 about the Microfrontend Server in more detail?
I am not sure what
ProxyMiddlewareinserver.jsis exactly doing. What is the purpose of the middleware route/microfrontend1if it is redirected to the same server, just to another route (/frontend1)?So why not directly name the static
app.useroute/microfrontend1instead of/frontend1(app.use('/microfrontend1', express.static('frontend1'));)?Also, the generic example of frontend1 and frontend2 doesn't really make clear for what business use case this architecture makes sense, meaning the benefit of it. I would have expected an example of the interplay between the microfrontends and microservices. E.g. frontend1 fetches products/orders and frontend2 fetches users (including products orders).
Good Blog. But it should also cover disadvantages as well.
Concerns such as authentication, caching, and analytics, Performance should also be taken into consideration.
Sure, will cover in the upcoming articles.
Fascinating stuff - and well explained. But I'm with Varga on this. Say I've got a monumental webapp built with React and React-router. It works pretty well, but I'm open to new ideas. How could micro frontends help me to make things work even better?
Unfortunately this is not a microfrontend. This is just static server and yet another multipage application.
Microfrontends have a shell application which usually handles the routing of the entire application and each route or sub component of a page would then become a microfrontend.
In the step:
Step 1: Set Up the Microfrontend Architecture
should have been
Thanks for sharing this informative blog post on the difference between microservices and micro frontends.
You are good teacher. Your clear explanation of microservices blew my mind
Thanks for this post but the code in step's 4 didn't work for me