加载中

It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing React Native to the Windows ecosystem, giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition,Samsung is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the Facebook SDK for React Native, which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.

It's been an epic ride — but we are only getting started. Here is a look back at how React Native has grown and evolved since we open-sourced it a year ago, some challenges we faced along the way, and what we expect as we look ahead to the future.

我们开源 React Native 已经有一年了。一开始只是少数几个工程师的想法,现在已经是整个Facebook甚至其他公司的产品团队使用的框架。在今天的F8大会上我们宣布,微软正在将 React Native引入到Window生态系统  , 让开发者可以在Windows PC, Windows Phone和 Xbox上构建React Native。它还会提供开源的工具和服务如Visual Studio Code和CodePush上的React Native扩展工具,帮助开发者在Windows平台上创建React Native应用。另外,三星 在为其混合平台构建React Native,以便让开发者能够在数百万的智能电视、手机和可穿戴设备上构建应用。我们也发布了 React Native 的Facebook SDK,以便让开发者更容易地集成Facebook的社交功能如登录、分享、APP统计和Graph API到他们的应用中。一年来,React Native 改变了开发者在各大平台构建应用的方式。

这是史诗般的旅程;但我们才刚刚开始。以下是对我们一年前开源它以来,React Native如何成长和演变、一路上我们面临的挑战的回顾,以及我们对未来的期待。

In the beginning: React Native's roots

In the essence of Facebook's hacker culture, React Native started as a hackathon project in the summer of 2013. Similar to React, React Native seemed like a boldly unconventional idea. It wasn't clear this would actually work. How was touch negotiation between JS and native ScrollViews going to work? What about performance, and what about debugging? None of these challenges stopped the engineers from focusing and pushing forward.

Once we had a working prototype, we anticipated that the project had a ton of potential for Facebook. A few years ago we made a major shift to native mobile development. However, recompiling on every code change was slow, and separate sets of skills were needed to build for iOS and Android. All of this meant slower product development. The idea of React Native meant we could bring all the things we loved about developing for the web — such as fast iterations and having a single team build the whole product — to mobile. It meant we could move faster.

开端:React Native的根

在Facebook黑客文化的精髓中,React Native作为一个黑客马拉松项目,始于2013年的夏天。与React相似,React Native看起来同样是一个大胆的别出心裁的想法。当时还不清楚它的实际工作。JS和本地滚动视图是如何协同工作的?性能怎么样,调试又如何?所有的这些挑战都没能阻止工程师们关注它以及推动它向前的脚步。

当我们拥有了一个产品原型后,我们预料到这个项目对于Facebook来说具有很大的潜力。几年前我们向本地移动开发做出相应重大转型。然而,每一次代码变动所带来的增量编译是缓慢的,所以我们需要分离出一套可以构建iOS和Android应用的技术。所有的这些意味着产品开发会更慢。React Native这个想法意味着我们可以把所有我们喜欢的带到网络开发过程中——比如快速迭代以及拥有单独团队构建整体产品——为移动设置。它将意味着我们能更快速地改变。

As a result, we started investing time and energy into the project — we knew the only way to prove that the new technology really worked was to throw hard problems at it. We chose a News Feed prototype, which was one of the first projects we built with React Native while still developing React Native's infrastructure. That code eventually became the basis for the feed used by the standalone Facebook Groups application.

By July 2014, there were still only a few people working on the project when React Native got its first big job: the Ads Manager team wanted to build a standalone iOS app. However, they didn't have engineers with iOS experience. This was a perfect fit. What followed were a few months of very close collaboration between the Ads Manager product team and the React Native team. The product engineers were constantly pushing the boundaries of the platform. The goal was no smaller than to ship the first fully React Native-powered app where the user experience was identical to an app built in Objective-C.

这样一来,我们就开始在项目中投入时间和精力——我们知道唯一证明新技术确实不错的方法就是让其解决困难问题。我们选择了一个动态消息模型,它是我们利用React Native构建的第一个项目,在此同时我们也正在开发React Native基础框架。该代码最终成为了被独立Facebook群组应用所使用的基础数据。

