Falcor和GraphQL有什么区别?

180

GraphQL包括类型系统、查询语言和执行语义、静态验证和类型内省等组成部分,下面对每个部分进行了概述。为了引导您理解每个组件,我们编写了一个旨在说明GraphQL的各个方面的示例。

-https://github.com/facebook/graphql

Falcor允许您通过虚拟JSON图表示所有远程数据源,作为单个领域模型。您可以使用相同的代码方式处理数据,无论数据存储位置是客户端内存还是服务器网络。

- http://netflix.github.io/falcor/

在Relay中,Falcor和GraphQL有何区别?


5
看看这个播客,Jafar在其中谈论了Relay/GraphQL和Falcor/JSON Graph之间的区别。链接为:https://youtu.be/WL54eYbTJUw?t=53m55s - gdi2290
6个回答

137

我观看了Angular Air Episode 26: FalcorJS and Angular 2,其中Jafar Husain回答了GraphQLFalcorJS的比较。这是摘要(改编):

  • FalcorJS和GraphQL都在解决相同的问题(查询数据,管理数据)。
  • 重要的区别在于GraphQL是一种查询语言,而FalcorJS不是。
  • 当您向FalcorJS请求资源时,您非常明确地请求了有限的一系列值。FalcorJS支持诸如范围之类的东西,例如genres[0..10]。但它不支持开放式查询,例如genres[0..*]
  • GraphQL是基于集合的:给我所有真实记录,按照这个排序等。从这个意义上讲,GraphQL查询语言比FalcorJS更加强大。
  • 使用GraphQL,您拥有一个强大的查询语言,但必须在服务器上解释该查询语言。

Jafar认为,在大多数应用程序中,从客户端到服务器发送的查询类型具有相同的形状。因此,具有特定和可预测的操作,如获取和设置,会暴露更多利用缓存的机会。此外,许多开发人员熟悉使用REST体系结构中的简单路由器来映射请求。

最终讨论解决了GraphQL带来的强大功能是否超过了复杂性。


82

