great place to work

Implementing Micro Frontend Architecture using Single-Spa

Share

Micro front end

Micro frontend architecture is a concept in which a front-end application is decomposed into individual, semi-independent sub-applications or ‘micro apps’ working loosely together. This concept is similar to the microservices used in the backend. The micro-apps can be mounted inside a container or portal application and can be developed and deployed independently. Each micro frontend can be managed by a different team and may be implemented using its own framework. In simple terms, micro frontend architecture is a design approach in which a large frontend application is composed of any number of sub-applications of any framework that are deployed independently. Given below is a sample of micro frontend architecture.

Micro Front End Architecture

In the above diagram, we have a portal or container application which is a simple HTML file and 3 micro applications, i.e., Header app, Micro app1, and Micro app2 which can be developed in any framework (Angular or Vue.JS or React). We can load all three micro apps in a single portal as well as individually. Different teams can work independently on each micro apps making the development faster and efficient. We can either load the micro apps on a single page or via route. Also, it is possible to communicate with other micro apps and portals. Keep on reading to take a closer look at the implementation of micro frontend architecture using the Single-Spa (Single Page Application) framework.

Implementation Techniques of Micro Frontend Architecture

There are different approaches to implement the micro frontend architecture. A few of them are given below. 

  • iframes: One of the simplest approaches to composing applications together in the browser is the iframe. The difficulty in building integrations between different parts of the application complicates routing, history and deep-linking, and presents extra challenges to make our page fully responsive.
  • Angular Elements(Custom elements or Web components): We can package Angular components as custom elements, a web standard for defining new HTML elements in a framework-agnostic way, leveraging Angular Elements. One major disadvantage is the performance. An increase in the number of web components takes more time to get used inside the DOM.
  • NGINX: NGINX can be used as a web server or reverse proxy to serve the static content and to route the appropriate Micro App based on the context path. This kind of approach better suits the project where there is navigation or routing involved and when the app is divided into multiple apps based on the features. The communication happens through the NGRX store and local storage. A disadvantage of this approach is the fact that a page refresh happens every time we switch apps.
  • Single-Spa: This JavaScript framework for front-end microservices can be implemented with all three frameworks/libraries such as Angular, React, and Vue.js. Based on the need, it can lazy load the applications. It has features like,
    • Top-level routing
    • Use of multiple frameworks on the same page without refreshing the page
    • Lazy load code for improved initial load-time

What is Single-Spa?

Single-Spa is defined as a framework for bringing together multiple JavaScript micro frontends in a frontend application. It takes inspiration from modern framework component lifecycles by applying lifecycles to entire applications. What sets apart single-spa applications from traditional SPA(Single Page Applications) is that they must be able to coexist with other applications as they do not each have their own HTML page. The lifecycle functions are as follows.

  • Load: This refers to when the code for a registered application is fetched from the server and executed when registered applications are being lazily loaded. This happens once the registered application’s activity function returns a truthy value for the first time.
  • Bootstrap: Just before the registered application is mounted for the first time, this lifecycle function will be called once.
  • Mount: This lifecycle function will be called whenever the registered application is not mounted, but its activity function returns a truthy value. When called, this function should look at the URL to determine the active route and then create DOM elements, DOM event listeners, etc., to render content to the user.
  • Unmount: When the registered application is mounted, but its activity function returns a false value, this lifecycle function will be called. When called, this function should clean up all DOM elements, DOM event listeners, leaked memory, global, observable subscriptions, etc., that were created when the registered application was mounted.
  • Unload: The unload lifecycle is an optionally implemented lifecycle function and will be called whenever an application should be unloaded. This will not ever happen unless someone calls the unload application API.

Here is a step-by-step guide to creating, serving, and building a micro application using Single-Spa.

Routing of Micro-Apps

While registering micro apps in the portal, we can specify the required route in the function. For example, if the function returns true, it means the app will be loaded by default. If we specify a route, the micro-app will be mounted only on calling the specific route.

To load a micro app based on the route, we must do the following:

  • While registering the micro-app, it must return, location.pathname.startsWith(‘/student’);

            student micro app will be loaded only on calling /student.

  • We must provide the route inside the single-spa-router.

                     <template>

                                 <single-spa-router>

                                             <div class=”main-content”>

                                             <route path=”student”>

                                                         <application name=”student”></application>

                                             </route>

                                             </div>

                                 </single-spa-router>

                                 </template>

                     This should be given in the <head> tag. 

  • In HTML, we can call the micro app using <a href=’/student’>Student</a>.

What is a Single-Spa-Inspector?

The single-spa-inspector is a Firefox/Chrome devtools extension to provide utilities for helping with single-spa applications. Its features include:

  • List all registered applications 
  • Show all application statuses 
  • Force mount and unmount an application
  • Show app overlays: App overlays allow us to hover over a mounted app’s name and have an “inspect element” type experience which shows where the app is in the DOM. This is especially useful when multiple apps are mounted at the same time.

To explain it briefly, a single-spa application is the same as a normal SPA, except for the fact that it doesn’t have an HTML page. There are several benefits of employing single-spa applications, such as the independent deployment of micro frontends, the enabling of writing a code using a new framework, without rewriting the existing app, and so on. The fact that single-spa is an advanced architecture requires a better understanding of underlying tools and also requires changes to existing paradigms. 

If you enjoyed reading this blog post, check out our previous blogpost, where we have given a quick introduction to micro frontend architecture, its benefits, and a guide to implementing it using the Angular framework.

 

By,
Shwetha Thomas
Senior Software Engineer, RapidValue

Please Share Your Thoughts & Comments Below.

How can we help you?