6月中旬开源中国曾报道过 Facebook
要对 React Native 进行大规模重构,旨在使其更轻量,更具灵活性,更适应
JavaScript 生态圈的发展。现在 Facebook 正式公开了关于重构 React Native
的一些细节和路线图。

译者:Ricky

现阶段,在移动开发中,原生(Native)虽然开发成本很高,但是仍然是必须的,因为Web
App的用户体验仍无法超越原生;
原生(Native)APP开发的优势:

Facebook 对于 React Native 的愿景总体如下:

原文: React Native: A year in
review

  1. Native的原生控件有更好的体验;
  2. Native有更好的手势识别;
  3. Native有更合适的线程模型,尽管Web
    Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性.

成为一个健康的 GitHub 仓库,及时处理 issue 和 PR

时光荏苒,我们开源 React
Native
已经一年了。这个由一小戳工程师发起的一个创意,现在已经作为一个框架被
Facebook 的产品团队广泛使用了。今天,在 F8 大会上我们宣布微软正在把
React Native 引入 Window
生态系统,使开发者能够在
Windows PC, Phone 和 Xbox 平台上使用 React
Native。同时也提供了开源工具和服务,如 Visual Studio Code 的 React
Native 扩展和帮助开发者在 Window 平台上创建 React Native 应用的
CodePush。此外,三星正在使用
React Native 构建它的 Hybrid 平台,这使开发者能够为数以百万计的 SmartTV
和可穿戴设备创建应用。我们也发布了 Facebook SDK for React
Native,这使开发者能够更便捷地在他们的应用中集成
Facebook 的社交属性,比如登录、分享、App 分析和绘图
API。仅在一年之中,React Native
已经改变了开发者们在各大主流平台构建应用的方式。

一: 什么是React Native?

React
Native是Facebook在F8大会开源的JavaScript框架,(2015年9月15日发布)可以让广大开发者使用JavaScript和React开发跨平台的移动应用.在短短不到一年的时间里,它成为手机端必不可少的开发模式之一。
它充分利用了Facebook现有的业务轮子,
其核心设计理念:既拥有Native的用户体验、又保留React的开发效率,目前,React
Native基本完成了对多端的支持,实现了真正意义上的面向配置开发:
开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:Android,
iOS 两端代码的复用,核心设计理念:
既拥有Native的用户体验,又保留React的开发效率.

  • 提高测试覆盖率

  • 同步自 Facebook 代码仓库的 commits 不能违反开源测试的准则

  • 增加更多有意义的社区贡献

这是一个史诗般的旅程——但是,我们才刚刚开始。让我们回顾一下 React Native
自开源一年以来的成长和演化,我们遇到的挑战,以及我们对未来的期望。

二: React Native的特点:

  1. 使用了 Virtual DOM(虚拟DOM)
  2. 提供了响应式(Reactive)和组件化(Composable)的视图组件
  3. 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库.
