Create better digital products with Micro Frontends

Micro Frontends are a fundamental building block for building and improving customer experiences.

Two people using building blocks to build a structure

What are Micro Frontends?

Micro Frontends are a fundamental building block mapping Frontend customer experiences packaging HTML, CSS, and Javascript within a defined scope of a frontend experience and mapping to one or more APIs. The purpose is to eliminate dependencies between teams that slows development and increases the complexity of managing digital products using a single page architecture. In other words, Micro Frontends are the extension of the microservice concept to the frontend world.

The whys and hows of micro frontends

Framework and Technology

Business Domains

Established Governance

Independent Deployments

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.

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

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.

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

Modyo powers Micro Frontends

Modyo allows developers to work on Micro Frontends using the platform’s concept of Widgets, which are building blocks of digital products built 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 - Modyo web console.

Modyo also provides an API endpoint to collect and analyze business events generated from Widgets and Microservices to 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 it can understand the "who did what" of business events.

Modyo's Micro Frontend Framework

Create a Micro Frontend

Our Widget Builder enables you to quickly create Micro Frontends directly from your browser. Versions of your code are saved as you work so you can always reset or rollback to previous Micro Frontends.

CLI for Micro Frontends

Work offline and use your own development pipelines to then push Micro Frontends directly into our platform. Get the best of both worlds depending on the size of your teams and digital factory configuration.

Micro Frontend Code Review

When building Micro Frontends in the Modyo Widget Builder, every change is recorded so you can easily rollback or reset any changes as you work. See the changes made by your team when building from the browser.

Team Review

Easily configure the people required to review and publish your Micro Frontends live to your digital channels. Select the people and rules you'd like to apply to your digital teams in minutes.

Resources to Learn about

Micro Frontends

Interested?

Let's talk about how we can help you accelerate your digital transformation with Micro Frontends.

I'm interested Digital Experience Platform