dc.description.abstract | GeekyNote is a novel knowledge software tool developed by our laboratory, where users can establish a two-way binding between code and technical documents through GeekyNote′s labeling system. Currently, GeekyNote is undergoing the process of transitioning from a desktop application to a web application, with the frontend being developed as a single-page web application based on React.
However, the web version of GeekyNote has encountered challenges in frontend maintenance, including difficulties in understanding the code, the scattered placement of related functionalities, limitations in collaborative development, challenges in updating packages, and inflexibility in removing functionalities. These issues mainly arise from the complexity and hight coupling of the system. To address these challenges, we have decided to adopt the micro frontend architecture to improve the aforementioned issues.
Micro frontend is an architecture that applies the microservice concept to the frontend development of web applications, aiming to split and decouple a large-scale web application. In this study, we utilize the micro-app framework to divide GeekyNote into a main system and multiple subsystems, reducing the coupling between components and enabling developers to independently develop and maintain each subsystem. Each subsystem is responsible for a specific label category and its related functionalities. During implementation, we ensure consistency in system design, synchronization of theme colors and user states across subsystems, as well as maintainence of static resource loading. As a result, for users, the download time of GeekyNote increases slightly due to the need to download both the main system and subsystem codes. However, for developers, GeekyNote becomes more maintainable and offers greater flexibility in selecting the tech stack.
Furthermore, since GeekyNote is no longer a single project but consists of a main system and subsystems, we have also adopted monorepo to manage these projects. Monorepo means a single repository that stores multiple projects and manages the dependencies between them. Through monorepo, we package shared code and configuration files of certain packages as internal packages, facilitating code management and reuse. Additionally, leveraging the capabilities of monorepo tools, we can utilize caching during tasks such as bundling and testing, thereby saving time and enhancing the developer experience.
In summary, this study introduces the micro frontend architecture to improve GeekyNote′s frontend maintenance. By adopting micro frontend and monorepo, we address issues related to code comprehension, code placement, collaborative development, package updates, and functionality removal. These improvements enhance the maintainability of GeekyNote and offer developers more flexibility in choosing the tech stack. | en_US |