CodeFarmer 技術週報 #3 - 初探系統設計 (上)
今天搜集了一些學習系統設計的資源，並以 top-down 的方式先盤點了各式主題，並先從垂直擴展、水平擴展、負載平衡、反向代理伺服器、CDN 的筆記開始。
嗨嗨大家，歡迎閱讀第 3 期的 CodeFarmer 技術週報，最近依然持續在利用 Grind 75 複習一些資料結構，但想想這篇還是來認真面對一下年初說要補強後端、DevOps、系統設計相關的內容。
在搜尋了許多資源後發現這每一個領域裡面都有更深更廣的主題，像是後端有 RESTful API、ACID、Idempotent、Cache、Nginx、登入、權限、SQL join、資料庫正規化等，DevOps 裡的容器、監控、部署等，後端系統設計裡的 CAP、負載平衡器、Message Queue、Rate Limiter、資料庫種類選擇等，更別說屬於更底層軟體基本功的資結與演算法又是另一片樹林。
盤點完後雖然有點想去開雞排店了，但還是回頭思考該從何開始才能比較有系統性地學習，所以決定先跟隨經典的 ByteByteGo、system-design-primer 這些系統設計資源開始做筆記與學習，採用 top-down 的方式先能掌握設計一個複雜系統需要知道的全貌後，再根據想加強的知識去做單點突破。
那麼今天就先從 NeetCode 的《20 System Design Concepts Explained in 10 Minutes》這個影片的筆記做為開始吧。
系統設計主題盤點
綜觀整個系統設計相關的主題，大概可以分成以下幾個大項目：
可擴展性
垂直擴展
水平擴展
負載平衡器
反向代理
CDN
Caching
Networking
TCP / IP
DNS
HTTP
Communication and API Paradigms (範式)
SOAP
REST
GraphQL
gRPC
WebSockets
Webhook
Storage
RDBMS
ACID 特性
資料庫的分片 (Sharding) 與複寫 (replication)
NoSQL
BASE 特性
Key-Value Store (Redis、Memcached、DynamoDB)
Document Store (MongoDB、CouchDB)
Graph Store (Neo4J、GraphDB)
Wide Column Store (Cassandra、HBase)
Block Storage vs Object Storage
CAP 理論
Asynchronism (非同步)
Message queues
Task queues
可擴展性 (Scalability)
從上面可以看到系統設計涵蓋的內容多且廣，今天就先從可擴展性 (Scalability) 開始學起。
當今天有個 server 用來接收使用者們的請求並回應，隨著使用者變多，如果要讓 server 可以負載請求，最簡單的方式就是在同一台機器內去升級 RAM、CPU，這就稱為垂直擴展 (Vertical Scaling)。
但在同台機器去升級硬體設備到最後 CP 值並不高，且這個架構有個很明顯的問題是可能會因為這台機器掛掉直接掛站，這就是所謂單點故障 (Single Point of Failure) 的問題。
因此大多時候會選擇以比較低成本的多台機器一起分擔流量與增加容錯性，這個方式就稱為水平擴展 (Horizontal Scaling)。
但進行水平擴展時，會面對到的問題是要怎麼確保不會有人超載、有人閒置，這時就會需要這時就會需要負載平衡器 (Load Balancer) 的幫忙，可以透過一些負載平衡演算法如 Round Robin 或 IP Hashing 等方式來平均分配流量。
影片中為了敘述方便好像把 Load Balancer、Reverse Proxy、CDN 參在一起講，覺得有點混淆。
後來參考這篇文章，可以理解到這些元件分別被用在不同的狀況，只是因為有些服務同時結合了多項功能所以好像看起來是同件事，稍微做一下目前理解的筆記：
CDN (Content Delivery Network)：比較靠近使用者，主要是拿來做靜態資源的快取，讓使用者在存取網頁資源、圖片、影片時能更快取得。
Reverse Proxy Server：反向代理伺服器，擋在所有 client request 的最前方，像是所有 server 的代理人，好處是可以增加安全性、增加可擴展性、處理快取等。
Load Balancer：主要被用在多台 server 要怎麼分流的工作。
而 Nginx 做為反向代理伺服器，同時也可以協助做分流；另外看起來 Cloudflare 的服務也直接幫忙把這些元件一條龍整合在一起所以不需要自架。
今天先筆記到這，下一期將繼續來研究其他相關主題。
本期推薦內容
雖然本週報比較不是追最新消息的定位，但如果當期有看到一些不錯的內容也試著統整在最後面，也算是解決以前在 IG 限動、Threads 上分享時資訊零散的問題：
在社群上看到有人分享 react-bits 這個絢麗的動畫元件庫，尤其是其中的 splash cursor 實際玩過後真心覺得有夠帥。雖然我已經好幾年沒玩網頁互動，但看到還是很佩服，所以也好奇看了下其中的原始碼是怎麼實作的，另外也去看了作者 David Haz 的個人網站果然也是滿滿的互動元素。
這週剛好有朋友問到 Vue 有沒有像 React 生態中的 Magic UI 這樣的動畫元件庫，查了官方 issue 後看到有人提到這套 Inspira UI，有相關需求的朋友可以參考看看，而對應的 Svelte 生態系也有人實作。另外也附上之前看到有點相關的 Vue UI Lib Picker 的相關資訊。
這幾週在搜集後端學習資源時，找到了 KK 在 2020 的鐵人賽系列 — 《成為看起來很像很強的後端》，因為是中文影片教學資源，覺得相當適合非技術背景、想初學後端的前端開發者觀看學習。
最近持續在刷 Grind 75 的題目與做筆記，這週在 Kyo 的這篇《與 AI 共舞——我的 LeetCode 刷題之道》裡面除了分享他的觀點外，也看到有分享個很完整的開源中文電子書 — 《Hello 算法》，對準備資料結構與演算法有興趣的讀者也可以參考看看。
以上就是本期的 CodeFarmer 技術週報的所有內容了，若內容有什麼錯誤、問題、更好的解釋方法也都歡迎透過以下管道與我討論：
Email：codefarmer.tw@gmail.com
或我後來才發現原來直接回覆這封電子信我也能收到信
喜歡本期的內容也歡迎分享給有興趣、正在努力學習路上的朋友一起來免費訂閱週報一同交流討論，那我們就下週三見了！