When people talk about Micro-Frontends, the first thing that they would mention is their amazing power to scale up. They achieve this by splitting services into smaller pieces which cooperate seamlessly.
Advantages of Micro-Frontends 👍
Micro-Frontend supports strands where teams can realize the subsequent frontend features distinctly making iteration faster.
Horizontal scalability in micro frontends aims to empower organizations to expand their frontend architectures by scaling out horizontally. 📈
Disvantages of Micro-Frontends 👎
Micro-frontends can complicate the development, maintenance, and building of a website. However, these challenges can be mitigated by using smart designs, tools that aid in automatic deployment and testing, and ensuring clear communication between teams. 📉
Dependency management could be a problem if the teams don't communicate each others. But it can be resolved by estabilishing clear communication channels between teams to discuss updates! 👌
Monolithic applications often encounter challenges with effective scaling. By decomposing the frontend into micro-frontends, advanced logic structures such as lazy loading and service workers can be implemented more efficiently.
JavaScript flexibility allows teams to add a variety of frameworks and libraries, facilitating seamless integration and interoperability between microfrontends. The rich ecosystem of JavaScript tools provides developers with powerful resources to create dynamic and responsive user interfaces.❤️
- Inspired by the book: Building Micro-Frontends Scaling Teams and Projects, Empowering Developers. by: Luca Mezzalira Foreword by Neal Ford
Join Us!
So... do you love Javascript and want to contribute to an open-source project? What are you waiting for?😁 Head over to Webcrumbs and join a community dedicated to the JavaScript ecosystem for open-source enthusiasts!
Top comments (16)
Microservices Architecture (Micro-Frontend included) are useful for big organisations like Netflix where you have multiple programming departments each working on a part of your system.
The overall system can be broken into microservices with each department almost independently managing their group of microservices. Sort of like working on your own piece 🧩 of a large puzzle. It'll be overwhelming for a single or few developers to handle so many puzzle pieces without something going wrong.
Yeah! Netflix, Amazon and others.
The way that you can distribute your entire application into small pieces is overwhelming, however when we are talking about Micro Services its about large teams in different parts of the project working to the same purpose! In this model, communication is essential.
Hey great summarization.
Maybe it would be worth mentioning which kind of scale micro frontends are aiming to aid for.
Just like any other micro services MFE are not a tool to solve engineering problems but rather they are engineering solutions to organizational problems of scaling.
This is crucial to understand for anyone attempting to implement their web using micro services ( again, of any kind)
I have been a part of organizations which required MFE but would fail to see the benefits, worse than such I was also part of organizations which employs MFE for the sake of scaling its product offerings, which again is totally not what MFE are aiming to solve.
MFE brings a lot of challenges, I mean a LOT. They absolutely must be justified by organizational challenges of scaling in order for organization and users to actually benefit from it.
We should never forget MFE aim to streamline product development faster (in case where they are needed) if you as an engineer or product owner feel like you are being slowed down by the challenges MFE brings, it's a sign your organization made a mistake and you really didn't needed MFE to begin with.
Be brave and abandon the ship.
Right tool for the right job. I hope you don't mind me, I feel responsibility to share view after seing so many sometimes irreversible problems wrongly adopted MFE can bring.
Good point! The way that microservices keep the other parts of the system working if a piece is compromised is a good way to escape problems like isolation and failures.
Our organization uses MFE, and it has helped us meet our needs. Although there are numerous ways to implement MFE, we chose to use Webpack Module Federation since it is incredibly easy to set up, requires no additional libraries, and performs flawlessly. The challenges in MFE include working together as a team to maintain the same set of libraries, sharing React.js state with other MFEs in the same application, having multiple libraries in the same application (e.g., React & Angular), and many more. With Webpack Mod Fed, we are unable to package CSS/SASS and ensure that the consuming project has all the required style sheets.
Great! you listed some changes which is great to be worked around for leaning phase. If possible can you please list some more it will help us to make local project and deal with these problems before going to prod.
Good luck in your project!
Good overview of micro frontends. I believe MFEs present some issues when it comes to collaboration and UX consistency between apps. I feel like it allows teams to live in silos because they only need to focus on a small portion of the application. You mentioned clear communication channels and I like that approach, but that requires a ton of good documentation to ensure everything stays consistent. I lean towards a mono repo structure being a more effective approach to building frontends. It fixes some of the issues with dependencies and consistency. Have you ever used a mono repo?
If you are working on a project alone, implementing microservices could be overwhelming.
Great overview!
Thank you Pachi!
Great summary! I'm looking forward for the next ones! Luca's book is great
Thank you!
Yes, everyday I learn something new while reading this book!
Good Short Overview of Micro-Frontend
Thank you Rusandu Galhena!