Unified Experiences with Micro Frontends

Micro Frontends are a fundamental building block of mapping Frontend customer experiences.

Watch video Request a Demo
Micro Frontends
Micro Frontends

What are Micro Frontends?

Micro Frontends are fundamental building blocks to mapping Frontend customer experiences, packaging HTML, CSS, and Javascript within the scope of a frontend experience and integrating to one or more APIs. This speeds up development and reduces the complexity of managing digital products using a single page architecture by eliminating dependencies between teams. In other words, Micro Frontends are the extension of the microservices concept to the frontend world.

Read more in our Blog.

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.

Micro Frontend Platform

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 CLI

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 Lets Go