Micro Frontends Patterns#8: Unified SPA

Unified SPA is similar to Linked Application, but it navigates multiple SPAs.

In the case of a simple hyperlink transition, it will be the same as a Linked Application. The transition between SPAs will be server-side rendering, so there will be a round trip.

There is another pattern for Unified SPA. It is the pattern of creating an App Shell layer that binds the SPAs together.

In this case, since the client-side rendering between SPAs is done in the App Shell layer, the performance overhead, which is one of the disadvantages of Linked Application, is reduced.

This can be achieved by using a library such as single-spa called meta-framework. An example code for the configuration part is shown below, which combines separately deployed applications.

import { registerApplication, start } from 'single-spa';

registerApplication(
  'app2',
  () => import('@my-company/app2/main.js'),
  (location) => location.pathname.startsWith('/app2'),
  { some: 'value' }
);

registerApplication({
  name: 'app1',
  app: () => import('@my-company/app1/main.js'),
  activeWhen: '/app1',
  customProps: {
    some: 'value',
  }
});

start();

If you are interested in other libraries, please refer to Reading List which will be the last section of this series.

Pros and Cons

Because it is an SPA, the interactivity of the Frontend will be improved compared to Linked Application, and the fact that you can achieve Micro Frontends by simply merging SPAs together is also a good thing. It is also possible to create common parts using the Parcels mechanism of single-spa.

One of the disadvantages of Linked Application is that it tends to be a single point of failure in the application layer; if there is a bug in the App Shell layer, it will spread to the entire application, and the impact of version upgrades will be large.

Summary

We looked at the Unified SPA pattern, which is an extension of the Linked Application pattern, and while introducing an App Shell layer has its disadvantages. As a simple Micro Frontends, this is the first one you can consider adopting.