React的野望


看到最近React在Github上已經超過5萬個星,這個趨勢應該是銳不可擋了,未來的React發展是如何,相信有很多使用者非常關心,以下的內容是從最近的在網路上看到的文章與影片來看幾個React未來的發展。

先說結論:

  • 未來React的Virtual DOM會延伸到不同的渲染目標(跨平台?),不僅是網頁上的DOM元素而已,所以這個技術名稱大概會改以免造成誤解。
  • React Native雖然還是個年輕的專案,但未來會逐漸成熟,成為最主要的使用JS語言開發雙平台(iOS/Android)手機APP的趨勢龍頭。
  • React Native未來有機會延伸到桌面應用macOS, Windows, Ubuntu中。目前暫時還只是個實驗性的平台。

Virtual DOM?

作為一個屬於View(視圖)領域的函式庫,Virtual DOM是一個被大家認為React的最大賣點,但實際是如此嗎?

Sebastian Markbåge是Facebook公司中的React主要工程師之一,如果你有在追React的新技術訊息,常常會看到他在Twitter或Github的訊息。他在更早之前(2014.2)就有一則Twitter是有關於Virtual DOM的如下:

It's a misconception that React needs the virtual DOM for performance. It's foremost an immutable shim over an inherently mutable DOM API. (Sebastian Markbåge)

中譯: React需要virtual DOM是為了效能是個錯誤的觀念。它(virtual DOM)最有價值的是在本性是可改變的DOM API上加了一個不可改變的墊片。

Virtual DOM的價值是在於提供了另一種選擇,不要直接存取DOM而是用元件化的方式,讓React(函式庫)來處理DOM的渲染。所以比較Virtual DOM的效能似乎也沒太大意義,合理的效能就足夠,要認真要求效能就用Vanilla JavaScript(原本的JavaScript)一定最快,框架類的像Backbone或Angular一定是比較慢的。

當React開始支援其他的方式來渲染目標,Virtual DOM也開始失去矚目,以下的Twitter是在2015.1月:

2016 The year React stops using Virtual DOM because we don't need to bridge to legacy imperative APIs anymore.(Sebastian Markbåge)

中譯: 2016 今年React停止使用Virtual DOM因為我們不需要再橋接過去的必要APIs。

在React Europe 2015的演講主題是"DOM as a Second-class Citizen",這個研討會的時間是在2015.7左右。這個演講的內容可以看得出來,React的眼光並不是只有放在網頁上的DOM,React或許開始把目標轉向更底層的瀏覽器Box Tree、圖像層或WebGL,也可能是Android的視圖系統或iOS的UIkit。

未來的React View System

另一個可以看到重點,是在React Native專案上的成功,React Native的發表日期約莫是在2015.1。由於React Native並不依賴WebView,並不是用DOM元素作為呈現,雖然它在元件的樣式上,使用類似於CSS的JavaScript語法,但實際上並不是網頁上的DOM元素樣式介面,React Native在排版(Layout)上使用了css-layout,核心是JavaScriptCore,這種CSS樣式則在Android與iOS上有些許不同支援(見這張React Native Styling Cheat Sheet樣式對應表),想當然是對應到Android與iOS中所定義的元件樣式中。

Fiber架構

另一個令人關注的是Fiber架構,在2016.7月份有一篇React Fiber Architecture文章引起了廣泛的討論,許多人認為這是React未來新核心架構。在國外的Hacker News知乎-如何理解 React Fiber 架构都有關心的工程師在討論著。

註: 這篇也有被翻譯為簡體中文版日文版,不過翻得好不好我就不知了,翻譯文章日期要注意,因為原本的文章其實有繼續修改中。

Fiber是個重新設計React的核心演算法,大致上有幾個重點(來自最近的Andrew Clark: What's Next for React影片):

  • Scheduling(排程)
  • Concurrency(同步)
  • Integrated layout(整合版面)

我會認為這個架構是準備與上一節所說的內容相呼應的,見原文中的這一段內容:

The DOM is just one of the rendering environments React can render to, the other major targets being native iOS and Android views via React Native. (This is why "virtual DOM" is a bit of a misnomer.) ~ Reconciliation versus rendering

中譯: DOM只是React可以渲染的其中一種環境,透過React Native來渲染的其他主要目標會是原生的iOS與Android視圖。(這也是為什麼"virtual DOM"有點用詞不妥當)

當然在影片中實際上也有提到,目前React演算法的一些問題,以及為何要改用新的作法的理由、實例的展示,詳請參考Andrew Clark: What's Next for React影片中的解說。

其他專案發展

React Native有很多週邊的專案,除了它自己已經有38,000個星之外,有很多週邊的專案都有很高的評價,加上許多大公司(wix.com, airbnb...)的人力支援,發展得很快速,以下是幾個跨平台的專案:

  • React Native for Web: 3000個星。這個專案是由Twitter的工程師發佈的,目的是讓React Native的程式也可以在網頁上執行與呈現。週邊的專案還有react-native-web-player、react-web、react-native-web-starter。

  • React Native for macOS: 7800個星。用Cocoa與React Native來建立桌面應用。

  • react-native-windows: 1000個星,沒那麼受歡迎。這是是用來建立Windows桌面應用。(2016.6)

  • React Native Ubuntu: 600個星。(2016.8)

結論

結論在最前面有說了。

參考