到2014年7月,仍然只有少数人致力于该项目上,而此时React Native获得了它第一个重大任务:广告管理团队希望构建一个独立的iOS应用。然而,他们并没有iOS开发经验的工程师。看来这正是一个完美的解决方案。在接下来的几个月中,广告团队与React Native团队有着紧密的合作。产品工程师也在不断推广该平台。我们的目标是利用React Native构建出来的应用给用户带来的体验不差于原生Objective-C构建的应用。

Once we felt confident this task was possible, we made a decision to make React Native cross-platform and start a React Native Android team in London. The then team of three wrote most of the core Android runtime and first components during the second half of 2014. The goal was to run the iOS Ads Manager code on Android, and by the end of 2014 we had a bare-bones version of the app running. It was missing many views and performance wasn't great on low-end devices, but you could see the list of ads and even create one. We were confident we could make this work so we made a push for performance and feature parity.

Facebook Ads Manager iOS codebase running on Android, January 2015.

The Facebook Ads Manager for iOS shipped in February 2015, less than six months after the team started working on it. Concurrently, everyone whose main focus was on JS or iOS worked on open-sourcing the iOS implementation. In January 2015 at React.js Conf, there was a first public preview, and at our F8 developer conference in March 2015, we opened the code to everyone.

当我们对该任务成为可能充满信心后,我们决定让React Native实现跨平台并且在伦敦成立了一支React Native的Android团队。在2014年的下半年期间内,当时的三人小组编写了运行在Android平台上的大部分核心代码以及第一个组件。当初的目标就是在Android平台上运行iOS版本的广告管理代码,而且在2014年年底我们拥有了一个能够运行的基本版本。虽然它缺乏很多视图而且在低端设备上的性能不是太好,但你还是可以看到广告列表以及创建一个广告。我们还是有信心能使其性能以及功能更好。

Facebook iOS广告管理代码库运行在Android平台上,2015年1月。

2015年2月份,iOS平台上的Facebook广告管理应用发布了,此时距团队开始运作不足六个月。与此同时,每一个人都主要关注于运行在iOS开源项目实现上的JS和iOS。在2015年1月份,我们拥有了第一个公开预览版本的React.js Conf,而且在2015年3月份的F8开发者大会上,我们对外公开了这些代码

Immediately after that, the Ads Manager product engineers started porting their JavaScript code to Android, working very closely with the React Native Android team in London. We didn't aim for code sharing between platforms when working on the iOS Ads Manager but expected it could be a nice side effect of using React Native. When the Android Ads Manager was ready to ship, we realized that about 85 percent of the code was shared between the two apps.

In June 2015, after about three months of development and a month of internal dogfooding, the first version of the Android Ads manager shipped. Given how React Native for iOS took off, we immediately shifted our focus to open-sourcing React Native for Android, and we anticipated strong interest for the Android launch. After all, having to build the same app separately for each platform is a problem in the industry, and we knew from experience with the Ads Manager that React Native could help with it.

很快,Ads Manager产品工程师开始将JavaScript代码移植到Android,跟伦敦的React Native Android团队紧密合作。在开发iOS版的Ads Manager时,我们并没有打算在各平台共享代码,但也预期使用React Native会有不错的额外效果。当Android版 Ads Manager准备上线时,我们发现两个APP之间大约有85%的代码是共用的。 

2015年6月,经过大约3个月的开发和一个月的内部测试, Ads manager第一个Android版发布了。有了iOS版React Native成功的先例,我们立即把焦点移到Android版React Native的开源上,并预料到大家对Android版发布的强烈兴趣。毕竟,为同一个应用构建不同平台版本是个业界难题。我们从Ads Manager的经验也知道React Native可以帮助解决这个问题。

Similar to the iOS launch, we wanted to get React Native for Android out as early as possible to get feedback. Therefore, we started with only the core runtime and small number of view and modules (Text, Image, ScrollView, Network, AsyncStorage, and a few others). On September 14, we pushed the core of the Android runtime and an initial set of Android modules to GitHub and npm. And just like that, React Native version 0.11 was the first release with Android support. We've added the following Android modules since we open-sourced it, bringing the API parity close to iOS: Alert, AppState, CameraRoll, Clipboard, Date and time pickers, Geolocation, Intent, Modal, NetInfo, Pull to refresh view, Picker, Slider, View Pager, and WebView.

Needless to say, the adoption that followed outside of Facebook has made all of us on the React Native team extremely excited.

