React Native在Instagram的使用经验

React Native自从2015年开源以来已经走过了很长的路。不到两年后，它不仅在Facebook和Facebook广告系统中使用，而且还在许多其他公司从财富500强公司到热门新创公司中使用 (这里)。

开发者的效率是Instagram移动工程的一个价值标准 。 在2016年初，我们开始探索使用React Native，它使得产品团队能够通过代码共享和更高的迭代速度更快地发布功能 ，使用Live Reload和Hot Reloading等工具，消除了以往的编译安装周期。

挑战
将React Native集成到现有本机应用程序中可能会产生挑战和额外的工作，而当您从头开始开发一个应用程序时则不会遇到。 基于这点考虑，我们决定开始探索这些挑战，首先移植最简单的视图： 推送通知视图。这个视图最初被实现为一个WebView，所以我们认为它不会太难实现。最重要的是，这个视图不需要我们建立很多导航基础设施 - UI很简单，内容由服务器决定。

Android方法计数
碰到的第一个问题是添加React Native作为依赖项，而不是拉入整个库 。 这样做就不仅会增加二进制大小，但是会对方法数量方面产生巨大影响，使得我们的Android应用都带有性能影响的multi-dex（Dalvik Executable (DEX)文件的总方法数限制在65536以内,超过这个数目就要使用使用MultiDex，Instagram仍然是single-dex！ ）。我们最终只选择性地提取我们当时需要的视图管理器 ，并编写我们自己的实现，依赖于我们不想引入的库。最后，React Native最终只添加了〜3500个方法。 用React Native编写的特性几乎不需要再定义安卓的任何Java方法，因此我们相信这种投资将是值得的。

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

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

我们最终都利用了我们的React Native团队已经构建的设计和基础库，它们是随机访问模块捆绑 、内联需求、本机并行获取以及其它已经集成到框架中的大量内容。

产品
如上一节所述，Core Client团队将“推送通知设置”和“编辑个人资料”视图都移植到React Native。 我们还移植了“视图照片”，以便在使用React Native为列表加载时提升显示性能：

除了这些示例，其它几个产品团队已经发布了React Native中的功能。

发布推广
Instagram有一个轻量级界面，用于称为Post Promote用来宣传推荐帖子 。此产品最初实现为WebView，因为该技术允许团队比本地代码更快地迭代。 WebViews的问题是，UX不感觉它是原生应用，启动是非常缓慢。 promote小组将此功能移植到React Native，并在启动时间和用户体验方面取得了极大的改进。 值得一提的是，尽管这是一个非常复杂的创作流程， 它只添加了6种方法到Android DEX。

保存
每个月有超过6亿人来到Instagram，在与他们的社区联系的同时，发现了大量的基于兴趣的灵感。 然而，他们并不总是准备好在发现的时刻对这个灵感采取行动，并且通常希望以后当他们准备好时重新访问这个内容。 为了满足这种需求，Save团队实现了对保存帖子的支持，并在他们想要获得时，通过他们的个人资料上只有他们可以看到的新的私有标签实现重新访问。

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

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

历史上，检查点是使用WebViews实现的。 如前所述，WebViews适合代码共享和快速迭代速度，但UX用户体验方面不会感觉到时原生应用且启动时间可能很慢。

Protect 和 Care 小组开始着手改进其中一些流程。 他们决定使用React Native来利用代码共享，同时保持良好的用户体验和低启动时间。

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

Lead Gen Ads
Lead Gen广告是一种号召性用语，允许用户与广告客户共享信息。 广告客户可以自定义此表面上的表单。

结果
React Native允许产品团队更快地将上述功能发布到我们的iOS和Android应用程序。 下面的列表显示了一些产品的应用程序之间共享的代码百分比，可用作参考来衡量我们如何提高开发人员的速度：
文章推荐：99%
短信验证码：97％
评论审核：85％
Lead Gen主要内容广告：87％
推送通知设置：92％

原文：React Native at Instagram
[该贴被banq于2017-02-07 11:06修改过]
[该贴被banq于2017-02-07 11:06修改过]