為降低遷移風險,Etsy 從 React 轉向了 Preact

語言: CN / TW / HK

近日,高階軟體工程師 Ben Sangster 宣佈 Etsy 已從 React v15.6 遷移到了 Preact 10 。Preact 是 MIT 許可下的開源軟體,比 React 小得多,效能也比 React 快, Sangster 認為採用 Preact 能降低遷移大型程式碼庫產生的風險。

我們用 Preact 替換掉了全部的 React v15.6 。這是一個巨大的勝利。與遷移到 v16 相比,遷移到 Preact 要容易得多(對舊程式碼的重寫或重構要少得多)。

Sangster 表示遷移是無縫的,React v15.6 和 Preact 可以使用完全相同的 client,對於 Etsy 的開發人員來說,真正重要的改進是他們可以開始編寫更現代的 React。

相關部落格文章 中,Sangster 詳細解釋了 Etsy 遷移到 Preact 而不是最新版 React 的三個原因。

首先,採用 Preact 能最大程度地降低遷移風險。開發人員一般都比較喜歡 React 16 的新特性 (例如, error boundaries fragments 、錯誤堆疊跟蹤、自定義 DOM 屬性、React 16.8 中的 hooks),雖然 React 16.0 文件提到了一些小的 重大更改 ,但也有不少開發人員 報告了遷移的痛苦 Discord 的 Michael Greer 說:“並不是所有的 package error 都那麼容易被發現,這才是真正的痛苦所在。我們遇到了一個錯誤,花了 2 天時間才找到對應的 library,你可能也會遇到同樣的問題。”另外, routing library 是許多 Web 應用程式的關鍵依賴項, 也可能會導致遷移 出錯

Sangster 解釋說,總體而言,Preact 能更好地控制遷移風險:

  • Preact 的 API 與 React 相容,這意味著我們不用進行任何更改。

  • 由於 Preact 強調與 React v15 和 React v16 的相容性,遷移到 Preact v10.4.2 將變得更加容易。

  • 從開發人員工具的角度來看,採用 Preact 似乎沒有任何重大障礙。

其次,Etsy 的前端系統團隊已經在使用 Preact。在 Etsy 中統一使用 Preact 可能會使開發人員的生活更輕鬆。

再次,Preact 的包大小(Preact v10.4.5 為 4KB)比 React 的小六倍(React v16.13.1 新增 react 和  react-dom 之後為 38.5KB)。JavaScript 體量越大,延遲 ( time to interactive ),也就越大,消耗的記憶體和 CPU 也會越大。

Sangster 強調說:“我們有很多古老的‘無主’程式碼和很多舊的庫,升級到 React 16 會導致一些 API 問題(尤其是 Portals/legacy Context/refs),需要做大量的工作才能夠解決。相反,我們遷移到 Preact,可以將程式碼重構為可用的、最現代的東西,而不需要去做同步升級元件/庫這些事情。”