Facebook开源Relay技术预览版

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

 

为了解决前端渲染网站遇到的性能及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将会在离线支持、实时更新和扩展等方面进行进一步的发展。

更多

Relay
软件编程