Micro Frontends Benefits

New software architecture trends to watch include micro frontends! And today’s article is about them. We’ll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code.

Frontend applications are becoming more challenging daily. Scalability still tends to be a problem with the front-end community. Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. The main problem when it comes to micro frontends is that this technology is just starting to get traction and people aren’t really familiar with it – which gives rise to lots of misconceptions. So, let’s analyze micro frontends to understand it better!

Main idea behind Micro Frontends

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.

Luca Mezzalira defines microfrontends as “the technical representation of a business subdomain.” They provide strong boundaries with clear contracts, and avoid sharing logic or code with other subdomains.

Micro frontends is about:

Be Technology Agnostic. Each team should be able to choose and upgrade their stack without having to coordinate with other teams.

Isolate Team Code. Build independent apps that are self contained.

Establish Team Prefixes. Agree on naming conventions where isolation is not possible yet.

Build a Resilient Site. Use Universal Rendering and Progressive Enhancement to improve perceived performance.

In Micro Frontends, a web application is broken up by its pages and features, with each feature being owned end-to-end by a single team. The goal remains to allow each feature to be developed, tested and deployed independently from others.

In Micro Frontends, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features. Micro Frontends allow teams to scale the delivery of independently deployed and maintained services.

Companies like Spotify, Klarna, Zalando, Upwork, and Allegro, and HelloFresh are using the micro frontends approach to build their web apps.

Why? Here are the main Micro Frontends benefits

Smaller, more cohesive and maintainable codebases
Scalable organisations with decoupled, autonomous teams
Ability to upgrade, update, or even rewrite parts of the frontend in a more incremental way

The source code for each individual micro frontend will by definition be much smaller than the source code of a single monolithic frontend. These smaller codebases tend to be simpler and easier for developers to work with. In particular, avoid the complexity arising from unintentional and inappropriate coupling between components that do not know about each other. And just as with microservices, independent deployability of micro frontends is key. This reduces the scope of any given deployment, which in turn reduces the associated risk. Regardless of how or where your frontend code is hosted, each micro frontend should have its own continuous delivery pipeline, which builds, tests and deploys it all the way to production.

When to use micro frontends

Huge code base where different teams are contributing to
Code ownership gets messy
Deployment is delayed because of other part of the application

Micro Frontends example

Imagine a delivery website. There should be a page where users can browse and search for restaurants, supermarkets, shops, etc. All of them should be searchable and filterable by any number of attributes including price, location, what a customer has ordered previously, etc.

Each restaurant, shop or supermarket needs its own page that shows its menu items, and allows users to choose what they want, with discounts, special offers, etc. Users should have a profile page where they can see their order history, track delivery, and customise their payment options. As we can see, there is enough complexity in each page so that means that a dedicated team can be assigned for each one, and each of those teams should be able to work on their page independently. They should be able to develop, test, deploy, and maintain their code without worrying about conflicts or coordination with other teams. And users should see a single, seamless website.

Micro frontends serve as the natural evolution of microservices and are aimed at decreasing the size and prominence of monoliths for greater flexibility in updates. By using micro frontends, enterprises are better able to develop process-driven applications with user-centered business workflows more quickly and effectively. That’s because micro frontends can break up large-scale workflow systems into smaller components that make it easier to create, update, and implement changing business processes. This can result in improved consumer experience as well as more effective business process management. This means that organizations can more quickly and safely update and upgrade UX. This allows for more iterative updates, decreasing the cost and complexity of experimentation.

Actually, InfoQ added micro-frontends as architecture paradigm embraced by innovators for their Architecture and Design report 2020.

Luca Mezzalira – author of Building Micro Frontends expects in the next year or two the following:

“Micro frontends are not a new trend but they gained traction in 2019. There are still a lot of best practices to discover and the community is very vibrant. In the past 8-10 months we produced new frameworks, techniques and documentation for making micro frontends more approachable for all developers. I don’t think micro frontends will be the silver bullet for frontend development, however I truly believe it’s a wonderful addition to Single-Page Applications and Server-Side Rendering architectures. Micro frontends shine when we have projects with tens of developers working together in a large business domain and we want to reduce the complexity by dividing into multiple subdomains, independently deploy different parts of the applications without creating communication and coordination overhead across teams. Several organizations started to embrace them and in 2020 I expect to see many more case studies explaining how these companies adopt the paradigm and which PROs and CONs they have encountered. I believe in 2020, micro frontends will become an established architecture and understood by the frontend community, I don’t expect micro frontends will ever be used for all the frontend projects but there are many companies who can really benefit from this architecture paradigm.”

If you are interested in knowing more about Micro Frontends, I recommend you to check these books, reports, podcasts, slides and videos here:

Micro Frontends Benefits

Main idea behind Micro Frontends

Why? Here are the main Micro Frontends benefits

When to use micro frontends

Micro Frontends example

Book

Report

Videos

Podcasts

Slides

Executable Documentation Benefits

Architecture Styles: sign up for the Choosing The Right Architecture Workshop!

Leave your thought here Cancel reply

Explore

Information