ReactEurope Conf 參會感想

React 帶來的革命性創新是前端世界過去幾年最激動人心的變化。自從接觸 React 以來，我深信 React 會改變客戶端開發者（包括前端、iOS 和 Android）的開發體驗。此次在巴黎舉辦的 ReactEurope Conf 大會是繼第一次在 Facebook 總部舉辦後最大的 React 活動。超過10位來自React、GraphQL、Relay 團隊的核心技術成員也出席大會進行分享。此次表明 Strikingly（彷佛也是國內惟一家公司）去參加，想寫下一些參會感想。

Keynote [1] 講師是來自 Facebook 的 Christopher Chedeau (vjeux)。他分享了 React 生態系統四大方面 （Data, Targets, Language, Packager）的變化。此次大會全部的內容我以爲也都是這四方面的延伸。我印象最深的是 Data 和 Targets，也是這篇文章主要想分享的內容。

Data

React 定義本身爲 MVC 中的 View。這讓前端開發者從 V 開始去思考 UI 設計。但如今針對數據操做和獲取方式，社區裏尚未一種公認的方法。這也是任何寫 React 應用時最難處理的地方。

Flux

對於 M 和 V，Facebook 提出了 Flux 的概念。以後，幾乎每月出現一新的 Flux 庫，他們都有各自的特點，有的對服務器渲染支持比較好，有的運用了更多函數式編程的概念。不少 Flux 庫更像是實驗，這有助於 React 生態的生長，但不能否認的是，將來會有大量 Flux 庫慢慢死去，而只有少數會存留下來或進行合併。。大會上 React Hot Reload 的做者 Dan Abramov 也介紹了本身新的 Flux 庫 - Redux。這也是大會上最受矚目的演講之一。Redux 認爲 Flux Store 就像函數式編程裏的 reducer

f(init_state, action) => state

經過這種方式，咱們只要存下全部 action 就能夠像時光穿梭同樣去到任什麼時候間點上的狀態。

Redux 應該是如今最函數式的 Flux 庫。私下和 Dan Abramov 的交流中，他告訴我，他正在和其餘幾位 Flux 庫做者接觸並有意進行合併，也許 Redux 會是少數存留下的 Flux 庫之一。

相關演講：

[1] Christopher Chedeau - Keynote

GraphQL / Relay

GraphQL 和 Relay 是我此次參加大會最關心的技術。在構建大型前端應用時，前端和後端工程師經過 API 的方式進行合做。API 也是雙方的協議。如今主流的方式是 RESTful API，然而在實踐中，咱們發現 RESTful 在一些真實生產環境的需求下不是很適用。每每咱們須要構建自定義 endpoint，違背了 Restful 的設計理念。GraphQL 是我認爲目前最完美的解決方法。此次大會也沒有讓人失望，推出了 GraphQL 的規範 並 開源了 JavaScript GraphQL 庫。

然而要讓 GraphQL 成爲主流，Facebook 須要打造一個像 React 這樣的生態系統。目前只推出了規範 和 GraphQL JavaScript 庫（適應於 Node.js 應用）。要想在你本身的應用上用 GraphQL 還必需要有後端語言提供 GraphQL 庫的支持。好比 Strikingly 須要 GraphQL Ruby 庫。這不只僅須要前端工程師。我認爲這將會比 React 生態系統更難創建。Facebook 須要整個社區的參與才能達到。

（圖片來自《Creating a GraphQL Server》[5] 演講）

Relay

Relay 是 Facebook 提出的在 React 上應用 GraphQL 的方案。React 的基礎單位是組件（component），構建大型應用就是組合和嵌套組件。以組件爲單位的設計模式是目前社區裏最承認的，這也是前端世界的趨勢之一。每一個組件須要的數據也應該在組件內部定義。Relay 讓組件能夠自定義其所須要 GraphQL 數據格式，在組件實例化的時候再去 GraphQL 服務器獲取數據。Relay 也會自動構建嵌套組件的 GraphQL 查詢，這樣多個嵌套的組件只須要發一次請求。此次大會也公佈了 Relay 將會在8月份開源。

Immutability

React 社區接收了不少函數式編程的想法，其中受 clojure 影響很深。immutable 數據的使用就是來自 clojure 社區。當年 Om，這個用 ClojureScript 寫的 React 在速度上竟然完虐原生 Javascript 版本的 React。這讓整個社區都震驚了。其中一個緣由就是 ClojureScript 使用了 immutable 數據。React 社區裏也冒出了 immutable.js，這讓 javascript 裏也能用起 immutable 數據，完美彌補了javascript 作負責數據對象比較的先天性不足。immutable.js 的出現也成爲了構建大型 React 應用的必備。本次大會甚至有在討論是否把 immutable.js 直接歸入 javascript 語言中。我我的認爲小型應用不會遇到 virtual DOM 渲染瓶頸，引入 immutable.js 只會讓數據操做很累贅。

相關演講：

[2] Dan Abramov - Live React: Hot Reloading with Time Travel
[3] Lee Byron - Exploring GraphQL
[4] Joseph Savona - Relay: An Application Framework For React
[5] Nick Schrock & Dan Schafer - Creating a GraphQL Server

Targets

