React Native, Facebook engineering team’s official blog: A year in review, this paper describes the origin of RN, the development of the project within FB in the past year, the wide use in the industry and the rapid establishment of the ecosystem, the open source collaboration on Github, and the future outlook of RN by the core team. Come and have A look at the legendary path of RN

React Native’s first anniversary review

It’s been a year since we opened React Native. What began as a “whimsical” project for a handful of engineers is now widely used as an application development framework by Facebook’s product teams and even other companies. Today at F8, we announced that Microsoft is bringing React Native to the Windows ecosystem, allowing developers to build RN applications on Windows PCS, phones, and Xbox, It also provides open source tools and services (such as Visual Studio Code’s RN extension and CodePush related RN services) to help developers build RN applications on Windows. Meanwhile, Samsung is building its hybrid app platform with RN technology to help Samsung developers develop apps on millions of SmarttVs, phones and wearables. We at Facebook have also released RN’s Facebook Developer Suite, which makes it easier for developers to integrate Facebook’s social features such as login, sharing, app analytics and Graph APIS into their applications. Just this year, React Native has dramatically changed the way developers develop apps on major mobile clients.

It’s an epic journey, but we’re just getting started. Let’s take a look back at how RN has become popular and improved over the past year since opening up, the challenges we’ve faced along the way, and how we see RN’s future.

React Native why it started

The essence of Facebook’s hacker culture, React Native also began as a hackathon project in 2013. Like React, React Native was a bold outlier at first. At first we weren’t sure it would work. Such as JS and native scrolling interaction how to do, performance, such as debugging. But none of these challenges stopped our engineers from pushing the project further.

As we prototyped the idea, I realized that this project could be very useful in Facebook. A few years ago, we moved from Web H5 development to our current native client development. However, the lengthy recompilation required for each code change, the different skills required to develop different clients (iOS, Android), and so on caused us to make slow progress in product development. Ideas like React Native can take some of the benefits of Web development that we’ve been passionate about and apply them to Native app development, such as fast enough iteration to deliver an entire mobile product with a lean JS engineering team.

So we continued to invest time and energy in this project. We also know that proving that a new technology really works is trying to solve complex problems in a production environment. So we decided to prototype the FB message flow home page, which was the first product project we developed with RN, and at the same time, we continued to enrich and optimize RN, the basic framework itself. This code eventually became the basis of the current FB group application code.

In July 2014, our small team, which was still working on RN, got our first big job: a team of AD management gurus wanted to build a standalone iOS app, but they didn’t have direct iOS engineers or development experience. It was a great opportunity, and over the next few months AD Master’s product team worked closely with RN’s engineering team. Product engineers continue to push RN’s functional and performance boundaries. Our goal was to release an iOS app that had a user experience as good as objective-C built.

Confident that the task could be accomplished, we decided to make RN cross-platform as soon as possible and formed RN’s Android team in London. The team started writing the first Android core runtime and the first components in late 2014. After that we decided to make Android run smoothly with the JS code of the previous iOS AD management masters. By the end of 2014, we had a basic version, and although it lacked a lot of interface and didn’t work well on low-end Android phones, you could still see a list of ads shown below and use it to create new ones. We were very confident that we could take this work forward and get even better performance, even more functionality.

Facebook's AD management guru runs on a low-end Android phone. 2015/01

FB AD Management Master was released on iOS and Apple AppStore in February 2015, only 6 months after we started RN full-time. At the same time, colleagues who are concerned about JS or iOS are beginning to consider the open source implementation of iOS RN. We released the first public preview at the React. Js developer conference in January 2015. At the F8 developer conference in March 2015, we officially opened all of our code

After that, the engineering team of AD management gurus began porting their JavaScript code to Android applications. Working closely with the RN team in London, we didn’t expect to be able to reuse a lot of code on both platforms at first (we just thought of it as a plus for RN), but when AD Master for Android was ready to launch, we were surprised to find that 85% of the code for both apps was shared.

In June 2015, after three months of development and about a month of internal dogfooding use, the first Android version of AD Management Guru was released. Given the popularity of RN’s iOS segment, We immediately began shifting our focus to the Android part of the open source RN. We are very enthusiastic about it. After all, the need to build the same app for different platforms is one of the biggest challenges in the industry, and RN is a good solution to that challenge, based on our experience developing AD Management Masters.

