The Enterprise Gains From Micro Frontend

Admin on February 14, 2018

Traditional monolithic frontend architecture approaches create unique setbacks for today’s information-driven business environments. Consider the case of a leading elevator company which relied on a specialized post-sales maintenance and support application. Support teams used the system to open tickets and log service calls. The application also provisioned the fastest route maps to speed up technicians’ site visits. With time, the company’s business grew, its market reach increased, and product-basket expanded. Many new features, such as process on-boarding for field service representatives, in-app training, and location mapping based optimisation now needed to be part of the ‘must-haves’ list. The organisation relied on a highly scalable microservices-based decoupled backend architecture. However, the frontend proved rigid and difficult to scale.

The elevator major chose a novel approach to address these bottlenecks. It implemented micro frontend architecture to make the system’s frontend flexible. With that, the company’s application—backend as well as frontend—became scalable in its entirety, enabling easy addition of incremental features.

Demystifying micro frontend concepts

Today, microservices-driven architectural flexibility must extend beyond the backend. With the passage of time, a monolithic system’s frontend grows in rigidity, resulting in feature-augmentation difficulties. The new approach, ‘micro frontend architecture’, brings the benefits of microservices to enterprise application and mobile app frontends. It facilitates message passing while calling one micro frontend from other or incorporating a call-back mechanism for every micro frontend. Multiple micro frontend apps can use shared data storage and call built-in functionalities such as GPS with ease.

Microservices architecture is known for its advantages. In this approach, a large enterprise suite is split into (or developed as) dedicated, autonomous, and loosely coupled services. Each service can be developed independent of other services, resulting in flexible and rapid application development and testing processes. Micro frontends are nothing but a replication of the same, microservices architecture for development (or makeover) of an application’s frontend.

Benefits of micro frontend architecture

First spoken about in 2016, micro frontend architecture is gaining popularity in the enterprise space due to its concrete business advantages. A monolithic frontend suffers from the same issues that a monolithic backend is beset with. Huge code-base means significant time overruns when it comes to the addition of features. Every change or version update has to factor in numerous dependencies.

Micro frontend architecture can successfully address these issues. Some of the benefits it offers are as below.

Rapid development: As different services or features are developed independently and represented as widgets, it cuts down on development time.

Speedy deployment: Since services can work autonomously, testing (and deployment) of individual services can be done independently and in parallel, thus, reducing the time required for rollout.

Quality assurance: Parallel testing translates to faster product quality improvements, as individual modules can be released as versions (and improved upon in every next version) without waiting for completion of the entire frontend.

Makes regression testing redundant: As individual components (widgets) are developed separately, they can be tested for dependencies and changes separately. This eliminates the need of resource-intensive regression testing after project-completion. This expedites the frontend’s rollout.

Ownership: Micro frontends address an important aspect of ownership. Individual widgets can be developed separately, with team-specific ownership assigned to each. These modules can be technology-agnostic and self-contained—without requiring shared resources such as a runtime library. The team that owns a particular module can thus change it without worrying about dependencies or consulting any other teams.

Business agility: New widgets being built and released as and when ready, gels smoothly with a company’s need to respond to changing business needs with agility. Micro frontend architecture simplifies the continuous integration-continuous delivery (CI-CD) process, obviating the complex, inflexible build process.

Superior maintenance: The well-defined ownership structure improves collaboration between developers and business teams. This, in turn, speeds up incident response.

Business continuity: In an event of failure in one module, other modules continue to work smoothly—without collateral damage.

A few caveats

Although micro frontends address many issues associated with monolithic frontends, there are some challenges too. A major issue is ensuring consistency of design and branding elements across the modules deployed. A bird’s eye view of the entire frontend is needed to ensure UX consistency even as teams develop different modules or widgets independently.

Navigation and menu are other areas to look out for as they cannot be similar for any two users. These two aspects of a frontend or dashboard are linked to and change as per user hierarchy level and department. They need to be separately built for every access type or (hierarchy) level. Factoring in these considerations, selection of the right vendor partner with right technology stack, skillsets, and proven experience may be recommended to ensure project success.


Originally posted at