ReactJS與Immediate-mode GUI

為何ReactJS是開發複雜UI的首選

兩年多前ReactJS剛出現的時候,Angular與Ember(加上更早期的Backbone)還是大型網站應用程式的開發主流。ReactJS的出現,引起許多人注意,當時我看到一篇文章很有意思:Removing User Interface Complexity, or Why React is Awesome,裡面提到了ReactJS與immediate-mode GUI的相似之處。那是我第一次知道immediate-mode GUI這檔事,也很佩服作者的洞察力。這兩年來,我發現很少人談論這件事,中文的文章更是沒有,所以我想花點時間跟大家介紹一下ReactJS與immediate-mode GUI的關係,因為我認為這是ReactJS的最重要特性。

 

我的GUI開發經驗

早在web出現之前,圖形化視窗作業系統(特別是Unix的X Window)已經存在很久了。我第一次接觸GUI程式設計,是1994年在Stanford唸研究所的時候,為了拿到研究助理獎學金補貼昂貴學費,而申請加入一間STeP實驗室打工。在那間實驗室,只有我一個碩士班學生,其他全都是博士班,所以我負責比較外圍的工作:用ML(一種functional programming language,影響了後來的Haskell、OCaml、Scala、Erlang等)開發X Window的UI元件,例如檔案對話盒等等。我的老闆Zohar Manna是個法國人,帶我的博班學長Nikolaj Bjorner是個瑞典人,那是一間很有趣的實驗室。但是我的開發工作就沒那麼有趣了,當學長們都在運用Zohar Manna的玄妙理論寫著各種神奇演算法的時候,我卻得經常跟X Window系統奮鬥,用高階的ML語言想辦法兜出低階的視窗元件,當然收穫也不少就是了。

1996年我回台灣工作,那時web剛出現,微軟的Windows 3.1、Windows 95還是應用程式的開發主流,大家都在微軟的視窗作業系統下討生活,我也不例外。這幾年的工作經驗,加上之前X Window的開發經歷,讓我對GUI程式設計有一定了解。基本上,GUI程式設計都是event-based,程式員先在畫面上把元件逐一加上去,然後用callback接收使用者的動作,再根據使用者動作以新增/修改/刪除畫面元件。比起撰寫資料結構及演算法,撰寫GUI程式是件繁瑣的差事,從功能表選單、快速鍵、radio button、check box、文字輸入、捲軸、按鈕等各種widget到layout,每個元件的狀態及元件之間的互動都得自己處理。例如使用者做了某個動作,可能觸發某些功能表選單disable、某些區塊訊息更新、某些按鈕enable、某些選項新增,而這些變更又視另一個元件的狀態(例如某個check box或捲軸位置)的讀取結果而定。只要介面稍微複雜一點,程式複雜度立刻瞬間飆升。

Immediate Mode GUI與Retained Mode GUI

我前面提到的文章,裡面有一段關於immediate-mode GUI的影片連結,主講者Casey Muratori長年在video game產業寫程式。這段40分鐘的影片是2005年錄的,我認為他講得很好,直指GUI程式設計複雜度的核心問題:

https://mollyrocket.com/861 (或前往YouTube直接觀看)


Screenshot by Arthur Liao @flickr

如果沒時間看影片,這裡有幾張介紹immediate-mode GUI的投影片可以參考:Immediate Mode Graphical User Interfaces

簡單講,一般的GUI程式設計都是retained mode,畫面上的GUI元件同時也是保存應用程式資料及狀態的地方;針對外部event的回應,程式員再逐一新增、修改或刪除畫面元件。相對於retained mode,Casey Muratori在影片中提倡的immediate mode則是將資料獨立於GUI元件之外,每次的畫面變動都根據應用程式資料重新繪製,不用考慮目前GUI元件的狀態為何。這種做法,大幅簡化了retained mode帶來的軟體複雜度,程式員只要專注在資料狀態的維護,並根據資料render畫面元件即可。

例如原本在retained mode之下,元件A1狀態的改變會觸發元件B、C和D的狀態改變;後來產品經理(或老闆)要求多加一個元件A2,它的狀態也會影響元件B、C和D,但影響方式則視元件A1的狀態而定。可以想像,當元件數量以線性增加時,元件之間互動的排列組合會呈指數飆升。相反的,在immediate mode之下,元件根據應用程式資料重新繪製,不用考慮彼此狀態及元件互動的排列組合,因此元件數量增加時,並不會大幅增加程式複雜度。

然而immediate mode的做法,意味著任何小變動都要重新render整個畫面,可能導致UI效能大幅下降。Casey Muratori在影片中介紹了immediate mode的概念,卻沒有提供相關的library,他是如何實做immediate mode GUI,我們不得而知。我已經很多年沒開發GUI程式了,對這個領域的現況所知有限,若有人知道更多訊息,歡迎分享。(聽說Qt QML很受歡迎,它是一種declarative UI語法,雖然不是immediate mode GUI,卻頗能解決問題。)

ReactJS與Immediate-mode GUI的相似之處

回到ReactJS。太陽底下沒有新鮮事,網頁應用程式開發者遇到的問題,許多年前的GUI開發者已經遇過了。網頁元件帶有retained mode的特性,例如jQuery讓網頁前端工程師可以自由操作網頁上的各種元件,UI互動不多時很好控制,互動一多,程式維護起來就很痛苦了。工程師要操縱數量不斷增長的元件,每一個都不能出錯,就像玩拋接把戲的街頭藝人一樣。


Photo credit: Magnus Hagdorn @flickr CC BY 2.0

ReactJS的一大特色,就是使用virtual DOM。所有React元件都先render成virtual DOM,由React幫你找出有變動的部份,再把這些變動反應到HTML DOM。ReactJS元件採用類似immediate-mode的方式撰寫,也就是每次render都根據元件的props/state資料重新繪製,不用考慮現有畫面元件的狀態。這樣一來,ReactJS開發者既享有immediate-mode的好處,又不用擔心UI效能的問題,可謂魚與熊掌兼得。在我看來,這是ReactJS最重要的特性,也是ReactJS成為開發複雜網站介面首選的原因!當然,開發大型應用程式,只用ReactJS是不夠的,必須搭配其它框架,像是Flux、Redux或FluentJS(順便廣告一下 :P)才行。

以上介紹,希望能讓大家對immediate-mode GUI有些了解,也讓還沒採用ReactJS的人,對ReactJS更有興趣。

 

原文:https://tw.twincl.com/javascript/reactjs/*631q