Similar to the iOS release, we hope to get the Android release as soon as possible to get feedback as quickly as possible. Therefore, we start with the core runtime, plus a small number of views and module support (such as text, images, ScrollView, Network, AsyncStorage, etc.). On September 14th, we released the Android modules for the core Android runtime and initial parts to Github and NPM. With version 0.11 of React Native, we released some support for Android for the first time. From the open Source Android section, we have also added support for these modules: Alert, APPState, CameraRoll, Clipboard, Date and time Pickers, Geolocation, Intent, Modal, NetInfo, Pull to refresh view, Picker, Slider, View Pager, WebView, etc. (they are very similar to the iOS API)

Timeline from the original React Native idea to the Android part of our open source RN

I have to say, we at RN have been pleasantly surprised by the level of acceptance and enthusiasm.

Rapid iteration: A year of learning and growth

React Native’s popularity and its developer community are growing faster than we expected.

More than 650 people have contributed code to RN’s code repository. About 30% of the 5,800 submissions in the codebase are made by contributors who don’t work at FB. In February 2016, for the first time, more than 50% of code submissions came from these external contributors. With so many community contributions to RN, we found that nearly 266 new PR requests are made each month (up to 10 per day). Many of these PR’s are of high quality and provide features that will be widely used later on.

This is a monthly trend chart of the number of PR submissions to RN's Github repository

At the beginning, these skyrocketing PR numbers made it difficult for us to quickly and efficiently review and merge. Finding the right reviewers for these PR’s is a daily human cost. To solve this problem, we developed two Github bots to automate the distribution of PR to the appropriate Reviewer

The first robot is a reminder robot that will identify a suitable Reviewer for each PR.

The alert bot is now open source, and it really helps us review the PR more efficiently throughout the day. Interesting fact: Last month (February) more than 50% of submissions were from the community, with a reminder that the bot could always find a reviewer in the community to review (probably by locating the reviewer in Github Issues and relating to the issues the PR is addressing).

The difficulty of merging these PR’s was the second problem we encountered. FB engineers use the same repository (as you can see on Github React Native Repo), I didn’t do any forking on this and no other internal commit or anything like that. So, every time we merge PR code into our large internal Mercurial repository called FBSource, we automatically perform test scripts to revert to our Facebook Ads Manager. And other application functions.

A simplified version of the singleton Mercurial repository FBSource. This repository contains all mobile and server side code

Previously, joining a PR involved multiple manual operations. We’ve now reduced this to just replying to a comment on Github.

Facebook-github-bot-shipit: The PR code will be merged into the fBSource main branch and github main branch automatically if all internal test runs pass

Thanks to these tools, we are able to keep the project on track with the PR that so many communities continue to contribute. In the past year we have closed 2,351 PR’s!!

A graph of the number of PR closures on Github's RN projects each month

Making management issues

As projects become more popular, we need to build and guide an institutional environment where interested people in the community can help manage the growing number of issues.

We implemented another bot to enable anyone in the community to help manage Github Issues. It allows anyone (without push permission) to close duplicate issues, close issues after answering, tag issues, and so on. You can get involved with this guide to Managing Github Issues

React Native covers a wide range of apis. It exposes most of the JavaScript calls used to build iOS and Android apps, while providing cross-platform abstractions. It’s hard to have someone who is familiar with all of these APIs, and even though FB has many product teams using RN, we can’t guarantee coverage of all edge cases. RN works for us, but we can’t guarantee it’s perfect. This is where people in the community who know about these codebase get involved, which is important for us and others in the broader community who are betting their applications on RN, building their services on RN, and developing third-party library tools for RN.

Community contributor

The React Native open Source contributor group is made up of people in the community who provide very high quality code patches and are very active in helping other users with usage issues. We created this organization to thank them for advancing the RN project and for giving us access to the repository.

Here’s a photo of our group of RN open source contributors, in order: omit

A group of open source contributors at the React. Js Conf developer conference in San Francisco on 02/22, 2016

React Native to this day

