Instagram 使用 React Native 的情况

本文翻译自 Instagram Engineering 发布的 React Native at Instagram

---

React Native 自从 2015 年开源以来，已经走过了漫漫长路。仅仅两年后，它已经不仅被用于 Facebook 和 Facebook Ads Manager， 还用于很多其他公司，从财富 500 强公司到热门的创业公司 。

开发速度定义了 Instagram 移动端的价值的一方面。2016年初，我们开始探索使用 React Native，使产品团队通过代码重用和快速迭代 更快地发布功能，使用 Live Reload 和 Hot Reloading 等工具，省去编译安装的时间。

挑战

将 React Native 集成到现有的 native app 中会带来额外的工作和挑战，但如果从头开始写就不会遇到这个问题。考虑到这一点，我们决定先移植我们可以想到的最简单的视图：推送通知视图。这个视图最初被实现为一个 WebView，所以我们觉得在一开始搞定它并不会太难。最重要的是，这个视图不需要我们建立很多导航结构——UI 很简单，翻译由后端确定。

Android 方法计数

出现的第一个问题是把 React Native 添加为一个依赖，而不是直接拖入整个库。否则不仅会增加包的大小，而且会对方法计数产生很大的影响，导致 Instagram for Android 的所有性能结果都是多指的（Instagram仍然是单指令！）。我们最终选择性地只拖入我们当时需要的视图管理器，然后自己实现那些不想拖入的依赖库。最终，React Native 添加了大约 3500 个方法。用 React Native 编写的功能几乎不需要定义 Java 方法，因此我们相信这种投资在长期内是值得的。

指标

作为推送通知设置实验的一部分，我们审核了 React Native 对多个指标的影响，包括崩溃和内存溢出。我们发现这些指标在实验开始时和用户离开 React Native 功能时都保持中间值（因此下次进入时我们不必重新创建它）。

启动性能

React Native 有一个启动开销，主要是由于必须将 JavaScript 包注入JavaScriptCore（React Native 在 iOS 和 Android 上使用的 VM）并实例化本机模块和视图管理器。虽然 React Native 团队在 提高性能方面 取得了很大进步，但对于 Instagram 的集成，我们希望衡量这种差距，来判断这种权衡是否真的有意义。为此，我们将现有的 native Edit Profile 视图移植到 React Native。我们构建了产品基础架构，开始被产品团队并行使用（例如导航，翻译，核心组件）。

我们最终利用了 React Native 团队已经构建的想法和基础，即Random Access Module Bundling，Inline Requires，Native Parallel Fetching 以及已经集成到框架中的大量内容。

产品

如上一节所述，Core Client 团队将推送通知设置和 Edit Profile 视图移植到 React Native。我们还移植了 Photos Of 视图，查看使用 React Native 加载列表时的性能：

除了这些例子，还有几个产品团队发布了 React Native 的其它功能。

推广文章

Instagram 有一个轻量级界面，用于宣传推广文章。此产品最初实现为 WebView，因为该技术允许团队比 native 代码更快地迭代。WebView 的问题是，UX 不觉得 native 的启动非常缓慢。销售团队将此功能移植到 React Native，并在启动时间和用户体验方面取得了极大的改进。值得一提的是，尽管这是一个非常复杂的创建流程，它只添加了 6 个方法到 Android DEX 中。

YouTube 视频：Post Promote

保存

每个月有超过 6 亿人来到 Instagram，联系他们的朋友的同时发现了大量基于兴趣的灵感。然而，他们并不总是想在发现的时候就立马做什么，而是想在以后再回顾这个内容。为了满足这个需求，Save 团队实现了对 保存帖子 的支持，想回顾的时候就直接打开一个新的、私人的 tab，出现在个人资料上，但只对自己可见。

Save 团队用 React Native实现了 iOS 版本的保存帖子列表。

验证码

验证码是从服务器触发的流量，以响应可疑操作（例如：当需要验证电话号码时，我们就认为您的账户已被盗用，等等）。

过去，验证码已使用 WebView 实现。如前所述，WebView 适用于代码重用和快速迭代速度，但 UX 没有发现 native 和启动时间可能很慢。

Protect and Care 团队开始着手改进其中一些流程。他们决定使用 React Native 来实现代码重用，同时保持良好的用户体验和快速启动时间。

评论审核

我们希望 Instagram 是一个安全的地方，每个人都可以捕捉和分享他们最重要的时刻。随着 Instagram 社区的发展和来自世界各地的人们分享更多的内容，我们希望努力工作以保持 Instagram 的积极和安全，尤其是您的照片和视频的评论。考虑到这一目标，Feed 团队推出了一项功能，允许用户审核他们在帖子上发布的评论。

Lead Gen Ads

Lead Gen Ads 是一个界面的称呼，允许用户与广告客户共享信息。广告客户可以自定义此界面上的表单。

结果

React Native 允许产品团队更快地将功能发布到 iOS 和 Android app。下面的列表显示了一些产品的 app 之间重用代码百分比，可用作衡量提高开发人员的速度：

• 推广文章：99%*
• 短信验证码：97％
• 评论审核：85％
• Lead Gen Ads：87％
• 推送通知设置：92％

补充

我们最近将移动端基础架构开发团队（ iOS 和 Android ）搬到了纽约市。如果这篇博文让你对我们正在做的事感到兴奋，我们正在招聘——请查看我们的 招聘页面 。

Martin Bigio ， Don Yu ， Brian Rosenfeld 和 Grace Ku 是 Instagram 纽约 Core Client 团队的软件工程师。