【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

Airbnb:我们如何将大部分 API 迁移到 GraphQL

  • 2019-12-12
  • 本文字数:2208 字

    阅读完需:约 7 分钟

Airbnb:我们如何将大部分 API 迁移到 GraphQL

Airbnb 已经成功地将其大部分 API 迁移到了 GraphQL,从而缩短了页面加载时间并提供了更直观的用户体验。在 GraphQL Summit 上的演讲中,Brie Bunge 描述了 Airbnb 多个团队都有使用过的多阶段迁移过程。


在每个阶段完成之后,Airbnb 最终推出了一款基于 Apollo 和 GraphQL 应用程序,该应用程序是 100% 类型安全的,没有过度抓取的问题,并且在整个迁移过程的每个阶段,都能保持着网站的正常运行。因为采用了 Apollo 和 GraphQL 来奠定基础,使 Airbnb 可以尝试新的性能改进,而传统的基于 REST 的架构则无法实现。


在迁移过程开始之前,必须满足两个先决条件。首先,必须在后端设置 GraphQL。Adam Neary 曾写过关于 Airbnb 是如何与 GraphQL 合作的文章


第二个先决条件是在前端采用 TypeScript。在 Airbnb 中,TypeScript 和类型安全促进了更快的开发,并且团队对他们自己所构建的东西更有信心。TypeScript 类型可以直接从 schema 中生成(使用 apollo client:codegen --target=typescript),这些类型在后端和前端之间创建一个单一数据源(single source-of-truth,SSOT)。


TypeScript 现在是 Airbnb 前端开发的官方语言,在他们 300 万行的代码库中,有一半已经迁移到了 TypeScript。Bunge 之前曾在 JSConf 上发表过关于 Airbnb 采用 TypeScript 的演讲


Bunge 说,转换为 GraphQL 有三个主要选项可选。首先,也是最诱人的,是完全从零开始重写。虽然在某些情况下,这作为其他重大项目的一部分经常发生,但这通常不是一个可行的选项。第二个选项是停机并重构,这在小型或单独的团队中可以很好地运行,但在有许多开发人员一起工作的情况下就很困难了。


Airbnb 推荐的迁移选项是渐进式采用,这是最安全且最可行的方法,特别是在拥有大型团队和庞大的已有代码库的情况下。Bunge 所描述的迁移过程包括五个阶段,每个阶段的目标是发布一个可交付的、功能齐全的、无回归的应用程序版本。


第一阶段是改变数据的来源,而不是数据的使用方式。使用 GraphQL 后端和 TypeScript 后, REST 请求就可以与 GraphQL 请求交换。第一个阶段的目标是验证前端到后端的集成是否能正常工作以及 TypeScript 类型生成是否能正常工作。无需变更 React 组件或 API 响应的模型。这需要与 REST 端点匹配的 GraphQL 查询和变异。


Airbnb 早期依赖的两个 GraphQL 特性是别名和适配器。别名实现了 GraphQL 返回的驼峰式属性和旧 REST 端点的蛇形属性之间的映射。适配器用于转换 GraphQL 响应,这样就可以递归地将它与 REST 响应区分开来,并确保 GraphQL 返回与之前相同的数据。这些适配器在后面会被删除,但是它们对于实现第一阶段的对等目标是至关重要的。


第二阶段的重点是整个代码中的传播类型,这将增加后面阶段的可信度。此时,不应影响任何运行时行为。


第三阶段是改进 Apollo 的使用。早期阶段直接使用了 Apollo Client,通过 Apollo Client 触发 Redux 操作,使组件能够使用了 Redux 存储。使用 React Hooks(@apollo/react-hooks)重构应用程序可以使用 Apollo 缓存代替 Redux 存储。


GraphQL 的一个主要优点是减少过度抓取。使用大型查询的第一个阶段保留了旧 REST 端点的所有过度抓取行为,但是第四个阶段可以通过引入更细粒度的查询片段来解决这个问题。


首先,只有应用程序的根组件才能感知到 GraphQL ,并且它必须获取树中任何组件可能需要的所有数据。改进过程从组件树的最低叶节点开始,方法是仅为该子组件所需的数据创建一个 GraphQL 查询。TypeScript 很有用,因为如果所需的字段不存在,它将抛出编译器警告。然后修改父组件以根据其子组件的片段来获取数据。一个“清洗并重复”的过程会遍历所有的叶子节点,然后沿树向上到达应用程序的根组件,在那里旧的大型查询已经被所有组合的片段所替换。因为所有片段都只请求它们所需要的数据,所以消除了过度抓取。


第五阶段,也是最后一个阶段,是阶段管理。一旦将所有组件都迁移到 Apollo,Airbnb 就可以利用 Apollo 来获取 API 数据、React 本地状态或客户端上下文数据。这为处理客户端数据提供了一个一致的心智模型,并对组合了 React 、Apollo 和 Redux 元素的碎片模型进行了改进。它还消除了 Redux 所需的大量样板代码,并且它处理缓存的方式比手动滚动的解决方案更有效。


