閱讀演講筆記 - QCon 全球軟體開發大會 - React 生態圈 by 郭达峰

完整的說明 React 生態圈與要解決的事情，有提到 GraphQL 講得非常生動，聽完覺得這個解決方案還不錯，後端工程師應該表示欣慰。

覺得前端世界非常快速的產生許多解決方法與技術，如：BackBone.js -> angular.js

Node.js & io.js => 合併 O_o”

前端技術正在面臨著前所未有的工程化挑戰

React 生態圈

  • 目標平台
  • 數據處理
  • 語言

目標平台

  • Server side Rendering
  • Client-Side Rendering
    • 用戶體驗比較好，只需用 ajax 替換跳不同的頁面
    • 首次打開速度
      • 需下載完 JavaScript
      • call api
    • SEO
      • 爬蟲不認得未渲染前的頁面內容

Twitter 2011 年曾經回到 Server side Rendering 的技術

我們想要的是什麼？

寫一次 UI 元件，前/後端都可以使用。

有沒有辦法後端可以先渲染出基礎的 HTML 到了用戶前端再加上 JavaScript 動態效果與操作，這讓不就可以完美解決第一次下載速度較慢，與 SEO 的問題。

其實 React Virtual DOM 就可以讓我們完成這件事情，因為在後端與前端都繪出同一個元件，既 同構 (isomorphic)

多目標平台

因為 Virtual DOM 因此可以實現。

  • 目標平台不再侷限在瀏覽器
  • React Native
    • faceBook Ads Manage
    • 85% 程式碼重複使用
  • React TUI 實現，並且可以用 CHROME 去 debug
  • 解決 SEO
  • 解決首次開啟 app 速度較慢問題

用你最熟悉的前端開發流程，和 JavaScript 語法去開發不同平台的應用程式。

數據處理

  • Flux
  • GraphQL / Relay

GraphQL 是什麼？

GraphQL 是 RESTful 之外的另一種 API 設計模式，在某些情況下，是更好的選擇。

RESTful API 的問題？

如果我要顯示一個畫面包含： 使用者資訊, 購物車內容。

我必須要去 call 兩隻 API 等到請求回應後我才能把畫面顯示上去。

Custom endpoint

你可以使用 Custom endpoint 把兩筆資料合併來解決呀！？

可是瑞凡.. 你有很多 API 你也要通通合併嗎？你如何管理這些 API 呢？

Over fetching

不同設備需要的資料 粒度 不同，如：

  • iPhone
    • 使用者名稱 + 購物車前三筆資料
  • PC
    • 使用者詳細資訊 + 購物車資料（根據螢幕大小）
  • 還記得要向下支援舊版本嗎？（資料格式不同）
  • 每次需求改變，後端都要先修改，前端才有資料可以接（功能什麼時候會好？問後端啊！（攤））

後端表示難過 Q_Q”

The REST interface is designed to be efficient for large-grain hypermedia data transfer..

  • Dr Roy T Fielding, Author of REST
    REST 作者說：REST 更適合應用在大粒度數據場景。

現在我們的場景是什麼？我們有不同的前端設備，有不同的版本，對於 API 的資料內容有不同的要求？要怎麼解決這個問題！？