Frontend Infra
為前端應用打造穩健且高效率的開發體驗
Kyle Mo @六角學院
Kyle Mo
Web Fullstack Engineer @Netskope
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10132662/7D5C642B-8215-4C56-A85A-29DFBD119A9C.png)
📓《今晚來點 Web 前端效能優化大補帖》
Agenda
什麼是 Frontend Infra ?
大型組織下的 Frontend Infra Team 如何運作?
在小型前端專案負責打造 Frontend Infra 的經驗談
想法總結
The Chance of F2E & Beyond Frontend
The Chance Of F2E & Beyond Frontend ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2489512/images/10881810/pasted-from-clipboard.png)
主要做 Features 的前端開發者的困境
困境
解法一:理解商業邏輯 & Domain Knowhow
前端為什麼要理解商業邏輯跟領域知識?
你了解你產品的領域知識嗎?
如何更理解 Domain?
- 領域知識的閱讀
- 了解背景和規劃
- 多與不同角色交流
- 了解「數字」
- 從一般需求入門
- 需要「時間」
⭐️解法二:培養技術深度與視野
如何培養?
- 技術知識與能力
- 技術視野
- 技術深度 & 廣度
- 技術與業務結合
前端架構師 FE Architect
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2489512/images/10891333/%E6%88%AA%E5%9C%96_2023-11-04_%E4%B8%8A%E5%8D%8810.50.23.png)
什麼是 Frontend Architecture?
- Architecture style
- Architecture characteristics
- Architecture decisions
- Design principles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2489512/images/10891335/pasted-from-clipboard.png)
Best Solution 會因為團隊狀況而變
前端架構師的職責
- 設立技術方向
- 做架構決定
- Mentorship & Sponsorship
前端架構師的技能要求
- Communication
- 技術廣度 & 深度
- 使用者同理心
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2489512/images/10891336/pasted-from-clipboard.png)
What is Frontend Infra ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10588338/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10591223/pasted-from-clipboard.png)
Frontend Infra 這個詞通常被用來描述為了提升「開發效率」和「產品質量」而導入的一套系統、流程或工具,並且常常包括一些關於如何使用這些工具和系統的最佳實踐或標準。
管理多個前端專案
DRY (Don't Repeat Yourself)
Generator (Template)
Sharing Code
Design System
Unified CI/CD Infra
Monitoring
Web Frontend Infra 團隊經驗分享
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10586751/%E6%88%AA%E5%9C%96_2023-06-29_%E4%B8%8B%E5%8D%887.46.39.png)
Key Focus Topics In Infra Team
Testing
Performance
Security
Accessibility
Observability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10586818/pasted-from-clipboard.png)
Lighthouse CI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10614403/pasted-from-clipboard.png)
Lighthouse CI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10586923/%E6%88%AA%E5%9C%96_2023-06-29_%E4%B8%8B%E5%8D%888.27.07.png)
SonarQube
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10586966/%E6%88%AA%E5%9C%96_2023-06-29_%E4%B8%8B%E5%8D%888.41.31.png)
ESLint Config
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10586988/%E6%88%AA%E5%9C%96_2023-06-29_%E4%B8%8B%E5%8D%888.52.14.png)
// no-empty-catch.js
module.exports = {
meta: {
messages: {
emptyCatch: 'Empty catch block is not allowed.',
},
},
create(context) {
return {
CatchClause(node) {
if (node.body.body.length === 0) {
context.report({ node: node.body, messageId: 'emptyCatch' });
}
}
}
}
};
Project Generator For New Projects
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10587001/%E6%88%AA%E5%9C%96_2023-06-29_%E4%B8%8B%E5%8D%888.56.46.png)
Monitoring (Grafana Dashboard)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10591213/%E6%88%AA%E5%9C%96_2023-07-01_%E4%B8%8B%E5%8D%884.00.43.png)
DAST For Comply With DevSecOps
Lint
Build
Test
Lint
Deploy
DAST
ESLint
npm install & build
npm test
Deploy App
Dependencies check
Image Scan
SonarQube
Config Scan
ZAP Scan
Stages
Jobs
Development
Security
Operation
DAST For Comply With DevSecOps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10587031/pasted-from-clipboard.png)
How About
Small Projects
Small Teams
&
🧐
?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10591228/pasted-from-clipboard.png)
Frontend Infra 這個詞通常被用來描述為了提升「開發效率」和「產品質量」而導入的一套系統、流程或工具,並且常常包括一些關於如何使用這些工具和系統的最佳實踐或標準。
Renovate For Dependency Management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10593431/%E6%88%AA%E5%9C%96_2023-07-03_%E4%B8%8B%E5%8D%888.36.39.png)
Preview URL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10593534/%E6%88%AA%E5%9C%96_2023-07-03_%E4%B8%8B%E5%8D%889.04.45.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10593569/%E6%88%AA%E5%9C%96_2023-07-03_%E4%B8%8B%E5%8D%889.13.36.png)
CI/CD Pipeline -
Docker Image Size
3.4GB
871MB
216MB
😰
🧐
🥺
(Multi Stage Build)
(Next Output Tracing)
CI/CD Pipeline -
GitHub Actions Cache & Artifacts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10598963/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%888.33.32.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10599017/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%888.52.48.png)
CI/CD Pipeline -
Cache Item Lifetime : 7 days without a hit
Cache Size Limit per Repository : 10 GB
Cache
Artifact Item Lifetime : 90 days no matter hit or not
Artifact Item Size Limit : 2 GB per free repo
Artifacts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10599087/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%889.15.31.png)
GitHub Actions Cache & Artifacts
CI/CD Pipeline -
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10599118/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%889.20.09.png)
GitHub Actions Cache & Artifacts
CI/CD Pipeline -
Bundle Size Diffing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10598154/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%883.21.07.png)
CI/CD Pipeline -
Dev Process Optimization
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10598174/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%883.31.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10598178/%E6%88%AA%E5%9C%96_2023-07-05_%E4%B8%8B%E5%8D%883.33.30.png)
Observability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10605928/pasted-from-clipboard.png)
Logging
Distributed Tracing
Metrics
Web Vitals
Errors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/10608626/%E6%88%AA%E5%9C%96_2023-07-10_%E4%B8%8B%E5%8D%889.07.16.png)
Any methods or tools you can think of that could assist in improving the development process, user experience, and efficiency, and are suitable for your specific FE projects and needs.
What Else Can We Do ?
🧐
Kubernetes
Micro Frontend
Bundler
Serverless
WebAssembly
Design System
🤯
如果架構設計脫離了實際業務需求,那就是在瞎忙。調整軟體架構必須深入理解需求,參與需求討論,並透徹理解需求背後的業務本質。
Conclusion
🤖
前端開發者的分類與角色多樣性
不論團隊規模皆可導入 Frontend Infra,但它是一個跟團隊文化相關的議題
Frontend Infra 跟 DevOps 的關聯
理解需求,不需要過度導入 (Don't Over Engineering)
Reference
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1103863/images/11228483/qr.jpg)
THANK YOU
Frontend Infra @WebConf
By oldmo860617
Frontend Infra @WebConf
- 1,701