What's so special about "React Native"? Thorough investigation by Recruit engineers

What is React Native?

Masaya Kamakura (hereafter, Kamakura): Let's get started. I would like to make a presentation titled "Front-end engineer touched React Native". My name is Kamakura.

First of all, I would like to introduce myself. As a front-end engineer, I usually use Web applications using React and Redux. I started researching React Native around January of this year, and it seems to have continued until today.

And today's agenda. Today's content is about React Native, why I started researching React Native, and React Native architecture. Also, I made a demo app, so I think I'll introduce it a little.

First, let's talk about React Native. As many of you may know, it is a framework for native apps developed mainly by Facebook. As a feature, you can develop iOS and Android apps using web technology, knowledge, HTML, CSS, JavaScript, React, etc.

Since JS directly controls the native UI, not the WebView, high performance. It has good performance, and there are functions such as live reloading and hot reloading provided by React Native, which is characterized by good development efficiency. "Live reload" is something I'll demonstrate later.

One more thing, this is the idea of ​​React, but there is a saying "Learn once, Write anywhere", which is like "Once you learn, you can write anywhere". In this React Native example, if you are familiar with React on the web, you can use React Native to develop native apps.

I wrote a little about React. Recently, I think that there are more cases of adopting React for web applications, and in short, the number of people who can write React is also increasing. Recruit also has something like front-end support using React and Redux, and the number of people who can write React is increasing. Staffing becomes easier. By using React Native, engineers who have been writing React for the Web can expand their scope of work by going to other areas.

You just mentioned the React Native platform, iOS, Android, as you all know, and tvOS can also be built in for development.

In addition, if you use a third party library, it may be a Windows application or a MacOS desktop application. You can also create Mac desktop apps using the touch bar of the new MacBook Pro released last year.

Then, if you look at the showcase for what kind of apps React Native is used in, it is also used in apps with a fairly large number of users, such as Facebook, Instagram, and Airbnb.

As an example, the case of Instagram was mentioned in detail in the article, so I would like to introduce it. Instagram originally had a native app, so it felt like integrating React Native into an existing app. So, it seems that he started with a simple screen first.

It was originally a WebView screen, and has been improved to a simple, simple screen with a simple UI and less navigation. Push Notification Setting, push service setting screen. After going through that kind of thing, next, we are going to convert native Objective-C and Java screens to React Native, and we will measure performance and see how much the trade-off will go up. It seems that the performance was measured in detail by switching the.

As a result, although it is a story of code sharing, even though this is React Native, it is not possible to use exactly the same code as iOS and Android, and it became necessary to write specialized code for each. , the codeshare percentage of it is featured. On average, about 90% seems to be shared between iOS and Android.

And that's a nice benefit when Instagram rewrites from WebView to React Native. As for the problems with WebView, it is said that the startup is slow and the UX does not feel native, but by converting to React Native, the startup time and UX have improved. One more thing, by rewriting the original native language to React Native, I was able to standardize the code.

Also, thanks to live-reloading and hot-reloading, the compile-install cycle has become faster, improving development performance. This allows us to do things like release features faster.

Since we are talking about live reloading and hot reloading, I would like to give a quick demo.

This is a very simple app that just counts up. This is the code. Now, by the way, this is in such a state that hot reload is enabled. So, for example, if you rewrite the background color and save it, you can be notified of the change and rewritten without having to reload the app like this. This is hot reloading.

There was one more Live Reload, so I'll take a look at that as well. Now, when I change the background color... notice how the count resets to zero. Now, with live reloading, the State value is reset and restarted, so this is all used outside of Redux, but the value and State state return to the Initial State.

Hot reloading updates the state of the State while maintaining it. You can do things like update the module without leaving the page.