非死book開源Relay技術預覽版

為了解決前端渲染網站遇到的性能及SEO問題，非死book在2014年推出了用于構建UI的JavaScript庫—— React 。之后，在2015年1月份召開的 React.js 會議上，非死book又公開了在React上應用 GraphQL 的 Relay 框架。近日，非死book終于 發布 并開源了Relay的技術預覽版。接下來，本文就對Relay進行簡要介紹。

首先，本文對React和GraphQL進行簡要說明。React框架以其組件和基于組件的設計流程、單向的數據流動、采用虛擬DOM作為操作對象和在JavaScript中聲明式的描述UI等特性，為web應用開發帶來了諸多好處，變革著相關開發人員的開發體驗。然而，React在與服務器中的數據進行交互方面存在著一定的問題。客戶端與服務器端脆弱的耦合方式經常引起數據相關的問題，而且使得產品的迭代越來越難。而且，開發人員不得不根據產品的發展，不斷的重新實現復雜的異步邏輯。另外一方面，GraphQL是非死book已經在原生應用上使用多年的、用于描述復雜嵌套的數據依賴的查詢語句。GraphQL支持更加靈活的查詢方式，使得前端與后端工程師可以更加高效的進行合作，成為解決React中數據交互問題的可能方案。因此，隨著 React的崛起，如何在React中使用GraphQL已經變為迫切需求。為此，非死book在今年初提出了Relay。

Relay充分吸取了React之前的經驗和教訓，提出了聲明式、面向組件的數據抓取方式。聲明式的數據抓取意味著Relay應用直接指定所需要的數據內容。正如React使用的聲明式UI的一個描述來管理視圖更新一樣，Relay以GraphQL查詢的方式來使用聲明式數據。給定這些描述，Relay自動完成查詢打包、異步通信邏輯的管理、數據緩沖以及隨著數據變化而自動更新視圖等工作。面向組件的方式使得GraphQL查詢可以根據需求精確描述所需要的數據。這就可以有效避免數據取少或者取多可能引起的問題。

Relay架構主要包括了Relay組件、Action、Relay Store和服務器四部分。在Relay中，每個組件都可以自定義其所需要GraphQL數據格式。在組件實例化的時候，它會向GraphQL服務器發送請求，然后使用this.props從Relay Store中訪問獲取到的數據。而當數據變化時，Relay通過Action通知相應組件更新，并在客戶端的Relay Store中維護一份數據緩存。此外，為了提高數據傳輸的效率，Relay支持開發者自由地組合React組件，并自動構建嵌套組件的GraphQL查詢，把多個組件的小請求合并為一次GraphQL請求。

目前，Relay技術預覽版的相關代碼已經依托在 GitHub 中。用戶利用git clone下載版本庫后，即可進行安裝和體驗。由于該版本只是預覽版，非死book團隊 表示 ，Relay在某些方面肯定存在不完美的地方。該團隊會與GraphQL社區合作，及時進行版本更新。未來，Relay將會在離線支持、實時更新和擴展等方面進行進一步的發展。