玩玩 react.js

因為前陣子看到不少人大力的讚美 React.js ,所以我也忍不住也來玩玩看了。之前只知道 React.js 的特別之處在於 virtual dom,速度非常的快,但是速度不是我的興趣之處,所以就沒有再接觸了。這次再研究後才知道,React.js 還有一個特點就是能同時在 server side 以及 client side render,而且這個 virtual dom 的能力對於從server side render 出來的 HTML 也是有效的。

所以你可以讓 react.js 在 server render 好 HTML 後,再轉成用 javascript 來換頁,這就讓我非常有興趣了。以前 Twitter 曾經把頁面的 render 全部交給 JavaScript ,下場就是第一頁的render非常的慢。因為你要等JavaScript + template + json 全部抓完後,再用 JavaScript 把 HTML render出來,怎樣都沒有server直接吐 HTML給你快。看起來 react.js 可以解決這個問題。

我又再使用 http://bambooboard.net/ 當練習對象。因為1. 這是個討論板,是種內容網站,一定要有 server side 的 HTML 讓 google爬。2. 前後文章瀏覽,按讚以及有留言回應等互動的功能,基本要走 ajax ,UX 才會好。所以不能不用 JavaScript,但也不能連內容全用 JavaScript 來生成。 所以原本是採用文章內容會 render HTML,互動功能用angularJS 加上去的做法,換句話說是一個折衷方案,所以每次換文章都是比較慢的整頁 refresh,我一直希望能更快再快。

經過非常慘烈的學習與嘗試之後,終於成功換成 React.js 了,而且成果非常的好。現在你到 bambooboard 第一次會是收到 server render的 HTML,接下來連結到不同頁變成是用 ajax 拉 json 資料回來,大大增進速度與 UX。你也可以把 JavaScript 關掉,就是傳統的網站,每個文章都可以用連結到達,整個網站還是能運作的,只是每頁都要全頁 refresh 而已。這可是個沒話說的 progressive enhancement 實作啊。

從一個有理想( progressive enhancement )的 web designer 的角度來看,React.js 達成了其他 JavaScript framework/lib 都達不到的成果,已經值得推廣了。至於像是減少架構的複雜度之類的議題,因為我的程式很簡單,所以就比較不能評斷了。

非常慘烈:要讓 server 和 client 的 react 同步前提是兩個HTML「一模一樣」,要求有點高。)