Micro Frontend is a design pattern to split large and complex web applications or modules into light-weight web apps that can be deployed independently. Micro frontends are “An architectural style where independently deliverable frontend applications are composed into a greater whole.”1 These loosely-coupled web apps are integrated into a single container or user interface to create a seamless experience. This concept is very similar to Micro Service pattern or Domain-driven Design pattern.
Why Micro Frontend?
Plenty of and single page applications or isomorphic web apps were developed and deployed over the years. The size and complexity of these web/apps grew and posed similar challenges to that of a monolithic applicatiions. Now, these applications face multiple challenges and issues like performance degradation with each release, non-scalablity, and difficulty in making modifications and ensuring maintainance. Micro frontend architecture is the answer to all these issues.
Different ways to implement Micro Frontend
While there are many ways to implement micro frontend, the below are most popular and widely implemented strategies:
- iFrame wherein we embed other web applications into the parent application
- Monorepo wherein many projecs share the same repository
- Single-SPA wherein we use multiple JavaScript libraries for the application
Single-SPA?
Single-SPA is a JavaScript framework that enables the design and development of micro frontend architecture developed using various JavaScript libraries like Angularjs, Angular, React, Vue, Svelte etc.
Micro Frontend Reference Architecture
- Independently deployable and small web applications can be developed using different JavaScript frameworks or libraries like React, Angular, Vue, Svelte etc. These apps are called child apps.
- The main or parent web application works as a container (UI Shell) where all child apps mount and unmount based on user action.
- Each child app has the same or different End Points/API Gateways and use REST API to send and receive data.
- Enterprise applications are the most suitable and common examples of Micro frontend. Every department or business unit can have their own applications based on the business requirement. These applications can be builton different tech stack and have unique URLs, and are micro frontends that are independently developed and deployed at the enterprise level. In this scenario, enterprise user don’t have a single entry point to access all enterprise applications. The user needs to visit respective web sites/apps to perform the task. The implementation of iFrame or Single-SPA could provide a single entry point to all enterprise users where all enterprise applications can gain acess from this container.
Single-SPA – UI Shell Life Cycle
- UI Shell: Multiple micro frontends are integrated into a container/shell by injecting the respective scripts. The container application determines which micro frontend to be mounted and calls the appropriate function to tell the micro frontend when and where to load. The container has its own lifecycle methods to load the applications.
- Single SPA Framework: Light-weight JavaScript encapsulation framework, which loads the relevant micro apps based on the path that is requested. It has its own lifecycle methods for bootstrapping, mounting and unmounting of the micro apps.
- Child Application: Independent feature or module-based web app. Each child app has its own code base, which means that each child app can have its own common Lib, intra app state management module and inter apps communication module. Child apps can be developed by a single or multiple teams. Each app can have an independent CI/CD pipeline and DevOps processes.
- Declare/Register Child Application: Each child app needs to register to the UI shell
- Active Application/Route: It represents the current active app/route
- Load Child App: Loads child app based on configured routes
- Bootstrap: Life cycle function called right before the registered app is mounted for the first time
- Mount: This lifecycle function will be called whenever the registered application is not mounted. 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: This lifecycle function is called whenever the registered
Download Whitepaper to read more