對於 Virtual DOM 的討論，不少人會說速度快過於真正的 DOM。這樣的討論可讓人快速入門理解 React，可是真正寫過 React 應用的人會明白速度並非 Virtual DOM 的精髓。我認爲 Virtual DOM 的存在幫助咱們作到了兩件事。第一是聲明式 UI。經過 Virtual DOM，UI 再也不是一個不斷被更變的 DOM，你只要聲明 UI 是怎麼生成的，React 會自動幫你把 UI 的改變渲染到真正的 DOM 上。這種新的思惟方式讓你能夠不用手動操做真正的 DOM。第二是多 target。咱們一直在講 web，但 React 讓咱們作到 web 之外的 target。Virtual DOM 更像是 UI Virual Machine，自動幫你映射到真正的實現上。能夠是 瀏覽器 DOM 、iOS UI、Android UI。在大會上，甚至有人作了 React 映射到 Terminal Text UI [7]。

多 Targets 是此次討論的主要話題之一。多 targets 的根本是 提升開發者體驗。這是本次大會上多次被提起的概念。咱們如何在保持同樣的用戶體驗下，提升開發者體驗。

任何一家有多客戶端的公司都面臨同一個問題：在各類客戶端語言裏從新造輪子。開發者須要學習新的語言、寫和維護相似的功能。提高客戶端開發者體驗就是減小學習成本和維護成本。這就是 React 提倡的 learn once, write everywhere。

本次大會上也有一些鼓舞人心的消息。Facebook 內部 Ads Manager iOS 版本由 7 位工程師用 React Native 花了 5 個月完成。而 Android 版本，是同一班人，3個月內完成。代碼重用率達到了 87%。並且在 React Native 中，你們比較關心的動畫效果和速度的問題，也在此次大會上經過 Facebook 工程師 Spencer Ahrens 演講中的流暢演示獲得了使人滿意的答案。

多 targets 也能夠是在單個平臺更深度的結合。此次大會最讓我目瞪口呆的是 Sebastian Markbåge 的演講《DOM as a Second-class Citizen》。演講中他暢想 React 直接輸出到瀏覽器架構的底層。

這是瀏覽器的渲染架構

這是 Sebastian Markbåge 認爲 React 能夠作的事情。

我當時聽完後凌亂了。姑且不談該不應這麼作，我以爲 React 經過 Virtual DOM 能讓咱們有機會作到就已經讓我興奮不已了。也說明了 Facebook 在設計 React 時已經考慮到超越 DOM。真 TM 的 NB。。。

相關演講：

[6] Spencer Ahrens - React Native: Building Fluid User Experiences
[7] Mikhail Davydov - Back to Text UI
[8] Sebastian Markbåge - DOM as a Second-class Citizen

其餘演講

篇幅緣由，我不詳細討論 Language 和 Packager。但對有幾個演講也留下了深入印象：

Sebastian McKenzie - Improving Your Workflow With Code Transformation

演講者是 Babel 的做者 Sebastian McKenzie。Babel 是目前社區裏最受歡迎的代碼編譯工具。Facebook 團隊甚至已經決定轉用 Babel 而再也不維護以前內部使用的 jstranform。

使用 webpack 或 browserify 這類工具編譯代碼已經漸漸成爲前端工程師工做流程的一部分。Sebastian 此次分享了編譯代碼所帶來的好處。他也剛在 Twitter 上宣佈加入 Facebook，全心作 Babel。期待將來 Babel 可以帶來更多的可能性。

Cheng Lou - The State of Animation in React

最先關注 Cheng Lou 是由於他寫的 react-tween-state 動畫庫。一直一來你們都對動畫應該在 React 裏怎麼表達（示）爲狀態感到困惑。react-tween-state 是我認爲最符合 React 思惟的作法。把位移存在 state 裏，而後經過 javascript 動態渲染新的位置。不過你們對該作法是否能達到滿意的速度一直持有保留態度。此次在他的演講中也展示出了很是出色的效果和速度，很是值得一看。

總結

此次赫門在 JSConf 2015 上提出了前端的摩爾定理：前端每18月會難一倍。雖然他是故意搞笑的，但也確實說明了前端變化的迅速。我以爲前端之因此變化這麼快，是由於咱們如今面臨着史無前例的工程化挑戰。今天的前端複雜度跟幾年前徹底不是一個等級。這也促使着社區要找到在這種複雜度下能保持開發效率和開發體驗的工具和設計模式。React 社區從其餘領域（遊戲渲染、ClojureScript、函數式編程）偷師學藝，結合前端面臨的獨特問題，提出了一系列解決方案。我以爲 React 社區在各方面都推進着前端社區往前進。這對整個社區都是好事。我也但願前端各個框架，就像 Christopher Chedeau 在 keynote 上說的，中止攻擊，互相學習，共同推進整個社區的發展。

It's an exciting time to be a front-end developer.

郭達峯
CTO of Strikingly.com

感謝 題葉、寸志、沈瑜傑、馮哲銳、王徐陽、徐欣 協助修訂校對稿件

（這也是 Strikingly 團隊作的首次技術分享，以後咱們也會繼續分享更多的前端技術及相關資訊，請關注個人微博和 GitHub）

 

原文地址:https://github.com/dfguo/blog/issues/1