使用 Nx 管理超大型前後端專案／ Mike（黃升煌）

# 使用 Nx 管理超大型前後端專案／ Mike（黃升煌） {%hackmd @ModernWeb/HkqZxb98v %} ### [簡報下載](https://www.slideshare.net/ssuser35b57e/modern-web-2020-nx) > 共筆從這開始 ### 想像中的軟體技術架構階層 ![](https://i.imgur.com/0royZcL.png) ### 大型專案的架構問題 > 及解決方法和思維 * 如何定義「大型」軟體專案 * 其實很難定義「大型」但可能包含 * 功能數量龐大(數百甚至數千個頁面) * 預算費用龐大(幾千萬到幾億台幣) * 牽扯到的人數眾多(數十到數千人) * 跨組織開發(數家公司共同作業) * 跨團隊開發(數個技術團隊共同作業) * 其他… * 每個人心裡的「大型」可能都有所不同 * 大型專案「架構」的問題 * 數以百計甚至千計的功能頁面及模組 * 組件跟組件或頁面跟頁面間錯綜復雜的相依關係 * 應用程式全部建置需花費極長的時間 * CICD流程 * 人工部署常常不小心手殘上錯版本 * 大型專案「人」的問題 * 團隊間使用技術不一致 * 固定卻冗長的開發規則 * 程式碼風格不一致 * 大型專案處理複雜問題的常見方法 * 使用Monorepo 架構 * 所有程式碼都同一個code base 下 * 程式透明度增加 > 改壞可以回溯找到源頭 * 程式共享、增加可重用性 > 人利也可以重複使用 * 一致性的版本相依 ![](https://i.imgur.com/AyqxINy.png) * 開發規範與流程的一致化 * 導入程式碼產生器 * 將共用步驟、邏輯自動化 * 使用 Linter • 規範程式的相依規則 * 規範程式碼撰寫風格 - [ ] * Code Formatter * 確保程式碼風格的一致性 * 相依性管理 * 畫下專案與專案之間的相依關係 * 程式進行開發/修正/改版時，依照相依關係評估建置/部署策略 ![](https://i.imgur.com/yszGS3W.png) * 使用微前端（Micro Frontends）架構 * 將常用的共用功能抽成標準的 Web Components > 可以不使用任何框架 * 透過 Web Components 組合頁面功能 * 可以不限定任何框架，也就是任何框架下都可以使用 * 主流瀏覽器都支援(IE 11 有限度的支援) > 複雜的頁面IE 11執行速度慢 ### 使用Nrwl Nx 管理大型專案 > 工具特色介紹 * Nrwl Nx 簡介 * Monorepo 框架 * 提供一系列工具，來協助我們進行管理專案間的複雜關係 * 前端支援：Angular / React / Web Components * 後端支援：Express / Nestjs * [Vue 支援](https://github.com/ZachJW34/nx-plus/tree/master/libs/vue#readme) (感謝 Kuro) * 開始使用Nx (以Angular 範本為例) * 建立Nx 工作區 ``` npx create-nx-workspace@latest modern-web-nx-sample``` * 建立Angular 應用程式 ```ng g @nrwl/angular:application todos``` * 建立Angular 類別庫 ```ng g @nrwl/angular:library todos``` * [Nx Console](https://nx.dev/angular/cli/console) * 用來協助快速執行各種Nx 相關指令 * 檢視專案間的相依性 * 檢視專案間的相依關係，以確保沒有錯誤的相依 ```nx dep-graph``` * 避免錯誤的專案相依 * nx.json 內可以設定每個專案的tag * tslint.json 內可以設定tag 之間相依關係約束 * 若專案的tags 相依關係設定有誤，執行nx lint 時就會報錯 * 自動程式碼排版 * Nx 使用prettier 進行程式碼自動排版 * 自訂規則都在prettierrc.json * 檢查是否有format 問題：```nx format:check``` * 強制format：```nx format:write``` * 使用affected 功能 * 針對變更的程式碼，分析需要重新建置的專案 * 只針對被影響的程式進行建置與測試等行為 * 可以視覺化影響範圍 * 使用affected 功能(指令參考) ```nx affected:[target] --base [commit] --head [commit]``` ```nx affected:apps``` ```nx affected:libs``` ```nx affected:build``` ```nx affected:e2e``` ```nx affected:tes``` ```nx affected:lint``` ```nx affected:dep-graph``` * affected 常用參數 ```--parallel```：平行處理執行工作 ```--maxParallel```：同時平行處理多少個工作 ```--all```：不評估被影響的範圍，針對所有專案執行指定工作 ```--exclude```：指定不執行工作的專案 ```--only-failed```：只執行次失敗的專案工作 > 可用在單元測試 * Schematics 程式碼產生器 * 將常用的程式碼骨架透過程式碼產生器直接產生，節省不必要的複製貼上及人為錯誤 * 建立Schematic ``` npm run nx generate @nrwl/workspace:workspace-schematic my-schematic``` * 執行Schematic ``` npm run nx workspace-schematic [schematic-name] [options``` * 運算快取(Computation Caching) * 同樣的事情，不要做第二次 * 將異動後執行的結果cache 起來 * 未來同樣檔案內容與指令執行時直接輸出cache 的結果 * 團隊開發大幅加速建置時間的好工具 * 預設cache 結果放在 **node_modules/.cache/nx** * 可設定nx.json 的```tasksRunnerOptions.default.options.cacheDirectory ```變更路徑 * 或使用[Nx Cloud](https://nx.app/) 放在雲端加速團隊開發 * 執行指令時可透過參數```--skip-cache``` 忽略cache ### Demo > Show me the code! [github](https://github.com/wellwind/modern-web-20-nrwl-nx-demo) * Dependency Graph * Tags Dependency * Format with Prettier * Nx Affected * Schematics * Computation Caching ### Resources * [Nx.Dev](https://nx.dev/)(Official Document) * [Nrwl Connect](https://connect.nrwl.io/)(course=)(course=) * [Enterprise Angular](https://leanpub.com/enterprise-angular)(eBookeBook) ###### tags: `MW20` `敏捷與管理` `PLM`

Example	Syntax
Header	# Header
Unordered List	- Unordered List
Ordered List	1. Ordered List
Todo List	- [ ] Todo List
Blockquote	> Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th	19^th^
H₂O	H~2~O
Inserted text	++Inserted text++
Marked text	==Marked text==
Link	[link text](https:// "title")
Image	![image alt](https:// "title")
`Code`	`Code`
`var i = 0;`	```javascript var i = 0; ```
	:smile:
Externals	{%youtube youtube_id %}
L^aT_eX	$L^aT_eX$
This is a alert area.	:::info This is a alert area. :::