Timeline of the progress since the inception of React Native until open-sourcing React Native for Android.

与iOS版本发布相类似,我们同样希望尽可能早的推出Android版本的React Native已获得反馈。因此我们一开始只仅仅拥有核心执行代码和少量的视图、模块(文本,图片,滚动视图,网络,同步存储,和其他一些)。在9月14号,我们在GitHub、npm中上传了Android版本的执行代码和最初的一套Android模块。正因为此,React Native 0.11成为了第一个正式发布并支持Android平台的版本。自从我们开源了React Native项目后,采用了与iOS平台等同的接口,并且增加了以下几种Android模块:警告、应用状态、摄像头切换、剪切板、日期时间选择器、定位、意向书、模型、网络信息、刷新页面、选择器、滚动条、和Web视图。

不用多说,让React Native团队上下都异常兴奋的就是它被Facebook之外的团队所采纳。

时间轴——React Native项目初期至发布Android平台上的React Native开源项目。

Rapid adoption: A year of learning and growth

The adoption of React Native and its developer community have both grown much faster than we had expected.

Over 650 people have committed code to the React Native codebase. Out of the 5,800 commits to the codebase, 30 percent were made by contributors who don't work at Facebook. In February 2016, for the first time, more than 50 percent of the commits came from external contributors. With so many people from the community contributing to React Native, we've seen as many as 266 new pull requests per month (up to 10 pull requests per day). Many of these are high-quality and implement widely used features.

Number of pull requests opened on the React Native GitHub repo each month.

In the beginning, the number of incoming pull requests made it difficult to review them quickly and efficiently. Finding the right reviewers for each pull request meant lots of manual work every day. To solve this, we automated everything that we could by building two GitHub bots.

迅速采纳:一年的学习和成长

React Native技术被采纳的程度以及开发者社区的建设都有了超出预期的成长。

已经有超过650人为React Native代码库贡献过代码。在5800次代码贡献中就有百分之三十都是由那些并未在Facebook工作的人员贡献的。到2016年2月份,由这些非Facebook工作人员贡献代码的次数首次超过了百分之五十。有了这些社区人员为React Native贡献代码,我们看到每个月都会有多达266个新用户拉取React Native的代码(每天多达10次)。其中许多功能是高质量和被广泛实施使用的。

月报告——GitHub上React Native项目被拉取代码的请求数量

刚开始时,我们很难快速有效地检阅拉取代码的增加次数。为每一个拉取请求都找到合适的检阅人员就意味着每天需要很大的手动工作量。为了解决这个问题,我们通过在GitHub上创建了两个机器人来自动化这一切。

The first was the mention bot, which finds the right reviewers for each pull request.

The mention bot finds the best reviewers for a pull request based on blame information.

The mention bot, which is now open-sourced, helped streamline how many pull requests we could review each day. An interesting fact is that with over 50 percent of the commits last month contributed by the community, the bot often identifies people in the community as best reviewers.

The second problem we had was that merging pull requests wasn't easy enough. Facebook engineers use the exact same React Native code you see on GitHub; we don't have a fork of the codebase. Therefore, we automatically test apps like the Facebook Ads Manager before merging your pull request to our large Mercurial repo called fbsource.

Simplified structure of our monolithic Mercurial repo called fbsource. The repo contains all our mobile and backend code.

The process of merging a pull request used to involve several manual steps. We simplified all of this to typing a single comment on GitHub.

@facebook-github-bot shipit: If all internal tests pass, the code is merged to fbsource master as well as GitHub master.

Thanks to these tools, the project has been able to keep up with the very large number of incoming pull requests. In total, 2,351 pull requests have been closed in just a year.

The number of open pull requests closed each month.

这第一个问题就是mention-bot,它为每一个拉取代码的请求寻找合适的审核人员。

这个mention-bot会根据责任信息(blame information)找到最佳的审核人员。

现在已经成为开源项目的mention-bot可以帮助我们精简出一些拉取代码的请求,以供每天能够去审核。一个有趣的事情是,在上个月已经有超过百分之五十的代码贡献来自于开发者社区,机器人往往会从社区中找到最佳的审核人员。

