Facebook 开源 Relay 技术预览版

  • 张天雷

2015 年 8 月 21 日

话题:Facebook语言 & 开发架构

为了解决前端渲染网站遇到的性能及 SEO 问题,Facebook 在 2014 年推出了用于构建 UI 的 JavaScript 库——React。之后,在 2015 年 1 月份召开的React.js会议上,Facebook 又公开了在 React 上应用GraphQLRelay框架。近日,Facebook 终于发布并开源了 Relay 的技术预览版。接下来,本文就对 Relay 进行简要介绍。

首先,本文对 React 和 GraphQL 进行简要说明。React 框架以其组件和基于组件的设计流程、单向的数据流动、采用虚拟 DOM 作为操作对象和在 JavaScript 中声明式的描述 UI 等特性,为 web 应用开发带来了诸多好处,变革着相关开发人员的开发体验。然而,React 在与服务器中的数据进行交互方面存在着一定的问题。客户端与服务器端脆弱的耦合方式经常引起数据相关的问题,而且使得产品的迭代越来越难。而且,开发人员不得不根据产品的发展,不断的重新实现复杂的异步逻辑。另外一方面,GraphQL 是 Facebook 已经在原生应用上使用多年的、用于描述复杂嵌套的数据依赖的查询语句。GraphQL 支持更加灵活的查询方式,使得前端与后端工程师可以更加高效的进行合作,成为解决 React 中数据交互问题的可能方案。因此,随着 React 的崛起,如何在 React 中使用 GraphQL 已经变为迫切需求。为此,Facebook 在今年初提出了 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 下载版本库后,即可进行安装和体验。由于该版本只是预览版,Facebook 团队表示,Relay 在某些方面肯定存在不完美的地方。该团队会与 GraphQL 社区合作,及时进行版本更新。未来,Relay 将会在离线支持、实时更新和扩展等方面进行进一步的发展。


感谢徐川对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群InfoQ 好读者)。

Facebook语言 & 开发架构