DEV Community

Cover image for Microservices vs. Micro Frontends: What's the Difference?

Microservices vs. Micro Frontends: What's the Difference?

Pavan Belagatti on July 25, 2023

In the ever-evolving landscape of software development, two groundbreaking architectural styles, microservices, and micro frontends, have emerged a...
Collapse
 
janhommes profile image
Jan Hommes • Edited

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...

Collapse
 
gyurmatag profile image
György Márk Varga

Can you please make a second part of this tutorial where you make the micro frontends with React - Next for example.

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Sure:)

Collapse
 
zhshqzyc profile image
Hui Zhao

Also micro frontends with Angular. Hopefully....

Collapse
 
windyaaa profile image
Windya Madushani

Great article.

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Thank you!

Collapse
 
joneskleber3 profile image
Jones Kleber

Great article!
Thank You!

Collapse
 
nyangweso profile image
Rodgers Nyangweso

good stuff and illustration

Collapse
 
getsetgopi profile image
GP

This does not look like micro front-end from any angle. Your frontend1 and frontend2 are 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.

Collapse
 
upendra-allagadda profile image
Upendra-Allagadda

A great blog with good hands on examples. I liked it.

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Thanks for the support!

Collapse
 
srshifu profile image
Ildar Sharafeev

Great article! If you want to learn more about micro-frontends recommend to go through my series of articles: thesametech.com/micro-frontend-mig...

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Sure. I'll go through your articles.

Collapse
 
mickmister profile image
Michael Kochell

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?

Collapse
 
derick1530 profile image
Derick Zihalirwa

I suggest you read this: turbo.build/repo/docs/handbook

Collapse
 
mickmister profile image
Michael Kochell

Amazing, thanks Derick!

Collapse
 
tobiobeck profile image
Tobi Obeck

Nice practical article, thanks for writing it!

Could you explain Step 4 about the Microfrontend Server in more detail?

I am not sure what ProxyMiddleware in server.js is exactly doing. What is the purpose of the middleware route /microfrontend1 if it is redirected to the same server, just to another route (/frontend1)?

So why not directly name the static app.use route /microfrontend1 instead 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).

Collapse
 
vickygonsalves profile image
Vicky Gonsalves

Good Blog. But it should also cover disadvantages as well.
Concerns such as authentication, caching, and analytics, Performance should also be taken into consideration.

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Sure, will cover in the upcoming articles.

Collapse
 
mjoycemilburn profile image
MartinJ • Edited

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?

Collapse
 
sirajulm profile image
Sirajul Muneer • Edited

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.

Collapse
 
ealvaro profile image
Alvaro Escobar • Edited

In the step:
Step 1: Set Up the Microfrontend Architecture

should have been

npm install http-proxy-middleware
Enter fullscreen mode Exit fullscreen mode
Collapse
 
onlinemsr profile image
Raja MSR

Thanks for sharing this informative blog post on the difference between microservices and micro frontends.

Collapse
 
temzycodes profile image
Temiye Akinyemi

You are good teacher. Your clear explanation of microservices blew my mind

Collapse
 
potuss7 profile image
Pedram Riahi

Thanks for this post but the code in step's 4 didn't work for me