![](https://upload-images.jianshu.io/upload_images/122816-ff829ce44ba2a6a0.png)

image

拥有稳定的 API,使其可更容易与开源依赖项进行交互

开端:React Native 起源

秉承 Facebook 的黑客文化,React Native 诞生于 2013
年夏天的一个黑客马拉松项目。与
React
相似,React Native
像是一个大胆的非传统的想法。至于它是否能够实际工作,我们并不确定。JS 与
原生 ScrollView
怎样通过触摸来协同工作?性能又如何呢?怎样调试?这些挑战从未停止工程师们专注并前进的脚步。

在我们有了一个可工作的原型之后,我们预期这个项目会赋予 Facebook
很大的潜能。几年前我们把工作重心转向原生移动开发。但是,重新编译代码往往很慢,而且构建
iOS 和 Android 需要不同的技巧。所有这一切意味着低效的产品开发。而 React
Native 的思想意味着,我们可以把 Web
开发中喜欢的所有东西引入到移动开发——比如快速迭代,并且只需要一支团队去开发整个产品。这意味着我们能够前进得更快。

结果,我们决定开始对这个项目投入时间和精力——我们知道,证明这项新技术能够真正工作的唯一方法就是把它丢到一个有难度的项目中去。我们选择了信息流原型,这是早期使用
React Native 构建的项目之一,当时我们还在同时开发 React Native
的基础设施。它的代码后来实际变成了独立 Facebook Groups 应用的基础。

直到 2014 年 7 月,仍然只有少数人在跟进这个项目,这时 React Native
有幸得到了一个大项目:Ads Manager 项目组想开发独立的
iOS应用。但是,他们没有开发 iOS 的经验。这太合适了。接下来是 Ads Manager
产品团队与 React Native
团队几个月的紧密合作。产品工程师们不断打破平台的分界线。目标是第一个完全由
React Native 开发的应用在用户体验上不逊于用 Objective-C 开发的应用。

我们对这项任务的可能行充满自信,随即决定把 React Native
做成跨平台,并在伦敦组建了 Android 团队。其中的三人在 2014
的后半年里编写了大部分核心 Android
运行环境和最初的组件库。我们的目标是在 Android 上运行 Ads Manager 的 iOS
代码,到 2014
年底我们已经跑通了一个基础的版本。虽然它缺少很多视图并且在低端设备上性能表现欠佳,但是你可以看到广告列表了,甚至可以创建一个广告。我们有信心能解决这些问题,于是进一步推进了性能与功能的平衡。

澳门新葡萄京官网注册 1

2015年1月,Facebook Ads Manager 的 iOS 基础代码运行在 Android 上。

Facebook Ads Manager 的 iOS
版本于2015年2月发布,研发时间不到6个月。同时,大家都在关注在开源 iOS
项目上实现 JS 或 iOS。在2015年1月的 React.js
大会上,我们发布了公开预览版,随后在3月的
F8
开发者大会上,我们把它开源了澳门新葡萄京官网注册,。

随即,Ads Manager 的产品工程师与伦敦的 Android
团队紧密配合,开始把他们的 JavaScript 代码向 Android 移植。在开发 Ads
Manager 的 iOS 版时,我们的目标不是平台间的代码共享,而是期望这能对使用
React Native 有积极影响。然而当 Andriod 版 Ads Manager
准备发布时,我发现两个应用之间复用了 85% 的代码。

2015年6月,在经过3个月的开发和1个月的内测后,第一个 Android 版本的 Ads
Manager
发布了。有了
React Native 的 iOS 版的成功,我们马上着手准备 React Native 的 Android
版,我们预期会引起大家的强烈兴趣。毕竟,不得不为不同平台单独开发应用是业界的一个问题。从
Ads Manager 的开发经验中,我们知道 React Native 能够解决这个问题。

与 iOS 发布类似,我们想尽快得到 Android
版的反馈。为此,我们只开发了核心运行环境和少数视图与模块(Text, Image,
ScrollView, Network, AsyncStorage等等)。9月14日,我们在 GitHub 和 npm
上发布了核心的 Android 运行环境和初始 Android 模块集。React Native 0.11
也成为了第一个支持 Android 的版本。自开源起,我们已经添加了与 iOS
对应的如下 Android 模块:Alert, AppState, CameraRoll, Clipboard, Date 与
time pickers, Geolocation, Intent, Modal, NetInfo, Pull to refresh view,
Picker, Slider, View Pager, WebView。

不必多言,被 Facebook 以外的团队采用让 React Native
团队的所有人都异常激动。

澳门新葡萄京官网注册 2

React Native 从开始到 Android 版发布的里程碑。

三: React Native的优势:

  • Facebook 使用与开源版本相同的公共 API

  • React Native 将遵循语义化版本的标准

快速接纳:一年的学习与成长

React Native 被接纳的程度以及开发者社区成长的速度比我们想象的快得多。

超过 650 人向 React Native 代码库提交了代码。在5800余次的提交中,30%
的贡献者不在 Facebook 工作。2016年2月,外部贡献者的提交首次超过了
50%。大量社区人民对 React Native
贡献代码,我们看到的是平均每月266次的PR(pull
request)(每天多达10个)。其中很多是高质量的,并且实现了广泛使用的功能。

澳门新葡萄京官网注册 3

React Native 在 GitHub 上每月开放状态 PR 的数量。

起初,PR 的数量使快速和高效的审查变得很困难。寻找每个 PR
的审查者意味着每天大量的人肉工作。为了解决这个问题,我们使用了两个
GitHub 机器人来尽量使每件事自动化。

第一个是提及机器人(mention bot),它负责为每个 PR 寻找正确的审查者。

澳门新葡萄京官网注册 4

提及机器人根据责任信息找到每个 PR 的最佳审查者。

提及机器人现在已经开源,帮助我们精简每天要审查多少个
PR。一个有趣的事实是上个月超过 50%
由社区贡献的提交,机器人总能在社区中找到最好的审查者。

我们遇到的第二个问题是合并 PR 并不简单。Facebook 工程师使用的 React
Native 代码与你在 GitHub 上看到的一模一样,我们并没有 fork
代码库。因此,我们会在把你的 PR 合并到我们称之为
fbsource
的庞大 Mercurial 仓库之前,自动测试像 Facebook Ads Manager 这样的应用。

澳门新葡萄京官网注册 5

我们称之为 fbsource 的庞大 Mercurial
仓库的简单结构。这个仓库包含了我们的移动和后台代码。

合并 PR 的过程通常包含几个人工步骤。我们通过发表一条 GitHub
上的评论简化了这一切。

澳门新葡萄京官网注册 6

@facebook-github-bot shipit:如果所有内部测试通过,代码会同时合并到
fbsource 主干和 GitHub 主干。

多亏这些工具,这个项目能够适应大量的 PR。一年里,总共关闭了 2351 个 PR。

澳门新葡萄京官网注册 7

每月关闭 PR 的数量。

1. 跨平台开发

运用React
Native,我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端,Android端和iOS端;

打造充满活力的生态系统,社区将会提供并维护高质量的 ViewManagers,
native modules 和多平台支持

管理 GitHub 问题

这个项目的流行创造了一种环境,每个人都潜移默化地想帮助我们管理庞大的处于开启状态的问题。

我们实现了另一个机器人,它能帮助任何人管理 GitHub
问题。它使任何人能够关闭重复问题,回答并关闭问题,添加标签等等。你也可以参考
GitHub
问题管理指南。

澳门新葡萄京官网注册 8

问题机器人能让任何人管理 GitHub 问题,不需要访问权限。

React Native 的 API 涉及面很广。它为 JavaScript 暴漏了大部分 iOS 和
Android 的构建模块,同时增加了跨平台的抽象类。对任何人来说熟悉所有 API
是一个挑战。甚至许多使用 React Native 的 Facebook
产品团队也不能总是在你之前覆盖到所有的边界条件。React Native
在为我们服务,但我们不能独自完善它。这就是为什么拥有一个熟悉底层代码的社区如此重要,不仅对我们,也对其他参与其中的广泛生态圈,他们依赖此成就他们的应用、服务和第三方模块。

2. 追求极致的用户体验

实时热部署

提供优秀的文档。专注于帮助用户创建高质量的体验,以及最新的 API
参考文档

社区合作者

React Native
开源合作者是一群在社区中贡献高质量补丁和乐于帮助他人的人们。我们已经为这些帮助我们推进项目的人们授予
React Native 社区合作者称号。这项殊荣附带了仓库的访问权限。

我想对这些 React Native 社区合作者大声说,感谢你们杰出的贡献:Adam
Miskiewicz,
Alexey
Kureev,
Brent
Vatne,
Chirag
Jain,
Christopher Dro,
James Ide, Janic
Duplessis,
Joshua
Sierles, Kyle
Corbitt,
Krzysztof
Magiera, Leland
Richardson,
Mike
Grabowski,
Satyajit
Sahoo。

2016年2月22日,我们其中一些成员在旧金山 React.js 大会上:

澳门新葡萄京官网注册 9

图中(从左至右):Christopher Dro (React Native Playground), Brent Vatne
(Exponent), Jean-Richard Lai (TaskRabbit), Eric Vlad Vicenti (React
Native team), Dave Sibiski (React Native Playground), James Ide
(Exponent), Martín Bigio (React Native team), Tadeu Zagallo (React
Native team), Christopher Chedeau (React Native team), Ken Wheeler
(Formidable), Leland Richardson (Airbnb), and Martin Konicek (React
Native Team)。

3. learn once,write everywhere

接下来看看 Facebook 将会执行的一些具体计划 ——

今天的 React Native

React Native
每两周发布一个新版本。这样你就能在代码提交到主干后快速获取最新的属性。2016年3月代码在
npm 上被下载了 70000 次。拥有了 30000 个 star,React Native 在 GitHub
上排名第 21 位。

澳门新葡萄京官网注册 10

GitHub star 数量从 0 到 30000 只用了一年。

4. 社区活跃,除了Facebook之外,GitHub上有很多第三方的团队、个人、公司开发贡献了很多非常优秀的第三方组件,它的社区是非常健康、非常活跃的。

React Native不强求一份原生代码支持多个平台,Java的是(Write once, run
anywhere)

React Native 开发团队表示他们的目标是通过删除非核心和无用的组件来简化
React
Native ——
将非核心组件交由社区维护,使其迭代发展更快,此举亦将更方便对与 React
Native
相关的贡献进行管理。目前已决定将数十个组件的所有权移交给社区。

社区使用 React Native 做了什么

在 iOS 版发布当年,就有不少应用发布到 App Store,随后高质量的 Android
应用也开始出现了。这个网站上列出了使用
React Native 开发的 107
个应用案例。如果想添加你的应用,请在这里申请。

澳门新葡萄京官网注册 11

有很多高质量的应用被收录进了博客。查看案例看看我们都收录了哪些。

除了应用之外,还有多种服务构建在 React Native
之上:Exponent
能让你无需编译就能创建和分享 React Native 应用;React Native
Playground
能让你在浏览器里编辑和运行 React Native
应用;AppHub 和 微软
CodePush
能让你无需经过 App Store
就立刻部署代码;JS.coach
是一个第三方模块数据库;Deco
是一个 React Native 的 IDE。

第三方模块的生态系统正在增长,你可以轻易地把它们集成到你的应用。多亏了
JS.coach,使模块很容易检索,感谢
rnpm,使安装模块变得简单。

已经有惊人数量的关于 React Native
的博客和教程。感谢你们所有的人,让它们来得更猛烈些吧。我们将重点关注
Brent Vatne 的 React Native
Newsletter,它总结了发生在
React Native 周围的每件事,并且有大量很棒的博客链接。

别忘了还有三本关于 React Native
的书籍。

总之,一年之中发生了很多事情!

React Native的劣势:

开发团队表示WebView就是将非核心组件交由社区维护的一个实例,他们还正在打造一个工作流
—— 即便他们从仓库删除这些组件后,内部团队开发者仍可继续使用。

React Native 在 Facebook

越来越多的 Facebook 产品团队使用 React Native
来构建新的功能和应用。它被使用在独立的应用中,以及 Facebook 主要应用的
iOS 和 Android 版本。

澳门新葡萄京官网注册 12

Facebook Groups 是一个混合模式应用,其中信息流使用了 React Native。

React Native
团队在过去一年中从10人增长到了20人,在门洛帕克、伦敦和纽约都表现出色。自从
Ads Manager 发布,团队主要关注的领域是:

  • 提升性能,如开启时间、响应和滚动性能。请看 React Native
    性能表现

    时间表。
  • 在 iOS 和 Android 平台上,把 UI 与 Facebook 主要应用的基础架构集成。
  • 开发性能工具,如 CPU 和 内存分析。
  • 开发 Facebook 产品团队提出的新功能。
  • 以快速回答问题和修复缺陷的方式支持产品团队。
  • 开发经验积累,比如把内部开发者工具和构建系统集成。

1. RN框架原生并不支持Web端;

为了这次的大规模重构,同时兼顾内部和外部开发体验的重要性不言而喻。须知道,React
Native
开发团队使用的是内部开发工具,开发体验可能与开源维护者的完全不同,那些在开源社区备受欢迎的工具可能并没有被
React
Native 开发者使用,而这种内外差异很大程度会给他们接下来的重构工作带来挑战。

前瞻

在去年这个项目赚足了眼球,而我们在 Facebook 通常这么讲:我们才完成了
1%。我们会在内部持续投入这个项目。经过去年,团队数量已经翻倍。我们也会持续投入开源工具。我们希望
React Native 在 Facebook 内部和外部都是一个成功的项目。

这里有一些参与到项目中的最好方式:

  • 如果你发现了一个 bug,请发起一个修复。带有测试计划的小 PR
    会最快得到审查。
  • 如果你发现文档中有不清楚的地方,请以 PR 的方式提出改进。

  • StackOverflow
    提问和回答。
  • 通过 GitHub 的问题来帮助别人。
  • 如果你提出一个新功能,最好的方式是把它发布到 Product
    Pains,它是一个投票系统。如果你自己没有时间去实现它,它仍然可能通过足够的投票来由他人去实现。
  • 加入 Facebook 的 React Native
    社区

如果你是 React Native
的新手,我们已经准备了一系列的教程来介绍框架和它的开源生态系统。使用今年的
F8
应用作为一个例子,我们展示了如何去设计一个多平台应用,集成数据并测试应用,以便你改进正在编写的代码。

感谢使用 React Native
创建神奇应用,以及在它基础上构建工具和服务的每个人,你们编写了第三方模块,帮助释疑解惑,提交
PR,组织会议,撰写博客——继续加油吧!

期待明年!

2. RN框架官方并不支持热更新;

为此,他们开源了一些内部使用的工具,并表示将改进对流行于开源社区的工具的支持。

3. Facebook给出的官方RN API不能完全满足业务快速的发展,它只给了一些很基础的API,但业务中经常会用到的一些多媒体,比如录音、录像、视频播放文件以及文件上传、压缩、加密等等,这些都没有提供。

  • 开源 JSI 并让社区能够使用自己的 JavaScript VMs,从 RN
    的初始版本中替换现有的 JavaScriptCore。有关 JSI
    的信息,他们未来会在博客中公布,现在可以通过React Conf
    大会上的演讲视频了解更多细节

  • 支持 Android 平台上的 64 位库

  • 支持在新的架构下进行调试

  • 改进对 CocoaPods, Gradle, Maven 和新的 Xcode 构建系统的支持

4. 尽管RN框架性能非常不错,比H5好很多。实际上经过真正的业务开发后,发现90%的场景下RN的性能非常棒,可以满足我们的业务需求;但是在另外的10%的场景下,特别是一些交互非常复杂、页面非常复杂、需要频繁的更新、需要一些手势交互的场景,RN仍有些内存跟性能的瓶颈。

除了打通内外部的开发体验,React Native
开发团队表示还会加强社区内部的沟通。React Native 是 GitHub
上贡献者数量最多的开源项目之一,未来他们将继续推出鼓励贡献者积极参与贡献的举措,例如提高透明度和增加公开讨论的机会。对于新手而言,文档是一个十分重要的问题,因此开发团队表示将会创建自动生成的
API
参考文档,并改进发行说明,以改善用户体验。

4. 以下是react-native 原理图

澳门新葡萄京官网注册 13

image

最后,开发团队表示这些工作将在明年完成,其中一些工作已在进行中,例如已开源的
JSI
项目。其他的一些改进如简化
React
Native,还需要更多的时间去完成,开发者有任何问题可以在提案中进行讨论。

四: React Native开发注意事项:

1.最新版的React Native仅支持iOS 8.0 以上, Android仅支持Android 4.1
以上的版本

2.初学者建议选择:

  • 功能适中,交互一般,不需要特别多的系统原生支持;
  • 对于部分复杂的应用,可以考虑原生+React Native混合开发

github地址:
https://github.com/facebook/react-native

英文官方文档:
http://facebook.github.io/react-native/docs/getting-started.html

中文文档:
https://reactnative.cn/

参考:

三端解决方案

蚂蚁金服: https://mobile.ant.design/index-cn

(文/开源中国)