第二个问题就是合并那些拉取代码的请求不是那么容易。Facebook的工程师使用的React Native代码与你在GitHub上看到的完全相同;这个代码库上我们并没有独立分支。因此,在把你拉取代码的请求合并进入到我们那个叫做fbsource的强大的Mercurial(轻量级分布式版本控制系统)仓库中之前,我们会像Facebook广告管理人员一样随机测试这款应用。

fbsource是我们庞大的Mercurial(轻量级分布式版本控制系统)仓库的精简架构。这个仓库包括我们所有移动端以及后端代码。

合并一个拉取代码请求的过程通常涉及几个手动步骤。我们在GitHub上通过输入简单评论简化了这一过程。

@facebook-github-bot shipit:如果所有的内部测试都通过,会以GitHub master的角色将代码合并到fbsource主线分支中。

多亏了这些工具,针对该项目拉取代码的请求次数才会保持如此高位。总体而言,在短短一年中已经有2351次拉取请求关闭了。

月报告——拉取代码请求的关闭数量。

Managing GitHub issues

The popularity of the project has created an environment where there is a lot of potential impact to be had by anyone who wants to help us manage the massive number of issues that are opened.

We have implemented another bot to help anyone manage GitHub issues. It makes it possible for anyone to close issues as duplicates, close them as answered, add labels, and much more. There is also a guide to managing GitHub issues that you can use.

The issues bot lets anyone manage GitHub issues, no push access needed.

The API surface area of React Native is huge. It exposes most of the building blocks of iOS and Android apps to JavaScript, while adding cross-platform abstractions. It would be challenging for any single person to be closely familiar with all the APIs. Even though many product teams at Facebook use React Native, we will not always hit all the edge cases before you do. React Native is working for us, but we can't perfect it alone. This is why having a community that's familiar with the codebase is important not only to us but also to others involved in the broader ecosystem, who rely on it for the success of their app, service, or third-party module.

项目的普及创造了一个环境,很多人在此环境的潜移默化中希望帮助我们去管理大量开启状态的问题。

我们已经实现了另一个机器人来帮助任何人去管理GitHub上的问题。它可以帮助任何人关闭那些重复的问题,回答并关闭问题以及增加标签等操作。并且还有一份关于如何管理GitHub问题的指导供大家们使用。

这个问题机器人允许任何人管理GitHub上的问题,并且不需要访问权限。

React Native的接口涉及面比较广。它为JavaScript提供了大部分iOS、Android应用的构建模块,并且同时增加了跨平台的抽象类。对于任何一个想要熟悉所有接口的人来说都是一次艰难的挑战。即使在Facebook内部,一些正在使用React Native的产品团队在此之前也无法触及到所有的边界状况。React Native为我们服务,但是我们无法独自完善它。这就是为什么会有一个熟悉代码库的开发者社区,不仅对于我们而言,对于其他参与到更广泛生态系统的人们也同样重要,这些人可以通过社区成功完成他们的应用、服务或者第三方组件。

Community collaborators

React Native Open Source Collaborators are people in the community who contribute very high-quality patches and actively help others. We have created the React Native Community Collaborator title for people who greatly help us move the project forward. With the title comes push access to the repo.

Here is a big shout-out to the React Native community collaborators: Adam MiskiewiczAlexey KureevBrent VatneChirag JainChristopher DroJames IdeJanic DuplessisJoshua SierlesKyle CorbittKrzysztof MagieraLeland RichardsonMike Grabowski, and Satyajit Sahoo. Thank you for all your amazing work!

Some of us met at React.js Conf in San Francisco on Feb. 22, 2016:

In the picture (left to right): 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).

React Native开源项目的合作者是那些在开发者社区贡献过高质量补丁以及积极帮助他人的人们。我们已经为那些推动React Native项目前进的人们授予了React Native社区合作者的头衔。这个头衔也成为了仓库的访问权限。

在此我想大声地对那些React Natie社区合作者说:感谢你们做出的一切努力。Adam Miskiewicz, Alexey Kureev, Brent Vatne, Chirag Jain, Chrisopher Dro, James Ide, Janic Duplessis, Joshua Sieries, Kyle Corbitt, Krzysztof Magiera, Leland Richardson, Mike GrabowskiSatyajit Sahoo.

2016年2月22号,旧金山,我们相聚在React.js Conf大会上:

照片中(从左至右):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)和Martin Konicek (React Native Team).

返回顶部
顶部