[Day 1] 什麼是前端系統設計?

16th鐵人賽 system design #frontend

54 瀏覽

什麼是系統設計？

我們在工作和生活上，有大大小小不同的情境和需求，當問題單純時，我們可以靠直覺性的反應來解決。

但當問題開始變得複雜時，不再只能靠直覺反應解決問題，我們需要做一個完整的規劃，去針對不同的情境和需求，及現有條件，設計出所謂的「系統」，來解決我們遇到的難題

那所謂的「系統設計」更詳細的來說又是什麼呢？

系統設計是一個定義系統架構、元件、模組、介面、資料的過程，來滿足指定的需求 - Geeks for Geeks

所以，針對一個系統，我們可以知道關鍵有以下幾個項目：

在不同的條件和情境下，把上述因素定義好，就是所謂軟體的系統設計

(模組不太確定指的是什麼，就沒有列在這裡了)

主要有兩個原因：

而且比起你是否能把 JS 手寫題或 LeetCode 刷出來，System design 更是一個面試官能評估你實際工作上能力的方法

甚至在 GreatFrontEnd 有寫到，System design 的成果會影響到你在面試中的成果，直接影響你會被提供的 offer job leve，表現不好的話甚至有可能導致被 rejection

通常軟體的系統設計指的是後端的分散式系統 (Distributed system) 設計，內容比較偏 Infrastructure, DB 的設計，像是這本書 System design，內容會包括到

前端的話，比較注重 Client 實際體驗到的部分，還有 Client 與 Server 之間的溝通，細節的差別如下：

面向	Back End	Front End
收集需求	✅	✅
Architecture/High-level design	分散式雲端服務	應用程式/元件
系統粗估	✅	🟡 (非必要)
系統的元件	雲服務 (e.g. Load balancer, Application server, Database, File storage, Caches, Message queues, CDN)	應用程式模組 (Model, View, Controller)
資料模型	SQL Schema	應用程式 state
Components 之間的 API 類型	各種網路協定	HTTP, WebSocket 協定, JavaScript 函式
著重項目	可擴展性, 穩定性, 可用性	效能, 使用者體驗, 可訪問性, 國際化
非關注點 (可以當作黑項)	客戶端	伺服器端

舉例來說，一個經典的例子是：

請設計 Twitter feed UI

在前後端分別會被問到的是

Backend：
- 容量估計
- 設計 DB
- 如何保證服務在 traffic 下可以 scale？
- 如何產生 user 的 Twitter feed？
Frontend
- 如何實作跟一則 tweet 的互動
- 如何實現 feed 的 pagination
- user 如何創造新的 tweets