我现在已经用这两个库编写过应用程序了,我同意 Gajus 在他的帖子中说的一切,但在我自己使用框架时发现了一些不同的东西最重要。

  • 可能最大的实际区别是,大多数关于 GraphQL 的示例和工作都集中在将 GraphQL 与 Relay 集成 - Facebook 的系统,该系统将 ReactJS 小部件与它们的数据需求集成在一起。另一方面,FalcorJS 倾向于与小部件系统分开运行,这意味着它可能更容易集成到非 React/Relay 客户端中,并且在匹配小部件数据依赖项与小部件方面不会为您自动完成更少的工作。
  • FalcorJS 灵活地集成在客户端的反面是它对服务器如何操作可以有很强的看法。 FalcorJS 实际上确实具有一个"通过 HTTP 调用此查询"的能力 - 尽管 Jafar Husain 似乎没有谈论它太多 - 一旦包含了它们,客户端库对服务器信息的反应方式相当类似,只是 GraphQL/Relay 添加了一层配置。在 FalcorJS 中,如果您返回电影的值,您的返回值最好说“movie”,而在 GraphQL 中,您可以描述即使查询返回“film”,您也应该将其放在客户端数据存储中作为“movie”。 - 这是 Gajus 提到的权力与复杂性之间的折衷。
  • 基于实际情况,GraphQL 和 Relay 似乎更加发展成熟。 Jafar Husain 曾提到 Netflix 前端的下一个版本至少会部分运行在 FalcorJS 上,而 Facebook 团队则提到他们已经在生产中使用某个版本的 GraphQL/Relay 堆栈超过 3 年了。
  • GraphQL和Relay周围的开源开发者社区似乎正在蓬勃发展。 在GraphQL和Relay周围有许多人气高涨的项目,而我个人发现FalcorJS周围很少有这样的项目。 此外,Relay的基本github存储库(https://github.com/facebook/relay/pulse)比FalcorJS的github存储库(https://github.com/netflix/falcor/pulse)活动要更加活跃。 当我第一次拉取Facebook存储库时,示例文件是破损的。 我创建了一个github问题,几个小时内就解决了。 另一方面,我在FalcorJS上打开的github问题两周内没有官方回复。

1
GraphQL(2012年)比React和Relay早出现,因此您的第一个观点可能不完全准确。 - Burgi
你可能是对的。我不是Facebook用户,所以我无法真正谈论它的历史。我的评论更多来自于Facebook文档和讨论的当前状态。它们作为伴侣被介绍给世界(https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html),并且两者都有相当长的历史。我看到一些模糊的手势关于Relay在早期2015年的评论中回溯了3年,因此可能两者在向外界展示之前已经在内部开发了几年。但我肯定没有特别的知识。 - OverclockedTim

30

李拜伦 是GraphQL背后的一名工程师,他在hashnode上进行了AMA,以下是他回答这个问题的答案:

Falcor 返回 Observables,GraphQL 只返回值。对于 Netflix 想要使用 Falcor 的方式来说,这对他们来说非常有意义。他们进行多个请求并在数据准备就绪时呈现数据,但这也意味着客户端开发人员必须直接使用 Observables。GraphQL 是一种请求/响应模型,并返回 JSON,这很容易使用。Relay 添加了一些 Falcor 呈现的动态性,同时仅使用普通值。类型系统。GraphQL 是基于类型系统定义的,这使我们能够构建许多有趣的工具,如 GraphiQL、代码生成器、错误检测等。Falcor 更加动态,这本身就是有价值的,但限制了执行此类操作的能力。网络使用。GraphQL 最初是为在低端设备和更低端的网络上操作 Facebook 的新闻提要而设计的,因此它采取了大量措施,以便您可以在单个网络请求中声明所需的所有内容,以最小化延迟。另一方面,Falcor 经常执行多个往返以收集其他数据。这实际上只是一个简单系统和网络控制之间的权衡。对于 Netflix,他们还处理非常低端的设备(例如 Roku stick),但假设网络足够好以流式传输视频。

编辑:Falcor确实可以批量请求,因此对网络使用的评论不准确。感谢@PrzeoR


4
不正确 -> 另一方面,Falcor通常执行多次往返以收集额外的数据。这实际上只是系统简单性和网络控制之间的权衡。只需检查Falcor Batch功能,它与Relay相同甚至更好。 - PrzeoR
1
@PrzeoR 谢谢您的纠正!我已经编辑了帖子! - YasserKaddour
关于FalcorJS的更多详细信息,请查看此处:https://reactjs.co/2016/02/03/what-is-netflix-falcor-and-why-you-should-care/,不用谢 :-) - PrzeoR
确实是一篇很棒的文章,Falcor 真的很不错。不幸的是,我是一名 Scala 开发人员,在 Scala 或者其他任何语言中都没有 Falcor 的实现。但是,有一个名为 Sangria 的优秀 GraphQL 实现在 Scala 中。 - YasserKaddour
还有其他替代方案可以使用类似于Redux的中间件,例如apollo-clientcashay - YasserKaddour

24

更新:在我的帖子下,我找到了非常有用的评论,想要与您分享作为主要内容的补充: 输入图像描述

关于缺乏示例,您可以在awesome-falcorjs存储库中找到有用的用户,其中包含Falcor的不同CRUD使用示例: https://github.com/przeor/awesome-falcorjs ... 第二件事,有一本名为“Mastering Full Stack React Development”的书,其中也包括了Falcor(学习如何使用它的好方法):

enter image description here

以下是原始帖子:

FalcorJS (https://www.facebook.com/groups/falcorjs/)比Relay/GraphQL更简单高效。

GraphQL+Relay的学习曲线非常陡峭: enter image description here

简而言之,选择Falcor。在下一个项目中使用Falcor,直到您拥有大量预算和团队学习时间,然后再使用RELAY+GRAPHQL。

GraphQL+Relay有巨大的API,您必须熟练掌握。Falcor的API很小,非常容易被任何熟悉JSON的前端开发人员掌握。

如果您的敏捷项目资源有限->那么选择FalcorJS!

我主观的看法是:FalcorJS在全栈JavaScript中要比传统方法容易500%以上。

我还发布了一些FalcorJS入门套件(以及更多全栈falcor示例项目):https://www.github.com/przeor

更多的技术细节如下:

1)当您使用Falcor时,可以在前端和后端同时使用:

import falcor from 'falcor';

然后基于此构建您的模型。

... 您还需要两个简单易用的库来在后端使用: a) falcor-express - 您只需使用一次即可(例如app.use('/model.json', FalcorServer.dataSourceRoute(() => new NamesRouter())))。来源:https://github.com/przeor/falcor-netflix-shopping-cart-example/blob/master/server/index.js

b) falcor-router - 在那里您定义简单的路由(例如route: '_view.length')。来源: https://github.com/przeor/falcor-netflix-shopping-cart-example/blob/master/server/router.js

学习曲线方面,Falcor非常容易上手。

您还可以查看比FB的lib更简单的文档,并且还可以查看文章“为什么您应该关注falcorjs(netflix falcor)”。

