應用Micro Frontend與Monorepo於GeekyNote

以作者查詢圖書館館藏

、以作者查詢臺灣博碩士

、以作者查詢全國書目

、勘誤回報

、線上人數：133

、訪客IP：3.17.175.239

姓名

羅皓煒(Hao-Wei Lo) 查詢紙本館藏

畢業系所

資訊工程學系

論文名稱

應用Micro Frontend與Monorepo於GeekyNote

相關論文

★ 使用PolyTraceAid進行程式文件覆蓋率計算與分群	★ Support Visual Debugging in Electronic Design Automation Software by xDIVA
★ 設計與實作視覺化追蹤點以支援xDIVA進行程式動畫	★ Combine Internal Test Oracles and Capture/Replay GUI Testing for Precise Replay and Higher Validation Power
★ Dissimilarity of Polymorphic Execution Sequences	★ The Analysis of Capturing System Test Cases into Unit Test Cases
★ 動態延遲載入的測試覆蓋率	★ 建構於JMeter之自動化分散式壓力測試架構
★ 模組化因修改具耦合的程式碼所伴隨的成本漣漪	★ Design a Pluggable Architecture for Layout Algorithms in xDIVA
★ 重複性程式碼檢測之外掛模組設計	★ Visual Perception of Realistic Rendering in xDiva 3D Environment
★ Why and When GUI Test Automation Fails in Practice and Our Solutions to The Problem	★ Why and When GUI Test Automation Fails in Practice and Our Solutions to The Problem
★ Very High Precision Optical Character Recognition For Clean-Fixed-Sized True Type Characters	★ Enhance Korat by Branch Capability in Capture/Replay User Scenario to Industrial Test Case Automation

檔案

[Endnote RIS 格式]

[Bibtex 格式]

[相關文章]

[文章引用]

[完整記錄]

[館藏目錄]

[檢視]

[下載]

本電子論文使用權限為同意立即開放。
已達開放權限電子全文僅授權使用者為學術研究之目的，進行個人非營利性質之檢索、閱讀、列印。
請遵守中華民國著作權法之相關規定，切勿任意重製、散佈、改作、轉貼、播送，以免觸法。

摘要(中)

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.

關鍵字(中)

★ GeekyNote
★ Micro Frontend
★ Monorepo

關鍵字(英)

論文目次

摘要 i
Abstract ii
圖目錄 vi
表目錄 vii
壹、緒論 1
貳、文獻探討 5
2-1 Micro frontends概述 5
2-2 Monorepo概述 9
參、 GeekyNote概述 12
3-1 功能與特點 12
3-2 移植至網頁版 13
3-3 目前存在的挑戰 14
3-3-1 程式碼不易理解 15
3-3-2 相關功能的程式碼擺放位置卻相距甚遠 15
3-3-3 共同開發不易 15
3-3-4 更新套件的困難 16
3-3-5 不易靈活地移除功能 16
3-3-6 問題整理 16
肆、應用Micro Frontend於GeekyNote 18
4-1 設計與分析 18
4-2 實作框架選擇 19
4-3 實作與整合 21
4-3-1 初始化設定 21
4-3-2 主應用配置路由給子應用 22
4-3-3 在頁面中嵌入子系統 22
4-3-4 維持設計的一致性 23
4-3-5 主系統與子系統的溝通 23
4-3-6 靜態資源的正確載入 25
4-3-7 小結 25
伍、應用Monorepo於GeekyNote 26
5-1 動機與分析 26
5-1-1 管理共同程式碼 26
5-1-2 共用組態檔 27
5-1-3 節省CI/CD時間 27
5-1-4 整合測試 28
5-1-5 小結 28
5-2 套件選擇 28
5-3 實作與管理 29
5-3-1 建立目錄 30
5-3-2 建立workspace之間的關聯 30
5-3-3 共享組態檔 31
5-3-4 設定快取機制 31
5-3-5 小結 31
陸、評估與討論 33
6-1 對使用者的影響 33
6-2 對開發者的影響 34
柒、結論與未來展望 37
捌、參照 38

參考文獻

[1] Cheng, Yung-Pin, et al., "GeekyNote: a technical documentation tool with coverage, backtracking, traces, and couplings.," in IEEE, 2020.
[2] "React," [Online]. Available: https://react.dev/.
[3] M. Geers, "Micro Frontends," [Online]. Available: https://micro-frontends.org/.
[4] M. Federation. [Online]. Available: https://webpack.js.org/concepts/module-federation/.
[5] "monorepo.tools," [Online]. Available: https://monorepo.tools/.
[6] "Bazel/Remote Execution Overview," [Online]. Available: https://bazel.build/remote/rbe.
[7] 史家瑩, Extracting Maintenance Couplings from Repository Commits for System Knowledge Transfer, 2022.
[8] "The problem with passing props," [Online]. Available: https://react.dev/learn/passing-data-deeply-with-context#the-problem-with-passing-props.
[9] "Redux," [Online]. Available: https://redux.js.org/.
[10] “Why Not Iframe,” [線上]. Available: https://www.yuque.com/kuitos/gky7yw/gesexv.
[11] "single-spa," [Online]. Available: https://single-spa.js.org/.
[12] “qiankun,” [線上]. Available: https://qiankun.umijs.org/guide.
[13] “MicroApp,” [線上]. Available: https://zeroing.jd.com/.
[14] "Nx," [Online]. Available: https://nx.dev/.
[15] "Turborepo," [Online]. Available: https://turbo.build/repo.
[16] Victor Savkin, Kenneth Chau, James Henry, Isaac Mann, Chau Tran, "Benchmarking Nx, Turbo, and Lage," [Online]. Available: https://github.com/vsavkin/large-monorepo.
[17] “Workspaces,” [線上]. Available: https://turbo.build/repo/docs/handbook/workspaces.

指導教授

鄭永斌

審核日期

2023-8-3

推文