A Framework for Implementing Micro Frontend Architecture

Abstract

Web applications are an indispensable part of any enterprise information system. In the recent past, we have seen maturity in technologies that enable the separation of frontend and backend, with the backend adopting microservices architecture style. The front end has maintained the traditional monolithic architecture. Micro frontends have come up as a solution to the conventional monolithic frontend, which has received much attention. Still, so far, there is no straightforward approach to implementation that satisfies different practical requirements of a modern web application. This paper proposes an architectural pattern for implementing micro frontends to address challenges experienced in earlier implementations, such as inconsistent user experience, managing security, and complexity. We developed two simple web applications, one using the proposed architectural pattern, and another using the monolithic architecture and compared the performance. We used Google lighthouse to measure the performance of two applications. The landing page for the application developed using micro frontend architecture showed a higher performance score of 99 against 86 for a similar page in an application developed using the monolithic architecture. The proposed framework showed outstanding performance in handling the issues of consistent layout with a Cumulative Layout shift of 0. Breaking down the frontend with lazy loading of micro frontends improved the web application's performance, while the proposed framework reduced development complexity. However, more research is needed to provide seamless integration of micro frontends into the main application with the support of loading shared libraries in the main application; this will significantly reduce the payload size.