跳至主要内容

Frontend Architecture

資料來源

架構要解決的是什麼問題​

「在軟體工程中，常常會遇到兩種問題：技術問題（technical problems）和管理問題（personal problems）。

在思考架構（architecture）的時候，我們再談的是找到適當的規範（constraint）來解決這些問題。沒有正確地規範就會出現管理問題，隨著時間推移，複雜度和風險就會越來越高，導致越來越容易出現錯誤。同樣的，如果技術問題沒有被正確規範，當軟體的使用量增加時，用戶體驗就會越來越糟糕。因此，適當的限制有助於解決軟體工程中的問題。

這些規範和限制，最終的目的都是要幫助我們有效管理作為人本身最大的限制—有限的時間和注意力。」

前端架構的演進​

從 MVC 到 SPA（CSR）​

解決的問題​

  • 優化前端操作頁面的效能，讓使用者可以做更複雜的操作

優點​

  • 強調使用者能夠即時於網頁互動，在網頁上做許多複雜的操作
  • 很快的 TTFB

缺點​

  • 使用者在開始使用 App 前常常需要較長的等待
  • client 需要下載很多可能用不到的檔案
  • 每次切換頁面可能都要重新等待資料讀取和載入（data fetching）

SSR​

解決的問題​

  • 減少讓使用者下載不必要的檔案
  • 讓使用者能夠儘早看到內容

優點​

  • 使用者可以較快看到有意義的內容

缺點​

  • TTI 較差，即使看到內容可能還是無法在網頁上進行互動和操作（uncanny valley）

SSR with streaming, Suspense, and Concurrent mode​

解決的問題​

  • 使用者需要等 server 把資料都下載讀取完後，才能看到內容
  • waterfall 的 data fetching

試著結合 CSR 和 SSR 的優點，並減少對應的缺點

Co-location 的好處

Co-location 帶來的一個好處是「容易移除代碼」，把元件移除的同時，也把拉取資料對應的邏輯也一併移除。