同行越做越複雜，聊聊我們簡化版Twitter的架構：僅原生版3%大小

很高興向大家介紹 Twitter Lite，它是一個可以在我們移動網站上訪問的 Progressive Web App [2]。 Twitter Lite 是一個運行在現代瀏覽器的快速、響應式、使用較少的數據和存儲空間、並支持推送通知以及離線使用的 Web app。 Web 正在成為輕量級應用程序的平台，它可以按需訪問，不需要安裝，並逐步更新。 在過去一年中，我們引入了許多新的開放式 Web API，很顯著的提高了整體性能並提升了用戶體驗。

Twitter Lite 包括一個 JavaScript 客戶端和一個小而簡單的 Node.js 伺服器。伺服器處理用戶身份驗證，構建應用程序的初始狀態，並渲染初始的 HTML 應用外殼。一旦在瀏覽器中載入完成，應用程序將直接從 Twitter API 請求數據。基礎架構的簡單性可以幫助我們提供大規模的可靠及有效率的服務 - Twitter Lite 比 Twitter 網站的運行成本要低一個數量級。

客戶端 JavaScript 應用程序使用了許多開源代碼庫，包括 React，Redux，Normalizr，Globalize，Babel，Webpack，Jest，WebdriverIO 和 Yarn。依靠已建立的開源軟體，我們可以花費更多的時間來改善用戶體驗，加速迭代，以及處理 Twitter 相關的問題（比如處理和操作信息流以及推文數據）。

我們採用現代的 JavaScript（ES2015 及更高版本）版本,使用 Babel 並依靠 Webpack 進行打包。 API 響應數據首先由 Normalizr 處理 - 它將數據去重並轉換為更有效的形式，這一過程發生在調用 Redux 一些處理模塊如獲取、保存本地及遠程數據之前。UI 則由數百個 React 組件實現，包含渲染文本，管理虛擬列表，延遲載入模塊和延遲渲染等方面的功能。 Twitter Lite 支持 42 種語言，我們使用 Globalize 提供本地化的數字，日期和消息。

每月有數億人訪問我們移動網站 mobile.twitter.com。 當連接速度慢，不可靠，連接有限制或昂貴時，我們希望 Twitter Lite 成為使用 Twitter 的最佳方式。 我們已經通過一系列增量性能改進（稱為 PRPL 模式 [3]）和使用 Android 上的現代瀏覽器（例如 Google Chrome）的新功能來保證訪問速度和可靠性，其中包括 Service Worker，IndexedDB，Web App Install Banners 和 Web 推送通知。

Twitter Lite 具有網路彈性。 為了觸達到地球上的每一個人，我們需要在網速慢且不可靠的情況下服務用戶。 當服務可用時，無論網路情況如何，我們都會使用 Service Worker 來啟用臨時離線瀏覽和即時載入。 Service Worker 緩存了 HTML 應用程序的 shell、靜態資源以及一些流行的表情符號。 當腳本或數據載入失敗時，我們提供「重試」按鈕，幫助用戶從故障中恢復。 總而言之，這些改變可以提高可靠性，並能夠在重複訪問時顯著減小載入和啟動時間。

Twitter Lite 在大多數設備上通過 3G 網路可以在 5 秒以內完成載入。 世界上大多數移動設備都在使用 2G 或 3G 網路; 快速的打開體驗至關重要。 在過去 3 個月中，我們將平均載入時間縮短了超過 30％，99% 的交互延遲時間縮短超過 25%。

為了實現這一目標，應用程序向瀏覽器發送初始 HTML 響應流，在伺服器構建初始應用程序狀態時發送指令以預載入關鍵資源。 使用 webpack，應用程序的腳本被分解成細粒度並按需載入。 這意味著初始載入只需要可見屏幕所需的資源。如果網路可用，Service Worker 將預載入其他資源，並允許即時的導航到其他界面。這些更改允許我們逐步載入應用程序，以便人們可以更快地消費和創建推文。

Twitter Lite 將昂貴的渲染工作進行了分解，雖然我們已經優化了每個組件的渲染，但展示推文是一個複雜的複合組件，並且渲染無限滾動的信息流列表也需要額外的性能考慮。 我們實現了自己的虛擬化列表組件，它只會對可見視圖中的內容進行渲染，並使用 requestAnimationFrame API 遞增地渲染多個幀上的項目，並保持屏幕上的滾動位置。 通過使用 requestIdleCallback API 將非關鍵渲染推遲到空閑時段，這樣進一步改善了性能。

默認情況下，Twitter Lite 盡量減少數據的使用，提供較小的媒體資源，並依賴緩存數據。 我們已經優化了圖像，以便在滾動信息流時將其對數據使用的影響減少 40％。 我們提供的「數據節約」模式可以進一步減少數據使用，通過使用模糊預覽替換推文和私信中的圖像以減少數據使用。圖像的 HEAD 請求有助於我們在按鈕旁顯示其大小，以便按需載入。 在只有我們原生 app 應用大小 1 - 3% 的情況下，Twitter Lite 也只需要較少的設備存儲空間。

提高快速迭代的能力可以幫助我們保持高質量的用戶體驗。 我們很大程度上依賴於 flexbox 布局及一個小而固定數量的顏色，字體大小和長度。 Twitter Lite 由基於組件的響應設計系統構建，允許應用程序適應任何物理尺寸。 使用 UI 組件還幫助我們建立了設計和工程之間的共享辭彙，並鼓勵快速迭代和重用現有構建塊。 我們最複雜的一些功能，例如混合內容信息流，從配置和連接 Redux 模塊到 React 組件只需要 30 幾行代碼。

在 Twitter 這個規模上構建一個快速的 Web 應用程序，並保持快速迭代，這是涉及到 Twitter 多個團隊包括設計，產品和工程的重大挑戰。 我們對這一進步感到興奮，並嘗試使用 HTTP/2，GraphQL 和替代壓縮格式，以進一步減少載入時間和數據消耗。 在接下來的幾個月中，我們將會對 Twitter Lite 的輔助功能，安全性，設計，功能和性能進行更多的改進。