2) Relay/GraphQL更像是一个巨大的企业工具。

例如,您有两个不同的文档,分别讨论:

a) Relay: https://facebook.github.io/relay/docs/tutorial.html -容器 -路由 -根容器 -就绪状态 -突变 -网络层 -Babel Relay插件 -GRAPHQL

  • GraphQL Relay规范
  • 对象标识
  • 连接
  • 突变
  • 进一步阅读
  • API参考

  • Relay

  • RelayContainer
  • Relay.Route
  • Relay.RootContainer
  • Relay.QL
  • Relay.Mutation
  • Relay.PropTypes
  • Relay.Store
  • 接口

  • RelayNetworkLayer

  • RelayMutationRequest
  • RelayQueryRequest

b) GraphQL: https://facebook.github.io/graphql/

  • 2Language
  • 2.1Source Text
  • 2.1.1Unicode
  • 2.1.2White Space
  • 2.1.3Line Terminators
  • 2.1.4Comments
  • 2.1.5Insignificant Commas
  • 2.1.6Lexical Tokens
  • 2.1.7Ignored Tokens
  • 2.1.8Punctuators
  • 2.1.9Names
  • 2.2Query Document
  • 2.2.1Operations
  • 2.2.2Selection Sets
  • 2.2.3Fields
  • 2.2.4Arguments
  • 2.2.5Field Alias
  • 2.2.6Fragments
  • 2.2.6.1Type Conditions
  • 2.2.6.2Inline Fragments
  • 2.2.7Input Values
  • 2.2.7.1Int Value
  • 2.2.7.2Float Value
  • 2.2.7.3Boolean Value
  • 2.2.7.4String Value
  • 2.2.7.5Enum Value
  • 2.2.7.6List Value
  • 2.2.7.7Input Object Values
  • 2.2.8Variables
  • 2.2.8.1Variable use within Fragments
  • 2.2.9Input Types
  • 2.2.10Directives
  • 2.2.10.1Fragment Directives
  • 3Type System
  • 3.1Types
  • 3.1.1Scalars
  • 3.1.1.1Built-in Scalars
  • 3.1.1.1.1Int
  • 3.1.1.1.2Float
  • 3.1.1.1.3String
  • 3.1.1.1.4Boolean
  • 3.1.1.1.5ID
  • 3.1.2Objects
  • 3.1.2.1Object Field Arguments
  • 3.1.2.2Object Field deprecation
  • 3.1.2.3Object type validation
  • 3.1.3Interfaces
  • 3.1.3.1Interface type validation
  • 3.1.4Unions
  • 3.1.4.1Union type validation
  • 3.1.5Enums
  • 3.1.6Input Objects
  • 3.1.7Lists
  • 3.1.8Non-Null
  • 3.2Directives
  • 3.2.1@skip
  • 3.2.2@include
  • 3.3Starting types
  • 4Introspection
  • 4.1General Principles
  • 4.1.1Naming conventions
  • 4.1.2Documentation
  • 4.1.3Deprecation
  • 4.1.4Type Name Introspection
  • 4.2Schema Introspection
  • 4.2.1The "__Type" Type
  • 4.2.2Type Kinds
  • 4.2.2.1Scalar
  • 4.2.2.2Object
  • 4.2.2.3Union
  • 4.2.2.4Interface
  • 4.2.2.5Enum
  • 4.2.2.6Input Object
  • 4.2.2.7List
  • 4.2.2.8Non-null
  • 4.2.2.9Combining List and Non-Null
  • 4.2.3The __Field Type
  • 4.2.4The __InputValue Type
  • 这是您的选择:
    简单、简洁、文档详尽的Falcor JS,与长而高级的GraphQL&Relay等企业级工具相比。
    正如我之前所说,如果您是一个掌握使用JSON思想的前端开发人员,那么Falcor团队的JSON图实现是做全栈开发项目的最佳方式。

