DEV Community

Micro frontends: my lessons learned

Natalia Venditto on December 18, 2020

Hello there! For the past 6 months at work, I have been busy analyzing, experimenting, testing and sometimes suffering, while exploring the depths...
Collapse
 
sidthesloth92 profile image
Dinesh Balaji

First of all, great post and a long one.. :). I'm beginning to explore micro-frontends and this really helped a lot. From my experience as an enterprise architect, I would say, 1. Having a core team for the host is a must like you said. 2. I really don't think having multiple frameworks will ever work, it's just too much complexity for data sharing, performance etc. I believe you will lose all the time saved doing micro frontends by fixing those bugs!! I'd rather stick to a single framework..:)

Collapse
 
anfibiacreativa profile image
Natalia Venditto • Edited

Thank you! and ....Exactly!!! Which then makes you really wonder if you truly need microfrontends in the first place :D

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen • Edited

I strongly agree. If you're going to use the same framework, a well-structured monorepo will help you a lot more. It should allow teams to work in isolation, only test, build, and deploy according to what has changed in their commits. It should guard them from making deep imports.

The only real use case for most organizations in my mind is if feature modules are not known at build time. JavaScript itself is very dynamic and even allows arbitrary dynamics imports. Out build tools and compilers are the issue here. Recently, a build tool provided a solution for a problem it introduced itself. Webpack Module Federation. This is just scratching the surface. Microfrontends bring a lot of complexity and challenges as mentioned in this insightful article.

Thread Thread
 
anfibiacreativa profile image
Natalia Venditto

100% agreed, Lars. Monorepos are definitely the way to go!

Collapse
 
cereal84 profile image
Alessandro Pischedda

Great article !!!

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Thank you, Alessandro!

Collapse
 
anfibiacreativa profile image
Natalia Venditto • Edited

Thanks very much for stopping by.

Not sure if you have read the full post because I explicitly mention my continuation post to be on Module Federation, including conclusions after discussing the topic directly with Zack Jackson.

Thanks for the references to other articles, like the DAZN ones. I have already read in 6 months, all literature about Micro Frontends out there. As I mention several times through the post, micro frontends are a good solution for products. But my conclusions, come from practice and execution in high performance enterprise scale projects. As an Enterprise Solutions Architect, my goal is to expose my practical evaluation for other architects to make informed decisions in that context.

When I mention orchestration, I don't specifically mention any tools. I don't make any specific 3rd party recommendations. It could be single-spa, it could be something else. The point being, orchestration is a big part of the success of this solution.

Finally, ESI's have been around for quite a while, and are not compatible with or supported in every context. They're also implemented at cache/CDN level. My post is frontend oriented.

So, again, thank you very much for your comment. Maybe you come around again for the Module Federation part.

Have a great day!

Collapse
 
siy profile image
Sergiy Yevtushenko • Edited

If splitting apart the backend was successful why not the frontend?

I think such an assumption about microservices is wrong in the first place. Microservices significantly increase complexity and, like any similar (i.e. with increased complexity) solution, they have very specific and demanding conditions of application. As usual, hype and reality have very little in common.

Collapse
 
anfibiacreativa profile image
Natalia Venditto

I totally agree with you ;)

Collapse
 
armelpingault profile image
Armel

Another great post Natalia! One thing I am expecting from micro-frontends (that we are going to use a lot more this year) is making our team a bit more scalable. As you mentioned in your article, with big FE monolith, it's not always easy for a new joiner to be quickly productive as he needs to understand how the whole application is working, and by the time the workload has decreased, he might not even have the time to become very productive. With micro-frontends (and micro-services too), hopefully with can easily and quickly integrate new joiners during high workload. That's still pure theory but let's see how it goes...

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Thanks Armel! Let me know how it goes! That is a very good point!

Collapse
 
martinstaudt profile image
Martin Staudt

Thank you for this awesome post and your insights. I'm currently exploring to use micro-frontends at work as well. My main reason for choosing micro-frontends is actually to be able to use different frameworks simultaneously. Our main framework will be react, but I want the possibility to migrate away from it step by step, without having to re-write the whole application from scratch. Our current monolithic frontend is written in AngularJS and since we are still a very small team, with a huge application, migrating away from AngularJS for us currently would mean no new feature releases in the current frontend, while rewriting everything in the new framework. And we don't want that to happen to us again in the future, so that if for some reason react would be deprecated, we can update each micro-frontend on it's own. That is actually an approach I want to try now with our current monolith. My current plan is to integrate the AngularJS monolith into the micro-frontend architecture and then gradually replace different parts of the application. Do you have any suggestion or tips on achieving that? Or would you generally advice against doing that?

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Thank you for replying, Martin! Actually, avoiding vendor-lock is probably one of the strongest points in favor of micro-frontends.

I can only tell you how I avoid a framework vendor-lock in the projects I lead. ... I promote development in vanilla JS (ES6) and we only use framework for very specific cases (usually in the form of micro apps, as I describe in the article)

But there is also the thing that specifications change too, so no framework will last forever and no vanilla JS frontend will last forever. Always, at some point, you will need to migrate to a newer version.

Strategic modularization, is the key.

Collapse
 
harshilparmar profile image
Harshil Parmar

Thank you so much..this is what I am looking for 😍

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Glad to be of help!

Collapse
 
arnaudspanneut profile image
Arnaud Spanneut

Really nice reading, thanks 👍

Collapse
 
anfibiacreativa profile image
Natalia Venditto

Thank you for reading!

Collapse
 
bmitchinson profile image
Ben Mitchinson

Great writeup! Thanks for your perspective and addressing the advantages + disadvantages. Really helped me understand for the first time what a Micro-frontend really is.

Collapse
 
anfibiacreativa profile image
Natalia Venditto

So happy to be of help! Thank you for reading! 👏

 
anfibiacreativa profile image
Natalia Venditto

See you around! 👍