Rethinking the Front-end: Micro Frontend

The front end is getting bigger and bigger for most of the web apps and the back end is becoming less relevant. I would assume that the majority of new web applications that are being developed today are facing a similar situation.

This includes support to enable the coexistence of different front-end frameworks, e.g. older modules built-in JQuery or AngularJS 1.x, in conjunction with newer modules built-in React or Vue.

The monolithic method isn’t working for broader web applications.

Managing 10 projects with 10 people each is simpler than managing one big project with 100 people each.

Scalability is the main conception here. By simplifying, we ‘re getting:

Separate repositories

Independent deployments

Builds and releases faster

Autonomous teams

Easier testing and handling

To give an example:

Myapp.com/- Static HTML-built landing page.

Myapp.com/settings -old module of settings installed into AngularJS 1.x.

Myapp.com/dashboard - Built in React, new dashboard module.

I would imagine it requires the following:

A shared codebase in pure JavaScript e.g. routing management and user session management. Some have exchanged CSS. Both should be as slim as they can be.

A series of “mini-apps” independent modules designed in various frameworks, stored in different code repositories.

A deployment framework that bundles all modules from different repositories together, and deploys to a server whenever a module is modified.

But as it turns out, several other people are pondering the same thoughts. The typical term is “micro frontends”.

Source: cygnismedia

Source: cygnismedia

React is by far the most popular one as it has greatly evolved over the years and has made the life of developer easy.

Implementing micro frontends

Here are a few different methods to implementing micro frontends:

1. Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo that combines React, Vue, Angular 1, Angular 2, etc). See Bret Little’s explanation here.
2. Multiple single-page apps that existat different URLs. The apps use NPM/Bower components for shared functionality.
3. Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate. IFrames share APIs exposed by their parent window.
4. Web Components as the integration layer.
5. “Blackbox” React components.

Happy reading!

Cheers,
Ritesh :)