14
主观性答案。不包括技术比较。更适合作为评论。 - Gajus
2
@GajusKuizinas 主观的回答?查看两者的文档即可;-) 我只是说 Falcor 更快、更容易学习 - 这是事实;-) 而且我已经使用过两者 - 简单性将在长期内获胜,即使 FB 在炒作方面做得很好;-) - PrzeoR
2
那只是一个观点,根本没有回答问题。 - Michał Miszczyszyn
16
我认为这是一个很好的答案,直截了当,技术的学习曲线不一定是主观的,可以很容易地进行测量,这里提供了事实,以便能够得出明确的结论。在现实世界中,认真的专业人士会考虑到这些事实。毕竟这是一个开放性问题,类似这样的回答显然对其有益。 - bmaggi
2
我同意@MorgenCheng的观点,已点赞!在过去几周里,我一直在评估GraphQL/Relay、Cashay、Redux和现在的Falcor,我完全同意PrzeoR的观点。Relay和GraphQL是很棒的技术,但对于新手来说需要更多的脑力和更难理解。需要大量的学习。Falcor的缺点是缺乏完整的基于CRUD的应用示例。我希望看到PostgreSQL和RethinkDB项目输出JsonGraph。 - Dom
显示剩余2条评论

9
简而言之,Falcor、GraphQL和Restful解决的是同一个问题——提供一种有效查询/操作数据的工具。
它们的区别在于它们如何呈现它们的数据:
- Falcor希望您将其数据视为一个非常大的虚拟JSON树,并使用"get"、"set"和"call"来读取、写入数据。 - GraphQL希望您将其数据视为一组预定义的类型化对象,并使用"queries"和"mutations"来读取、写入数据。 - Restful希望您将其数据视为一组资源,并使用HTTP动词来读取、写入数据。
每当我们需要为用户提供数据时,我们最终得到的是:客户端->查询->{一个将查询转换为数据操作的层}->数据。
在与GraphQL、Falcor和JSON API(甚至ODdata)搏斗后,我编写了自己的data query layer。它更简单、更易学,且更接近于GraphQL。

请查看:
https://github.com/giapnguyen74/nextql

它还与featherjs集成,实现实时查询/变异。
https://github.com/giapnguyen74/nextql-feathers


简短而有力。谢谢。 - hien
我同意你的观点。 - Rutger de Groen

2

好的,让我们从一个简单但重要的区别开始,GraphQL是基于查询的,而Falcor则不是!

那么它们如何帮助我们呢?

基本上,它们都帮助我们管理和查询数据,但是GraphQL具有请求/响应模型并以JSON形式返回数据,基本上在GraphQL中的想法是通过一个单一的请求同时获得所有数据... 同时,通过确切的请求获得确切的响应,这样就可以在低速互联网和移动设备(如3G网络)上运行,所以如果您有很多移动用户或出于某些原因需要减少请求并加快响应,请使用GraphQL... 而Falcor与此相差不远,因此请继续阅读...

另一方面,由Netflix开发的Falcor通常需要额外的请求(通常超过一次)来检索所有数据,尽管他们试图将其改进为单个请求... Falcor对查询更加有限,并且没有预定义的查询辅助工具,例如范围等。

但是为了更清晰地说明问题,让我们看看它们各自是如何介绍自己的:

GraphQL,用于API的查询语言

GraphQL是API的查询语言,也是使用现有数据来满足这些查询的运行时。 GraphQL提供了API中数据的完整和可理解的描述,使客户端能够准确地获取所需的内容而不多,简化了随时间演变的API,并启用了强大的开发人员工具。

向API发送GraphQL查询并获得您需要的内容,既不多也不少。 GraphQL查询始终返回可预测的结果。使用GraphQL的应用程序快速且稳定,因为它们控制它们获得的数据,而不是服务器。

GraphQL查询不仅访问一个资源的属性,还可以平滑地在它们之间跟随引用。虽然典型的REST API需要从多个URL加载,但是GraphQL API可以在单个请求中获取应用程序所需的所有数据。使用GraphQL的应用程序即使在慢速移动网络连接上也可以快速。

GraphQL API按类型和字段组织,而不是终点。从单个终点访问数据的全部功能。 GraphQL使用类型以确保应用程序仅请求可能的内容并提供清晰和有用的错误。应用程序可以使用类型来避免编写手动解析代码。


Falcor:一款高效的JavaScript数据获取库

Falcor可以通过虚拟JSON图表示所有远程数据源,使其成为一个单一的领域模型。您可以在客户端内存或服务器网络上编写相同的代码,无论数据位于何处。

类似JavaScript的路径语法使得访问所需的数据变得容易,您可以根据需要获取尽可能多或尽可能少的数据。您可以使用熟悉的JavaScript操作(例如get、set和call)来检索数据。如果您了解您的数据,那么您就了解您的API。

Falcor会自动遍历图形中的引用,并在需要时进行请求。Falcor透明地处理所有网络通信,并机会主义地批处理和去重请求。


我很想知道Falcor的贡献者是否已经改进了这个库,因为他们今天在GitHub上似乎有相同的兴趣。 - Guillaume OSTORERO

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接