我們很高興向大家介紹 Twitter Lite，它是一款突破性的網路應用程式（Web App），可通過 mobile.twitter.com 下載獲取。Twitter Lite 反應迅速、使用更少的資料、佔用更少的儲存空間、並支援在現代瀏覽器中推送通知和離線使用。輕量級應用程式允許使用者按需訪問，無衝突安裝（install without friction），並支援漸進式更新，而網路正在成為一個此類應用的平臺。在過去的一年中，我們採用了全新的開放式網路 API，顯著提升了效能，增強了使用者體驗。
架構概述
Twitter Lite 是一個客戶端 JavaScript 應用程式，也是一個簡單的輕量級 Node.js 伺服器。伺服器處理使用者身份驗證，構建應用程式的初始狀態，並渲染初始的 HTML 應用程式 shell。一旦載入到瀏覽器中，應用程式將直接從 Twitter API 請求資料。這種基礎架構的簡單效能幫助我們大規模地提供可靠又高效的出眾服務，而且，Twitter Lite 比我們的伺服器渲染的桌面網站要便宜得多。
客戶端 JavaScript 應用程式的開發、構建和測試基於眾多開源庫，其中包括 React、Redux、Normalizr、Globalize,Babel、Webpack、Jest、WebdriverIO 和 Yarn。依賴已構建（完成）的開源軟體，我們可以將更多的時間花在改善使用者體驗、提高迭代速度、以及處理 Twitter 特有的問題上，比如處理和操作 Timeline 和 Tweet 資料。
我們編寫了現代的 JavaScript（ES2015 及更高版本），由 Babel 編譯並和 Webpack 捆綁。API 響應資料首先由 Normalizr 處理，它允許我們刪除重複資料，並將資料轉換為更高效的表單，然後傳送到各個 Redux 模組，它們的作用是獲取、儲存和檢索遠端和本地資料。該 UI 由數百個 React 元件實現，它們可以實現包括文字渲染、管理虛擬列表、延遲載入（lazy load）模組和延遲渲染等方方面面的功能。Twitter Lite 一共支援 42 種語言，我們使用 Globalize 來提供本地化的數字、日期和訊息。
效能設計
每月有數億人訪問 mobile.twitter.com。當你的網路連線（速度）緩慢、（方式）不可靠、（渠道）有限或（資費）昂貴時，我們希望 Twitter Lite 能成為你使用 Twitter 的最佳方式。通過一系列的增量效能改進（稱為 PRPL 模式 ），以及使用 Android 現代瀏覽器（例如 Google Chrome）上的新功能，包括頁面守護者（Service Worker）、IndexedDB、網路應用安裝提示條和網路推送通知，我們能夠獲得高速和可靠的網路連線。
實用性
Twitter Lite 具有網路彈性。為了覆蓋地球上的每一個人，我們同樣需要顧及那些所處網路環境緩慢且不可靠的人群。網路可用時，我們使用 Service Worker 以便在重複訪問時，啟用臨時離線瀏覽和即時載入，而不必考慮網路條件。Service Worker 對 HTML 應用程式 shell、靜態資源以及一些流行的表情符號進行快取。當指令碼或資料無法載入時，我們提供“重試”按鈕，幫助使用者從故障中恢復。總之，所有這些改進提高了網路的可靠性，並有助於在重複訪問時，大大加快載入和啟動時間。
逐步載入
Twitter Lite 在大多數裝置上，處於 3G 網路環境下，完成互動不超過 5 秒。世界上大多數國家都在使用 2G 或 3G 網路，所以快速的初始體驗很關鍵。在過去的 3 個月內，我們的平均負載時間縮短超過 30%，第 99 個百分位的互動延遲時間縮短超過 25%。為了實現這一點，應用程式將初始的 HTML 響應傳送給瀏覽器，傳送指令來預先載入關鍵資源，而伺服器同時構建初始的應用程式狀態。通過使用 Webpack，應用程式的指令碼被打散成顆粒碎片按需載入，這意味著初始載入只要求載入可見螢幕所需的資源。（有條件時，Service Worker 會預先快取額外資源，並允許對其他螢幕進行即時未來導航（instant future navigations）。）這些改進允許我們逐步載入應用，可以讓人們更快地閱讀和建立 Tweet。
渲染
Twitter Lite 顛覆了昂貴的渲染工作。儘管我們已經注意優化元件的渲染，Tweet 仍是一個複雜的複合元件，並且渲染無窮列表的 Tweet 需要考慮額外的效能。我們實現了自己的虛擬化列表元件，它只會在 Viewport 檢視中顯示內容，使用 requestAnimationFrame API 以遞增的方式渲染多個框架，並在螢幕上保留滾動位置。通過使用 requestIdleCallback API，將非關鍵的渲染延遲到空閒時間進行，從而進一步提高感知效能。
資料使用
Twitter Lite 在預設情況下減少了資料使用，提供較小的媒體資源，並（主要）依賴已快取資料。我們已經對影像進行了優化，以減少其對資料使用的影響：當你滾動一個 Timeline 時，資料使用的影響降低多達 40%。“資料節流”模式進一步減少了資料使用，它用一個小小的模糊預覽來替代 Twitter 上的 Tweet 和直接訊息（Direct Messages）。這個影像的 HEAD 請求幫助我們在按鈕旁顯示其大小，以便按需載入。Twitter Lite 只佔用很小的裝置儲存空間，對比我們的原生應用，它只有其 1-3% 的體積。
設計系統和迭代速度
增強快速迭代能力可以幫助我們保證高質量的使用者體驗。我們嚴重依賴 Flexbox 進行佈局規劃，以及較小且固定數量的顏色、字型大小和長度。Twitter Lite 是由基於元件的響應設計系統構建的，它可以讓應用程式適應任何的形狀引數。使用 UI 元件幫助我們在設計（學）和工程（學）之間建立一個共通的詞彙表，更利於快速迭代和重新使用現有構造塊。一些非常複雜的產品特性，比如與內容混合的 Timeline，可以由精簡至 30 行的程式碼建立，以配置一個 Redux 模組並將其與 React 元件相連。
展望未來
在這麼大的規模上構建一個快速的網路應用程式，並保持其高速穩定的執行，（不得不說），是對 Twitter 的設計、產品和工程等多個團隊/部門的一次重大挑戰。我們對現階段取得的進展感到興奮，並對 HTTP/2、GraphQL 和其他壓縮格式進行了試驗，以進一步減少載入時間和資料消耗。在接下來的幾個月內，我們將對 Twitter Lite 的可訪問性、安全性、設計、功能和效能進行更多的改進。
讓我們拭目以待吧！ [鼓掌]└(~~└)(┘~~)┘[鼓掌]