Single page applications (SPAs) and Micro Frontends

Table of Contents

Single page applications (SPAs) and Micro Frontends

https://developer.mozilla.org/en-US/docs/Glossary/SPA

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

What does this mean? It means that when you enter some data on the forms in the UI screen and press a button, the entire page does not get refreshed.

  1. React
  2. Angular
  3. Vue.JS

Benefits

  1. Don’t need to download more files as we move in the application - or as the user navigates in the website.
  2. If there are multiple html pages in the application, every single time the user navigates to a different page in the website, that html file needs to be downloaded.
  3. With React, everything is downloaded beforehand. When the user is navigating pages, there is nothing more to download.
  4. The whole application exists in javascript files in src folder.

Micro frontends

Divide a monolithic app into multiple, smaller apps.

Each smaller app is responsible for a distinct feature of the product.

Integrations

The container decides when/where to show each Microfrontend. So the container needs access to the source code (and the items) of all the micro frontends (e.g. Products list, Cart, etc.)

Different ways of implementing integration

  1. There are many different solutions, each have pros and cons
  2. No single perfect solution to integration
  3. Pick a solution based on your requirements

Categories of integration

  1. Build-time (compile-time) integration
    1. Before Container gets loaded in the browser, it gets access to ProductsList source code
    2. e.g. using packages as dependencies in another application
  2. Run-time (client-side) integration
    1. After Container gets loaded in the browser, it gets access to ProductsList source code
    2. e.g. instead of publishing code as an npm package, they deploy it to a server that can be accessed via a https url
    3. Advantages:
      1. Independent applications can be deployed independently
      2. Different live versions can be deployed simultaneously
    4. Disadvantages:
      1. Tooling and setup is more complicated
  3. Server integration
    1. While sending down JS to load up Container, a server decides on whether or not to include ProductsList source

Reading material

  1. https://en.wikipedia.org/wiki/Micro_frontend
  2. https://micro-frontends.org/
  3. https://martinfowler.com/articles/micro-frontends.html
  4. https://www.turing.com/blog/micro-frontends-what-are-they-when-to-use-them

Benefits

  1. Different components can be thought of as different applications
    1. Multiple engineering teams can work in isolation
    2. Each smaller app is easier to understand and make changes to
    3. Different teams can work on different components
    4. Different components can be built using different frameworks like React and Angular

Links to this note