Facebook內部是如何使用JavaScript和GraphQL的

最近, 來自 Facebook 的 Lee Byron (@leebyron) 在Hashnode上主辦了一場 AMA( Ask Me Anything )。 這裡提出了許多有趣的問題，並且 Lee 透露了一些關於 Facebook 如何使用 React 、GraphQL 、和 React Native 的驚人事實與細節。我拜讀了他在 AMA 上的回答，思考並總結出了十條有趣的重點。

那麼，開始吧。

React 背後的靈感?

React 一定程度上受到了 XHP 的啟發，來自 Facebook 的 Marcel Laverdet 在2009年建立了此專案，用於模組化 Facebook 的使用者介面。詳見這裡。

Facebook計劃用React Native 重寫他的移動應用嗎？

好吧, 答案是 : 他們已經這樣做了。 有一部分 Facebook 的應用使用了 React Native 構建，也有一部分不是。 詳細的答案見這個討論.

哪些場景正在使用 Immutable.js ？

Ads Manager 和他們基於 React Native 的 Android 和 IOS 應用。

Messenger 網站 (messenger.com)

用 Draft.js 寫的新文章。

在 Facebook News Feed 上所有的評論。

Facebook 如何為 React 元件寫 CSS ?

Lee 透露到他們禁止匯入 CSS 規則到除 React 元件以外的任意檔案。 這樣不僅確保了一個元件經由格式化的屬性所應該暴露出的正確的 API ，同時其他的元件不能夠通過匯入一個規則來覆蓋他。 此外，他們並不需要通過 JavaScript 的一些技巧來匯入 CSS 檔案。相反，他們遵循Button.js 臨靠 Button.css 的規範。詳見 這裡。

Facebook 會隨著每個 React 重要發行版而更新 React 元件嗎？

是的，他們會。

Facebook 通常將 React master 分支用於生產環境

從2012開始，React API 並沒有進行多少重大的更改。 因此，React 團隊也很少面臨必須更新元件的狀況。

如果有突發的更新，React 團隊的成員 Ben Alpert 將會負責程式碼庫的所有同步工作。

他們也會使用類似 jscodeshift 的自動化工具去簡化問題。

GraphQL 背後的故事是什麼?

GraphQL 誕生於2012年，當時 Lee 正在 IOS 組致力於 News Feed 。 當時，在一些網路環境糟糕的地區，Facebook 正急速增長。 因此, GraphQL 最初被設計於應對緩慢的手機連線。 不久，當 Relay 正準備開源時，他們認為缺乏 GraphQL ，Relay 的開源就沒有多少意義。 同時，他們也意識到 GraphQL 服務編寫得很巧妙並且大多數 Facebook 以外的公司都未嘗使用過。因此，他們決定通過編寫一個語言無關的規範來發布它。那就是 GraphQL 背後的故事。詳情可閱讀 此處 的回答。

Facebook 正在什麼場景使用 GraphQL ？

Facebook的 Android 和 IOS 應用 幾乎全部依賴於 GraphQL 支援。 在一些情況下, 如Ads Manager，整個應有都在使用 Relay + GraphQL 。

是的, Facebook 重度依賴 SSR 。儘管如此，Lee 說他們很少有在伺服器使用 React 渲染元件的場景。這個主要取決於他們的伺服器環境。

Facebook 使用 Node.js 嗎？

Lee 說他們有許多客戶端的工具由 Javascript 編寫並通過 Node 執行。remodel 就是這樣一個通過 npm 安裝的工具.他們所有的 IOS 和 android 上的內部 GraphQL 客戶端工具都在使用 Node 。但是他們在伺服器端使用 Node 並不多，因為迄今都沒有一個強烈的需求。 即使某一天他們想在伺服器端使用 Javascript (例如：在伺服器上渲染 React )，他們也會直接使用 V8 引擎而非 Node 。

Falcor (by Netflix) 對比 GraphQL 如何？

據 Lee 所說, 兩個工具都在嘗試解決類似的問題。當 GraphQL 團隊第一次聽說 Falcor 時，他們與 Netflix 團隊見了一面並交換了一些想法。雖然如此，Falcor 與GraphQL 之間還是有許多區別的。閱讀 此處 的回答可以知道更多。

我希望你能喜歡這份非常簡短的總結。 詳細的回答與討論請移步 AMA 頁面。

文章轉載自 開源中國社群[http://www.oschina.net]