Table of contents
§12.6.

Microfrontends

A microfrontend architecture is an extension of the idea of microservices (or service-oriented architecure). In a microfrontend architecture, not only is the back-end separated into small components but also the front-end as well.

Problem

In large applications, a single (or ‘monolithic’) presentation layer creates problems that are almost identical to the problems that motivated the development of service-oriented architecture:

  1. It is difficult to change small parts of the application when it is deployed as a complete unit.

  2. Developers need to work more closely together if there is only a single code-base. One code-base may become impractical if there are hundreds or thousands of developers.

  3. A severe bug may impact the availability of the entire tier, rather than just a specific feature.

  4. Developers may need to standardize on one framework instead of choosing the best tools to solve each problem.

  5. The development of prototypes or experimental features may be slowed down by a need to comply with the quality standards expected in the ‘main functionality’.

  6. The domain logic may be so large and complex that it takes too long for developers to compile, run or test on their computer.

There is only one problem experienced in the back-end that is no longer relevant to the presentation layer:

  1. Administrators cannot deploy separate features to specialized hardware (e.g., deploying CPU-intensive processing to servers with powerful CPUs versus deploying RAM or disk-intensive operations to servers with better disk bandwidth)

Instead, client-facing deployment presents a new challenge:

  1. It can be challenging to break presentation layer functionality into smaller bundles so that the user’s browser can download functionality incrementally.

Solution

The idea of microfrontends is to separate the presentation layer into small-self contained applications. For example, one application may handle login and authentication, while another application handles shopping list functionality.

The layered architecture of a microfrontend is very similar to that of service-oriented architecture. The presentation and business process layers are separated:

Presentation layer
(User authentication)

Presentation layer
(Shopping list management)

Business process layer
(User authentication)

Business process layer
(Shopping list management)

Service layer
(User authentication)

Service layer
(Shopping list)

Service layer
(User notification services)

Persistence layer
(User database)

Persistence layer
(Shopping list database)

Persistence layer
(User notification database)

Implementation

In a microfrontend architecture, teams develop microfrontends independently. They may use Angular, React or any front-end framework. The integration of these microfrontends happens in the user’s browser using a range of different web technologies:

  • Direct hyperlinking between microfrontends: Each microfrontend has a separate URL serving HTML and JavaScript

  • A top-level HTML page that internally embeds microfrontends using HTML <iframe>

  • A top-level JavaScript library that switches between other JavaScript frameworks (e.g., single-spa.js)

  • Using the Web Components API to declare each microfrontend as a component (both React and Angular support web component declarations).

For examples of implementing microframeworks, see Cam Jackson’s discussion and sample code.