有了 GraphQL,Airbnb 现在可以尝试新的技术。Bunge 描述的第一种情况是 service worker 查询预取,它是为了尽早启动 GraphQL 查询,以便用户能更快地看到使用数据呈现的页面。


如果没有 service worker,页面在服务端渲染完毕后,用户还需要等待较长时间间隔才能最终看见最终完整的页面。service worker 允许应用程序外壳立即出现,并提供一个加载阶段,在该加载阶段中,页面将从返回数据时开始填充。由于缓存了许多的 JavaScript,页面加载速度也更快。然后,service worker 可以通过从组件级查询切换到路由级查询来实现进一步的改进。基于设备的限制,在页面完全交互之前,这可能还会导致总时间另外再减少 23-50%。


以数据为中心的统一模式是目前正在进行的另一个项目。现有的模式与 Airbnb 面向服务的架构保持一致。由于服务可以通过不同的方式来组合相同的底层数据,因此数据通常是重复的。通过切换到以数据为中心的模式,并在架构中添加数据水化层,可以避免重复的数据请求、删除重复的代码、提高响应效率、并改进缓存。这项工作目前正处于测试阶段,但看起来很有希望,更多的信息将会在明年宣布。


原文链接:


Migrating to GraphQL at Airbnb


公众号推荐:

2024 年 1 月,InfoQ 研究中心重磅发布《大语言模型综合能力测评报告 2024》,揭示了 10 个大模型在语义理解、文学创作、知识问答等领域的卓越表现。ChatGPT-4、文心一言等领先模型在编程、逻辑推理等方面展现出惊人的进步,预示着大模型将在 2024 年迎来更广泛的应用和创新。关注公众号「AI 前线」,回复「大模型报告」免费获取电子版研究报告。

AI 前线公众号
2019-12-12 14:002824

评论

发布
暂无评论
发现更多内容

预付式消费不安全怎么办?区块链技术来了

CECBC

聊聊SpringBoot中的两种占位符:@*@ 和 ${*}

xiaoxi666

maven springboot

你只认识大众汽车的车标怎么能行?赶紧用python采集所有车标学习一下

梦想橡皮擦

12月日更

Android Lottie 中秋月饼变明月动画特效

阿策小和尚

28天写作 Android 小菜鸟 12月日更

给弟弟的信第9封|初入职场攻略

大菠萝

28天写作

🏆视差特效的原理和实现方法

德育处主任

JavaScript 前端 特效 前端特效 css特效

1-8聚合架构第九讲:我们聊聊4个A?

钰湚—付晓岩

企业架构 业务架构 聚合架构

10.《重学JAVA》--控制语句(二)

杨鹏Geek

Java 25 周年 28天写作 12月日更

电商系统微服务架构设计

天天向上

架构实战营

模块六作业

doublechun

「架构实战营」

字典树之旅03.Patricia Trie(一)

极客志

Java 自然语言处理 数据结构 算法 字典树

dart系列之:实时通讯,在浏览器中使用WebSockets

程序那些事

flutter dart HTTP 程序那些事 12月日更

创业合伙人的选择和经营

wood

创业 合伙人 28天写作

【Promise 源码学习】第十七篇 - async/await 简介

Brave

源码 Promise 12月日更

1-7聚合架构第八讲:ADM被骂的冤吗?

钰湚—付晓岩

企业架构 业务架构 聚合架构

Redis 核心原理与实战总结系列

码哥字节

Redis 6.0 技术专题合集

MySql优化:MySQL体系结构及存储引擎总结

秋水

MySQL性能优化 内容合集 签约计划第二季

Servlet的生命周期

JavaEdge

12月日更

如何决定响应式网站的 CSS 单位?

海拥(haiyong.site)

响应式 大前端 28天写作 签约计划第二季 12月日更

MySql优化:详细解读InnoDB存储引擎

秋水

MySQL性能优化 内容合集 签约计划第二季 MySQL InnoDB

成年人除了工作以外,在社会上还要争取什么?

DaemonStone

管理 技术人生 职业发展 人生选择

我们需要一个React框架吗?

RingCentral铃盛

React 框架 分布式应用框架

Android C++系列:Linux网络(四)TCP详解

轻口味

c++ android 28天写作 12月日更

Java代理设计模式(Proxy)的四种具体实现:静态代理和动态代理

Jerry Wang

Java 设计模式 代理模式 28天写作 12月日更

模块二作业

Geek_e6f7f6

架构训练营

区块链,开启智慧养老新时代

CECBC

Quantum Mechanics Is Different

Si Yuan

量子计算

【分布式技术专题】「分布式ID系列」百度开源的分布式高性能的唯一ID生成器UidGenerator

洛神灬殇

唯一ID 12月日更 UidGenerator 服务ID 百度技术

100+行业大牛,Qcon全球软件开发者大会参会记录

看点代码再上班

技术 互联网 软件开发 Qcon

Redis 实战:巧用 Bitmap 实现亿级数据统计

码哥字节

redis BitMap 签约计划第二季

SQL优化和索引

lixiaofeng

SQL优化 索引优化 内容合集 签约计划第二季

Airbnb:我们如何将大部分 API 迁移到 GraphQL_大前端_Thomas Betts_InfoQ精选文章