Micro frontends – a microservice approach to front-end web development

For web apps, the front end is becoming bigger and bigger, and the back end is getting less important. Our web app atWeld(web/app creation tool)is 90% front-end code, with a very thin back end. I can imagine that a majority of new web apps being built today are dealing with a similar situation.

Web apps also change over time, as do development techniques and frameworks. This requires support for allowing different front-end frameworks to co-exist, e.g. older modules built in JQuery or AngularJS 1.x, combined with newer modules built in React or Vue.

The monolithic approach doesn’t work for larger web apps

Having a monolithic approach to a large front-end app becomes unwieldly. There needs to be a way of breaking it up into smaller modules that can act independently.

Example:

  • myapp.com/
    • landing page built with static HTML.
  • myapp.com/settings
    • old settings module built in AngularJS 1.x.
  • myapp.com/dashboard
    • new dashboard module built in React.

I would imagine the following is needed:

  1. A
    shared codebase
    in pure JavaScript e.g. managing routing and user sessions. Also some shared CSS. Both should be as thin as possible.
  2. A
    collection of separate modules
    , “mini-apps”, built in various frameworks. Stored in different code repositories.
  3. A deployment system that
    bundles all the modules together
    from different repositories and deploys to a server, whenever a module is updated.

The solution: “micro frontends”

But as it turns out, a lot of other people is thinking about the same ideas. The common term is“micro frontends”.

Companies likeSpotify,Klarna,Zalando,Upwork, andAllegroare using the micro frontends approach to build their web apps.

Implementing micro frontends

Here’s a few different approaches to implementing micro frontends:

  1. Isolating micro-apps into
    IFramesusing libraries and Window.postMessage APIs
    to coordinate. IFrames share APIs exposed by their parent window.
  2. Multiple single-page apps that live at different URLs
    . The apps use NPM/Bower components for shared functionality.
  3. Using
    Varnish Cacheto integrate different modules
    .
  4. Web Componentsas the integration layer
    .
  5. “Blackbox”Reactcomponents
    .

Resources

Source: https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16