Frontend Infra
為前端應用打造穩健且高效率的開發體驗
Kyle Mo @WebConf Taiwan 2023
Kyle Mo
Software Engineer (Web FE, JS Infra)
📓《今晚來點 Web 前端效能優化大補帖》
Agenda
什麼是 Frontend Infra ?
大型組織下的 Frontend Infra Team 如何運作？
在小型前端專案負責打造 Frontend Infra 的經驗談
想法總結
What is Frontend Infra ?
Frontend Infra 這個詞通常被用來描述為了提升「開發效率」和「產品質量」而導入的一套系統、流程或工具，並且常常包括一些關於如何使用這些工具和系統的最佳實踐或標準。
管理多個前端專案
DRY (Don't Repeat Yourself)
Generator (Template)
Sharing Code
Design System
Unified CI/CD Infra
Monitoring
Web Frontend Infra 團隊經驗分享
Key Focus Topics In Infra Team
Testing
Performance
Security
Accessibility
Observability
Lighthouse CI
Lighthouse CI
SonarQube
ESLint Config
// 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
Monitoring (Grafana Dashboard)
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
How About
Small Projects
Small Teams
&
🧐
?
Frontend Infra 這個詞通常被用來描述為了提升「開發效率」和「產品質量」而導入的一套系統、流程或工具，並且常常包括一些關於如何使用這些工具和系統的最佳實踐或標準。
Renovate For Dependency Management
Renovate For Dependency Management
^x.x.x (Minor + Patch)
~x.x.x (Patch)
x.x.x (Pin)
Preview URL
CI/CD Pipeline -
Docker Image Size
3.4GB
871MB
216MB
😰
🧐
🥺
(Multi Stage Build)
(Next Output Tracing)
CI/CD Pipeline -
GitHub Actions Cache & Artifacts
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
GitHub Actions Cache & Artifacts
CI/CD Pipeline -
GitHub Actions Cache & Artifacts
CI/CD Pipeline -
Bundle Size Diffing
CI/CD Pipeline -
Dev Process Optimization
Observability
Logging
Distributed Tracing
Metrics
Web Vitals
Errors
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
THANK YOU
Frontend Infra @WebConf
By oldmo860617
