# 成為前端建築師吧！透過 Frontend Infra 為前端應用打造穩健且高效率的開發體驗 - 莫力全(Kyle Mo)

{%hackmd Cw2XpA-PTgWNLFD4R6-Unw %}

###### ▼▼▼ 開始筆記 ▼▼▼

書本: [「今晚，我想來點 Web 前端效能優化大補帖！」](https://reurl.cc/rgjg5O)
[參考：iT鐵人賽系列文章](https://ithelp.ithome.com.tw/users/20113277/ironman/3877)
文章：[成為前端建築師吧！透過 Frontend Infra 為前端應用打造穩健且高效率的開發體驗](https://oldmo860617.medium.com/%E6%88%90%E7%82%BA%E5%89%8D%E7%AB%AF%E5%BB%BA%E7%AF%89%E5%B8%AB%E5%90%A7-%E9%80%8F%E9%81%8E-frontend-infra-%E7%82%BA%E5%89%8D%E7%AB%AF%E6%87%89%E7%94%A8%E6%89%93%E9%80%A0%E7%A9%A9%E5%81%A5%E4%B8%94%E9%AB%98%E6%95%88%E7%8E%87%E7%9A%84%E9%96%8B%E7%99%BC%E9%AB%94%E9%A9%97-21566b5c95d3)
簡報檔案：https://slides.com/oldmo860617/minimal

### 什麼是 Frontend Infra?
> 一般人聽到前端是覺得離不開畫面的
> 沒有被明確定義的詞
> 對大型組織來說是很重要的
- 管理多個前端專案
- 產品受眾多元 toB、toC 或內部

* 通常被用來描述用來提升 **「開發效率」** 與 **「產品品質」** 而導入的一套系統、流程或工具，並且常常包括一些關於如何使用這些工具和系統的最佳實踐或標準

### 管理多個前端專案
> 大型組織可能需要管理多個前端專案有 toB, toC

- DRY(Dont't Repeat Yourself)
- generator(template)
- sharing code
- 複雜且需要共用的會獨立到一個 package (建立一個npm)
- 大型專案可能用monorepo管理
- design system
- unified CI/CD infra
跑過 lint 或 lightHouse
- monitoring
跑過指標

### 團隊經驗分享
目標：
- unified tech stack
- 共用 packages
- 統一開發準則
- 提升前端應用的可觀測性

### 常用工具分享

#### Lighthouse CI

使用 Lighthouse CI 作為檢測效能的守門員

#### SonarQube
- PR 守門員
- 檢測 PR 改動有無不好的寫法
- 管理(edited file) testing Coverage

#### ESLint Config
- 寫Custom Eslint config 需要了解 AST(Abstract syntax tree)

### Project Generator For new project

使用一行指令，自動建立包含上述功能與規則的專案

### Monitoring(Grafana Dashboard)
- Logging
- Distrubuted Tracing
- Metrics
- Web Vitals
- Errors

### DAST for Comply With DevSecOps

- DevSecOps = development security operation，在每一開發週期都有機會導入資安處理
- DAST = Dynamic Application Security Test
- ZAP Scan掃描Staging環境

## How About Small Project & Small Team

Vercel Conf : [Frontend Cloud](https://vercel.com/resources/the-frontend-cloud-advantage)

### 套件管理
Renovate For Deoendency Management
- 設定掃描套件週期
- 設定要升的版號
- ^x.x.x(Minor+Patch)
- ~x.x.x(Patch)
- x.x.x(Pin)
- 用 Minor+Patch? => 兩人跑了 install 導致 React Type 版本不同因而造成了有人 build 可以過有人不行
- 用Pin? => 太久沒更新
- 推薦用 Pin + Renovate 解決這個問題

### Preview URL
互相 code review 或給 QA 檢視
- 使用 Vercel PR 自動部署一個版本
- 可以讓我有的 review 共同檢視

### CI/CD Pipeline - Docker Image Size

Side Project Next.js

3.4 GB -> 871 MB(Multi Stage Build) -> 216MB(Next Output Tracing)

各個 Framework 都有降低 Docker Image Size 的方法

### CI/CD Pipeline - GitHub Action Cache & Artifacts
- 如果 package.json & package-lock.json 都沒有動，基本上就可以把 node_module cache 起來，不用重新 install
- Branch 之間的Cache是不共通的（even相同key)
- Cache 爆炸 =>已經刪除的東西還留著
- Github action delete cache on branch deletion
- Restrictions depends on plan

### CI/CD Pipeline - Bundle Size Diffing
- Merge 前可以先做檢視，先看 Merge 會造成的 bundle 影響

成本大不大？其實不會，因為 CI/CD 本來就會跑 build

### CI/CD Pipeline - Dev Process Optimization
- 幫PR上Label其實蠻有用的=>方便Filter

因為大家都有好好規範 Title，那不如自動化上 Label

### Observability
跟 SSR 的普及可能有點關係
一般聽到前端的 Observability 可能會想到：Logging

Kyle: 很建議畫一個專屬於前端專案的流程圖

### What else can we do?

- 只要可以提升效率與品質的事情，都可以嘗試
- 但架構設計不可脫離實際業務需求

### Conclusion

- 前端發者的分類與角色多樣性
- 不論團隊規模皆可導入 Frontend Infra，但它是一個團隊文化相關的議題
- Frontend Infra 與 DevOps 的關聯
- 理解需求，不需過度導入 [Dont' over engineering]
有思考有先做應證，達到目標的可能性會更大

### Reference
- ByteDance Web Infra Team
- Vercel Cloud
- ??

[會後分享文章](https://oldmo860617.medium.com/%E6%88%90%E7%82%BA%E5%89%8D%E7%AB%AF%E5%BB%BA%E7%AF%89%E5%B8%AB%E5%90%A7-%E9%80%8F%E9%81%8E-frontend-infra-%E7%82%BA%E5%89%8D%E7%AB%AF%E6%87%89%E7%94%A8%E6%89%93%E9%80%A0%E7%A9%A9%E5%81%A5%E4%B8%94%E9%AB%98%E6%95%88%E7%8E%87%E7%9A%84%E9%96%8B%E7%99%BC%E9%AB%94%E9%A9%97-21566b5c95d3)