| 摘要: | GeekyNote是本實驗室開發的一款嶄新的知識軟體工具，使用者可以透過GeekyNote的標籤系統讓程式碼與技術文件之間做雙向綁定。目前，GeekyNote正在進行由桌面應用程式到網頁應用程式的移植過程，移植後的GeekyNote在前端是基於React開發的單頁式網頁應用程式。
然而，網頁版的GeekyNote在前端部分的維護上遇到了「程式碼不易理解」、「相關功能的程式碼擺放位置卻相距甚遠」、「共同開發不易」、「更新套件的困難」、「不易靈活地移除功能」等問題，這些問題多半是由於系統過於龐大且耦合所導致的，因此，我們決定導入micro frontend架構改善上述的問題。
Micro frontend是一種將microservices理念的應用於網頁前端的架構，旨在將一個大型的網頁應用程式拆分和解耦。在本研究中，我們透過micro-app這個框架將GeekyNote分為主系統和子系統，降低了系統的耦合度，使開發人員能夠獨立開發和維護各個子系統。我們讓每一個子系統只負責一種標籤類別及其相關的功能。在實作的過程中，我們確保了系統間設計的一致性、同步系統間的主題色和使用者狀態還有靜態資源載入等問題。最終，對使用者而言，GeekyNote在下載的時候變得需要多花一點時間，因為要同時下載主系統和子系統的程式碼，但是對開發者而言，GeekyNote也變得更加地易維護並且在技術堆疊（tech stack）的選擇上更加自由。
另外，由於GeekyNote被分為主系統和子系統後就不再是單一一個專案了，所以，我們還採用了monorepo來管理這些專案。Monorepo代表單一倉儲儲存多個專案，並且在這之中管理專案之間的依賴關係。透過monorepo，我們將共用程式碼和一些套件的組態檔（config file）打包成獨立的內部套件，方便管理和重複利用。此外，我們利用monorepo套件的功能，讓我們在執行打包、測試等工作時可以做快取（cache），節省時間，提高開發者的體驗。
;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. |
