Skip to main content

Getting started with Micro-frontends Part 1

As web applications are becoming more and more mature every day, we find a wide range of web applications; from simple to highly complex ones. Those web applications can be simple two to three page websites or a combination of several components, which may be even developed by more than one team. Managing this kind of complexity in a monolith application is not easy.

A simple web application with one to two pages could be easily developed by an individual or a small team, so there is no need to think about complex architectures. But the problem arises when the application becomes more complex and frontend components are too large to be developed by one team. Micro-frontend architecture becomes helpful in such situations.

Microservice architecture is where several lightweight and loosely coupled services are combined to deliver a larger service or application. Similarly, the basic idea of the Micro-frontend is breaking large frontend applications into more manageable loosely coupled pieces in a manner that each piece can be independently developed by a separate team. Those pieces should be defined with a clear mission and well-formed boundary so the teams could work with their own codebases and release independent versions.


Getting started with Micro Frontends-1


This diagram shows how the individual micro-applications are combined to generate a complete application. These micro-applications are loosely coupled and can be developed using different frameworks like Angular, React, Vue etc. Main application can be a combination of several frameworks. Each Micro-frontend application can talk to each other using a common communication event bus where different micro-apps can emit events or subscribe to the events emitted by other micro-apps. Further, each micro-application can talk to the backend individually and receive and send data independently.


Best practices in Micro-frontends

  • Each team should be able to work on their own business domain without depending on other teams and further to choose or update the technology stack independently. 
  • Even two teams are using the same framework, the runtime should not be shared within teams. Individual teams should have their own codebase.
  • To avoid conflicts between applications, teams can use a prefix with common agreement when declaring CSS classes, variables, using local storage or cookies.
  • Use browser events for communication as much as possible.


Advantages of Micro-frontends

  • Complex applications become a combination of small manageable applications which can be easily developed by several teams.
  • Since the overall complexity is divided into pieces, it is easy to understand and develop the product as separate micro-applications.
  • Each application can be easily deployed independently by CI/CD pipelines and we do not need to worry about the whole application when adding a new feature to a single system. Each application can be tested independently so no need to test the whole product.
  • Each application can use an independent technology stack to serve the corresponding business requirement better. Further different versions of the same stack could be used depending on the requirement.
  • Modification to an existing component/app is possible without touching other components. Even a component can be rewritten without touching other parts. Further, if a team needs to use the latest technology for a new feature without converting the whole application, that is also possible with Micro-frontends.


Bases of dividing apps or components in Micro-frontends

  1. Divide by sections

This is one of the simplest ways of dividing a web application. A web page can be divided into separate sections and these sections can be developed as separate micro-applications. As an example let’s say a page containing a header, products section, search section, suggested product section, and a footer, those components can be developed as separate apps and combined in production to deliver the whole application.


2. Divide by Features

Another common way of dividing Micro-frontends, is by application features. As an example, a complete application can have some features like login, dashboard, profile page, reporting area, etc. These features can be separated from each other and built individually as independent Micro-frontend apps to make a complete application.


3. Divide by domain

Another popular way of dividing Micro-frontends is based on the domain. For example, applications can be divided by profile domain, branding domain, core domain, etc. Those components will be integrated to finalise the complete application.


4. Divide by pages

Where an application consists of different pages which have different functionalities, that application can be divided into micro-applications by individual pages. As an example, a home page can be developed by one team and a reporting page can be developed by another team as separate applications.


Different ways to implement Micro-frontends

Mirco-frontends can be implemented in several ways,

  1. Using Iframes
  2. Using Web components
  3. Using Libraries
  4. Using Customised orchestrators
  5. Using Micro-frontend frameworks

Framework-based Micro-frontend development is one of the most common ways of developing Micro-frontends as there are plenty of frameworks available for the moment.

Some of them are

  1. Bit
  2. Single SPA
  3. SystemJs
  4. Open Components
  5. Qiankun
  6. Luigi
  7. FrintJS
  8. PuzzleJS


In the next part of this article, we will be discussing how to set up a Micro-frontend application using a framework called Single SPA.

31 / May / 2021 Udara Bandara



© 2021 Creative Software. All Rights Reserved | Privacy | Terms of Use