Modern Architecture: Embrace the Future of Web

If you are a software engineer, a solution architect, a technical manager or even a project manager - you may be interested in hearing more on the topic of building web apps using Micro frontend.

Frontend development is rapidly evolving – we need to consider data visualization and user interaction as an essential part of web apps. With the upcoming 5G era, the web will play an even bigger role in the world of font end development. That’s where the benefits of Micro frontend come in, over a more traditional architecture such as a Frontend Monolith.

I had the fortunate opportunity to implement a Micro frontend when working with a Fintech startup – and now, I am really hooked. Micro frontend worked very well across many agile development teams in that company.

In this blog, I’d like to share what I’ve learned about Micro frontend development patterns and the benefits it can bring to our clients.

What is a Frontend Monolith?

Before we can talk about Micro frontend, we need to discuss the “Frontend Monolith”.  A monolithic architecture means that the service/app itself is a single, logically independent hosting instance. Most traditional or legacy web apps are monolithic applications. It’s believed that over time, when a monolithic application becomes larger, more and more challenges will emerge - such as higher complexity, difficulty or expensive to maintain, or reduced robustness.

What is a Micro Frontend Development Pattern?

In contrast to a Frontend Monolith pattern, Micro frontend architecture gives us techniques, strategies and recipes for building a modern web app with multiple teams that can deliver business features independently of each-other. Micro frontend resembles a microservice architecture, extending the idea of microservice to frontend development. It can increase the effectiveness and efficiency of teams working on the UI elements of an application.

The diagram below shows an example of a web app developed using Micro frontend.  As you can see, 3 separate applications are composed into one single application within production. Before being deployed to production, each application is owned and maintained by separate autonomous development teams. Each team has a distinct area of business or mission it is responsible and specializes within. Teams can be cross functional and develop features end-to-end while also independent and self-governed within all phases of the software development lifecycle (SDLC) including: development, testing, building, deployment.

(source: Martin Fowler)

Why Micro frontend?

Working with our customer we built dozens of web applications using Micro frontend development patterns and we realized a number of benefits compared to the more traditional Frontend monolith pattern:  

• Constant Complexity: Most of the time, projects with a smaller scope means more independent apps with less coupling. Moreover, adding new features by extending new Micro frontend services would have limited impact on existing features.

• Migrate legacy systems: With Micro frontend, it’s possible to migrate legacy systems in a more flexible manner. Traditional monolithic systems rely on a fixed underlying architecture and technology, which means it is not possible to migrate them without rewriting a large portion of the system and posing systematic risks. By contrast, a modern system using Micro frontend is easier to migrate incrementally and progressively because of the flexible architecture.

• More agile: Micro frontend architecture, like the microservice architecture for backend business services, is a better fit in our modern agile app development world. It works very well with DevOps, containerization such as Docker and Agile development methodologies.

• Scalability and Flexibility: Because of the parallel horizontal architecture (sometimes called plug-in architecture), it is very easy to scale either the application or the development team up and down as needed.

• Technology Agnostic / Tech Stack Independent: Micro frontend development patterns can be independent and autonomous and not limited to the existing application technology. It is possible to adopt new technology stacks and software platforms when adding new features. The team can freely decide which technology they want to use which allows applications to stay more modern and reduced technical debt for organizations. It is also possible to have diverse teams with a different technology expertise be able to build the portions of the application within the technology that is best suited for the purpose.

• More robust: Because different modules and features can be maintained and hosted independently, we can apply continuous integration by adding new features in a completely incremental way. All the Micro frontend modules are run in a separate and isolated host domain. The beauty of this is, if there are unknown broken states or an outage in one module, it will only impact that module rather than the entire application.

When to Use a Micro frontend Development Pattern?

I’ve found Micro frontend to be particularly beneficial in these situations:

• When legacy systems need to be migrated. Long-term application projects that will be continuously updated, iterated, and maintained for many years benefit from a Micro frontend pattern. A more flexible and scalable architecture may be needed to support migrating the system in catching up with modern technology.

• When you have a frequent need to build and deploy. Just like Microservice in the backend, Micro frontend was created to facilitate Agile development. Micro frontend is designed to minimize scope and risk throughout all phases of the SLDC.

• When the organization aligns well with idea of autonomous teams. Because of the nature of the Micro frontend architecture, a big product/project is composed of many different and independent small pieces that are maintained by independent teams.

• If you have modern agile development teams. Micro frontend architecture has evolved through the modern agile development era. If you are practicing agile project delivery, implement DevOps and maybe cloud platform services, Micro Frontend development may be a good fit for your Web app development.

What are Micro frontend best practices?

Here are 9 tips that go a long way in building application in a Micro frontend pattern:

1. Build scaffold tools to automate micro application initialization

2. Sandbox & Shadow DOM & Web Component & CSS Modules

3. Define your Crosscutting Layer & Master page & Application Entry Points

4. Establish Team Prefixes or Plugin/Micro-App Prefixes

5. Develop page composition using router base paths and server side includes

6. Facilitate cross-app communication through standard API’s

7. Build run-time integrations via Web Components or JavaScript

8. Use CI & CD & DevOps to automate the build/deploy process

9. Having Subject Matter Experts and Solution Architects work together to define the boundaries of domain/teams

While it takes time to establish a new technical architecture and adapt to a new mindset like Micro frontend development, I am confident that it will bring immense benefits to your organization.