What are Micro Frontends?
Why and How of Micro Frontends?
Framework and Technology Agnostic for Ongoing Cadence
Micro Frontends should be framework agnostic so teams can benefit from ongoing innovation without having to lock the complete development of their digital products to a single framework such as React, Angular, or Vue. This provides greater flexibility for development teams to get the job done. For example, two different Micro Frontends can have different versions of the same framework in a single app or they can be completely developed in different frameworks based on a team's preferences and framework evolution.
Established Governance, Scope and Naming Conventions
Micro Frontends should have a degree of governance, and conventions that make it easy for designers and developers to swap between different teams. Even though the technology may change, a conceptual architecture should exist. Micro Frontends are developed in the same way as a normal single page application (SPA), the only difference is the development scope. While a normal SPA contains definitions for an entire Web Application, a Micro Frontend is focused on a single experience, trying to solve one single problem. The composition of Micro Frontends into a high-level layer is what makes all these micro experiences come together to shape the final digital product.
Decoupled Code Bases to Eliminate Dependencies
Micro Frontends should be easy to maintain and understand over time with the right amount of code decoupled and capable of refactors in short periods of time.
Business Domains and Subdomains to Build Maintainable Software Assets
Micro Frontends should have a scope defined by business domains and subdomains that can feed the company's core software asset base. This asset base can be used to deploy business value faster with prebuilt Micro Frontends that can be iterated upon.
Independent Deployments for Sustained Development Cadence
Micro Frontends should have their own pipelines and teams working independently so as to put features into production with a more predictable cadence, having accountability to the business, without having to redeploy the whole Web Application each time, reducing risks and increasing the rate of change.
Measurable to Understand the Contribution of Each Micro Frontend
Micro Frontends should have business events that are easy to measure to help improve the business value derived from features in production faster. For example, when building Micro Frontends for a bank, we should have well defined business events that allow us to gauge the performance of the Micro Frontend from different points of view. Both business and technical. By swapping from one Micro Frontend to another did we increase the desired customer behaviour.
Modyo powers Micro Frontends
Modyo allows developers to work on Micro Frontends using the platform’s concept of Widgets, which are the building blocks of digital products deployed using the Modyo Platform. Developers can start from one of the templates in our Widget Catalog, modify the code and then push the Micro Frontend to Modyo using the Modyo Command Line Interface (CLI). For scenarios with few developers and accelerated speed, Modyo comes with a Widget Builder that allows developers to build, publish, and maintain Widgets right from the browser, in the Modyo web console.
Modyo also provides an API endpoint to collect and analyze business events generated from Widgets and Microservices. Use this data to then create and update user segments, called Targets, that allow the creation of customized digital experiences. Modyo participates in the user login process through our SSO integration so that the platform can understand the "who did what" of business events.
Modyo's Micro Frontend Framework
Resources to Learn about Micro Frontends
- Thoughtworks and Martin Fowler provides a good explanation with examples.
- Michael Geers writes about Micro Frontends in action.
- Thoughtworks Technology Radar in May 2020 says "ADOPT".
- Luca Mezzalira provides more perspective on Micro Frontends and key considerations.
- Bob Meyers provides a good explanation with examples.
- Modyo Widget Catalog provides our partners and clients a head start with Micro Frontends.
Let's talk about how we can help you accelerate your digital transformation with Micro Frontends.I'm interested
starts with you
And when you sign up, you'll have access to a short video series that explains the benefits of managing your public and private channels with Modyo.