Every two weeks RN will have new releases. This means that you can use these features in your application immediately after they are released in the main branch. In March 2016 alone, RN’s code was downloaded 7W times on NPM. With nearly 3 million plus stars on Github, RN is one of the most watched 21 projects on Github.

In the past year, RN's Github repository has had anywhere from zero to 30,000 stars

Achievement in the community

In the year since the iOS version of RN was released, a number of applications developed by RN have been released to Apple’s AppStore, and high-quality Android apps written by RN are slowly emerging. The presentation page lists 107 great apps built using RN. Add your RN app to the list by submitting PR.

We tried these and found a number of finely honed RN applications. So make sure you download some to try it out and see what React Native can do with it.

  • Townske, a city guide app, was featured in the AppStore’s best new apps section.
  • Discovery VR lets you explore and browse 360 degree videos on Discovery Channel. This is the first VR application built using RN.
  • Running is a sports tracking app with a strong appearance. It was also one of the first RN apps to have a good design.

There are many more of these high-quality RNS, but I’m not going to describe them here. Go to the showcase page to find out.

In addition to these applications, there are now a number of services that assist or build on RN: Exponent lets you develop and share RN applications without having to compile anything. React Native Playground lets you edit and run RN apps in your browser. AppHub and Microsoft’s CodePush let you quickly deploy new code without the app market. Js. coach provides a database that indexes a large number of third-party modules, and Deco is an IDE IDE integrated development environment for building React Native.

Along with this is a rapidly growing ecosystem of third-party modules that you can easily integrate into your application. With the help of js. coach, these modules are very easy to find. They also become very easy to install with RNPM.

There are also plenty of excellent technical blogs and how-to tutorials about RN on the Web. Thanks to the community, keep it up! We particularly recommend Brent Vatne’s React Native Newsletter, which provides a great overview of all the fun and interesting things going on in the RN community, as well as links to some of the best RN technical blogs.

Oh, and we have three books on RN

All of these were born in this year, a lot of results!

Grades in Facebook

RN is increasingly being used by product teams at Facebook to develop new features and applications. It is used both as a singleton App for other businesses and integrated into the larger Facebook iOS/Android App.

The Facebook group application is a hybrid application, and the message flow is implemented using RN

In the past year, the RN team has grown from 10 engineers to 20 in Menlo Park, Calif., London and New York. Since Ads Manager launched RN, the RN team has focused on:

  • Provides performance issues such as application startup time, responsiveness, and smooth scrolling. See how Facebook optimizes React Native performance and what we plan to do with it
  • Integrate RN into the current view UI and infrastructure on the iOS and Android platforms of the big Facebook App
  • Build performance tuning tools such as CPU and memory profilers
  • Develop features and features proposed by the Facebook product team
  • Support production teams using RN to solve their problems and quickly resolve bugs for them
  • Improve the development experience, such as integrating into internal developer tools and build systems

Looking forward to the React Native

The project has come a long way in the last year, but as we say inside Facebook, “We’re only 1/100 of the way”! We will continue to develop RN internally. In the last year, we’ve doubled the size of our team. We will also continue to invest in the open source tool chain. We want the React Native project to be a success both inside and outside the company

Here are some of the ways we recommend you get involved in the project:

  • If you find a Bug, help submit a Fix. A small PR with a test plan (note: Github’s way of contributing code to open source projects) is the fastest and easiest to audit and incorporate
  • If you feel there are ambiguities in the document, please use PR to improve it
  • Ask questions about you on StackOverflow
  • Answer questions and provide solutions to help RN users on Github Issues
  • If you propose a new feature, it is best to submit it to Product Plans, which has a voting system. Even if you don’t have the time to implement it, it doesn’t matter if the supported high school will have other developers to help implement it.
  • Join an RN community group on Facebook

If you’re new to RN, I recommend you check out the series of tutorials we’ve designed for RN to introduce the framework and its open source ecosystem. Taking this year’s F8 app as an example, we showed how we designed for multiple platforms, integrated data, and improved code quality by testing the app.

Thank you to every developer who uses React Native technology to develop their great applications, and to every member of RN’s community who builds tools and services on top of RN, develops open source third-party modules, helps answer questions, submits PR, helps organize conferences and shares, writes tech blogs, and more. Keep it up!

Let’s look forward to a great year for RN