owned this note   changed 2 years ago  
Linked with GitHub

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

歡迎來到 Modern Web 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@ModernWeb/2020
手機版請點選上方 按鈕展開議程列表。

簡報下載

共筆從這開始

想像中的軟體技術架構階層

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

大型專案的架構問題

及解決方法和思維

  • 如何定義「大型」軟體專案
    • 其實很難定義「大型」但可能包含
      • 功能數量龐大(數百甚至數千個頁面)
      • 預算費用龐大(幾千萬到幾億台幣)
      • 牽扯到的人數眾多(數十到數千人)
      • 跨組織開發(數家公司共同作業)
      • 跨團隊開發(數個技術團隊共同作業)
      • 其他…
    • 每個人心裡的「大型」可能都有所不同
  • 大型專案「架構」的問題
    • 數以百計甚至千計的功能頁面及模組
    • 組件跟組件或頁面跟頁面間錯綜復雜的相依關係
    • 應用程式全部建置需花費極長的時間
      • CICD流程
    • 人工部署常常不小心手殘上錯版本
  • 大型專案「人」的問題
    • 團隊間使用技術不一致
    • 固定卻冗長的開發規則
    • 程式碼風格不一致
  • 大型專案處理複雜問題的常見方法
    • 使用Monorepo 架構
      • 所有程式碼都 同一個code base 下
      • 程式透明度增加

        改壞可以回溯找到源頭

      • 程式共享、增加可重用性

        人利也可以重複使用

      • 一致性的版本相依
    • 開發規範與流程的一致化
      • 導入程式碼產生器
        • 將共用步驟、邏輯自動化
      • 使用 Linter
        • 規範程式的相依規則
        • 規範程式碼撰寫風格
  • * Code Formatter
    * 確保程式碼風格的一致性

    • 相依性管理

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

    • 使用微前端（Micro Frontends）架構

      • 將常用的共用功能抽成標準的 Web Components

        可以不使用任何框架

      • 透過 Web Components 組合頁面功能
      • 可以不限定任何框架，也就是任何框架下都可以使用
      • 主流瀏覽器都支援(IE 11 有限度的支援)

        複雜的頁面IE 11執行速度慢

使用Nrwl Nx 管理大型專案

工具特色介紹

  • Nrwl Nx 簡介
    • Monorepo 框架
    • 提供一系列工具，來協助我們進行管理專案間的複雜關係
    • 前端支援：Angular / React / Web Components
    • 後端支援：Express / Nestjs
    • Vue 支援 (感謝 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
    • 用來協助 快速執行各種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 放在雲端加速團隊開發
    • 執行指令時可透過參數--skip-cache 忽略cache

Demo

Show me the code!
github

  • Dependency Graph
  • Tags Dependency
  • Format with Prettier
  • Nx Affected
  • Schematics
  • Computation Caching

Resources

tags: MW20 敏捷與管理 PLM
Select a repo