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 BigioDon YuBrian RosenfeldGrace Ku 是 Instagram 纽约 Core Client 团队的软件工程师。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容