介紹大型複雜架構的 Angular 專案管理方式，與相關技巧

1. 大型 Angular 專案的
管理心得與技巧
多奇數位創意有限公司 資深工程師
黃升煌 Mike
Blog: https://wellwind.idv.tw/blog/
全端開發人員天梯: https://www.facebook.com/fullstackledder

2. About Me
Name
黃升煌 Mike
Title
多奇數位創意有限公司 全端工程師
Award
• 2018 iT 邦幫忙鐵人賽 Modern Web 組冠軍
• 2019 iT 邦幫忙鐵人賽 優選

3. 關於「架構」這件事

5. 大型 Angular 專案面對的問題

6. 大型 Angular 專案面對架構問題
• 大量的功能頁面
• 複雜的相依關係
• 過長的應用程式建置時間
• 小範圍修改卻要全部重新部署

7. 大型 Angular 專案面對人的問題
• 團隊間使用技術不一致
• 固定卻冗長的開發規則
• 程式碼風格不一致

8. 解決複雜 Angular 專案的
方法論

9. 使用 Monorepo 架構
• 所有程式碼都在同一個 code base 下
• 程式透明度增加
• 程式可重複使用性增加
• 一致性的版本相依

10. 使用微前端 (micro frontends) 架構
• 透過 Web Components 組合頁面功能
• 每個(組) Web Components 就是一個
獨立的 JavaScript 檔案
• 使用 Angular Elements 將元件轉成
Web Components
• 使用 ngx-build-plus 將共用部分抽出

11. 開發規範與流程的一致化
• 使用 Schematics 程式碼產生器
• 將共用步驟、邏輯自動化
• 自訂 schmatics
• 使用 linter
• 規範程式的相依規則
• 規範程式碼風格
• 自訂 tslint rule
• code formatter
• 確保程式碼風格的一致性
• prettier.io

12. 相依性管理
• 畫下專案與專案之間的相依關係
• 程式進行開發/修正/改版時，依照相依關係評估建置/部署策略

13. 使用 Nrwl Nx 管理大型專案

14. Nx Introduction
• Monorepo 框架
• 提供一系列工具，來協助我們進行管理
• 前端支援：Angular / React / Web Components
• 後端支援：Express / Nestjs

15. 建立 Nx workspace (Angular 範本)
• 建立 Nx 工作區
• npx create-nx-workspace@latest ngtw19-nx-demo

16. 建立 Nx workspace (Angular 範本)
• 建立 Nx 工作區
• npx create-nx-workspace@latest ngtw19-nx-demo
• 加入 Angular 支援
• ng add @nrwl/angular --defaults
• 建立 Angular 應用程式
• ng g @nrwl/angular:application todos
• 建立 Angular 類別庫
• ng g @nrwl/angular:library todos

17. Angular Console

18. Workspace lint
• 替每個建立的專案依照類型加入 tag
• 在 tslint 中設定各類型專案的相依關係
• 使用 nx workspace-lint 檢查相依關係

19. 自動程式碼排版
• Nx 使用 prettier 進行程式碼自動排版
• 自訂規則都在 prettierrc.json
• 檢查是否有 format 問題：nx format:check
• 強制 format：nx format:write

20. 建立 schematics
• 建立一個 schematic
• ng g @nrwl/workspace my-schematic
• 執行一個 schematic
• nx workspace-schematic my-schematic
• 省去自行 build 的步驟

21. 瀏覽相依關係
• nx dep-graph
• 預設會分析程式碼判斷專案間的相依關係
• 可在 nx.json 內明確設定專案間是否相依
"dashboard": {
"tags": ["scope:dashboard"],
"implicitDependencies": ["todo-ui"]
}

22. 使用 affected 功能
• 針對變更的程式碼，分析被影響的 applications & libraries
• 只針對被影響的程式建置
• 只針對被影響的程式進行測試
• 視覺化影響範圍

23. 使用 affected 功能
• nx affected:[target] --base [commit] --head [commit]
• nx affected:apps
• nx affected:libs
• nx affected:build
• nx affected:e2e
• nx affected:test
• nx affected:lint
• nx affected:dep-graph

24. Nx affected 常用參數
• --parallel：平行處理執行工作
• --maxParallel：同時平行處理多少個工作
• --all：不評估被影響的範圍，針對所有專案執行指定工作
• --exclude：指定不執行工作的專案
• --only-failed：只執行上次失敗的專案工作

25. Nx 8.7 新指令
• nx print-affected --target=[target]
• 將要執行動作的專案輸出成 JSON 格式
• nx list
• 列出所有可用的 schematics

26. Demo
https://github.com/wellwind/ngtw19-nx-demo

27. Resources

28. 相關資源
• Nx.Dev (Official Document)
• Nrwl Connect (course + eBook + video)
• Enterprise Angular (eBook)

29. Thank You!
Blog: https://wellwind.idv.tw/blog/
全端開發人員天梯: https://www.facebook.com/fullstackledder