Will React Native fulfill the programmer’s dream: single code for web, android and ios?

Writing code is difficult. Writing code for multiple platforms is even more difficult. Programmers know this, and the last twenty years, the ideas of the “universal all-powerful” have stirred minds and are embodied in different technologies. Starting from Java and ending with phonegap, developers really wanted to write and work everywhere once. But did not develop.

And then facebook did ReactJS. To chat yourself to fix. And it happened. The idea of ​​building the interface from javascript “cubes” turned out to be so good that facebook ported the framework to mobile platforms, first making React Native for iOS, and six months later for Android. Will the technology that came from the web be able to do what did not work for monsters such as Java and .NET?

Old dream: write once, run anywhere

Cross-platform development has become popular recently. Fifteen years ago, the word “program” was synonymous with “program under windows”. The vast majority of computers worked on windows. In the parallel world of enterprise solutions, HP-UX (better known as “Chpuks”), server Linux and Java lived. In another parallel world - makos with photoshop and illustrator. The worlds did not overlap, the programs were created for specific platforms and cross-platform solutions were more curiosity than necessity.

And then a few things happened. Mobile platforms “shot”, the popularity of Macs grew, the purchase and rental of software drastically simplified. Programs began to use everything, and not just "computer scientists." And suddenly it turned out that the old Java slogan “write once, run anywhere” has become very relevant. A huge number of companies, ranging from banks and ending with starbucks, needed applications. It is desirable - at once for all current platforms. It is highly desirable cheaper. And quite well, if right now.
')

Dream design and speed

The developers shook off the dust from proven tools, but it turned out that everything was not so simple. The vast majority of cross-platform development technologies available on mobile platforms draw the user interface themselves. Why is it, firstly, it looks alien. And, secondly, it slows down. Add to this the “flowing abstractions”: any complex application sooner or later goes beyond the cross-platform framework and had to be expanded with its “native” code, which often leads to problems of interaction between the extension and the framework itself.

The frameworks and libraries designed to solve this problem began to multiply like mushrooms after a rain of money: Appcelerator, Phonegap, Xamarin, FireMonkey, NativeScript. But no one gained special popularity, and on the Internet began to appear articles like "How we started to make a bank client in the name of the framework and a year later threw it away by going to the native."

React brings responsive design from web to mobile

And here, in mid-2015, Facebook introduces React Native. At first glance, nothing new. JavaScript, from which you can create "native" elements of the user interface on both iOS and Android. Appcelerator has had this for many years.

The devil was in the details. Building the interface "from cubes" and borrowed from the web "adaptive" approach to the design allowed to make an interesting thing. Using React, the interface is set up semantically, as in the web. Instead of operating with interface elements ios or android, the designer creates an interface from logical components: “screen”, “title”, “list”, “button”. And the already created interface is brought to the specific platforms by a file: several lines of code turn the “progress” component into a set of HTML tags for the web, ProgressBarAndroid for android and ProgressViewIOS for ios.

This approach is very convenient: at first, the interface is quickly made up from universal blocks, and then it is finalized for each platform only where it is really needed. This is surprisingly reminiscent of adaptive layout, when a universal “rubber” interface is first imprinted, and then with the help of @media it is finalized for the phone screen, tablet screen and the large screen.

The prototype of the application can now be done in a couple of days.

As an example, take a look at the test application for our React Native SDK. With the SDK, you can make and receive regular or video calls, including free peer to peer. And the application shows how to use it: a login window, a window for entering a number or name, a scattering of buttons like “call”, “turn on video”, “turn off microphone” and the like. If you look at the source , we will see one code running on both platforms. The code differs only where we ourselves wanted it. For example, the native version of the switch is used, so its implementation is divided into two files: ColorSwitch.ios.js and ColorSwitch.android.js

Demo application was made in two days. Immediately under ios and android. And if we want to make a version for the web, then it will take another day from the strength (yes, we have web sdk and yes, it can call from the browser thanks to the magic of webRTC). All that needs to be done is to replace the user interface elements with divs and change several sdk calls that are different between the web and mobile versions.

<View style={styles.settings_table}> <View style={styles.settings_switch}> <Text style={styles.settings_label}>Peer-to-peer</Text> <ColorSwitch defaultValue={settings_p2p} valueUpdate={(value) => {settings_p2p = value}}/> </View> <View style={styles.settings_switch}> <Text style={styles.settings_label}>Video</Text> <ColorSwitch defaultValue={settings_video} valueUpdate={(e) => this.videoSwitch(e)}/> </View> </View> 

snippet of code from here

Is everything so smooth in practice?

Every month more and more companies use ReactJS and React Native. Nevertheless, the technology is still very young (android versions are only a few months old), and all the “childhood diseases” are bundled.

First of all, I would like to mention a small number of interface elements that are available out of the box . A dozen universal and ten specific for ios and android. It is easy to wrap any native element, but this will require knowledge of java, objective-c, or swift. An alternative is to use one of the hundreds of items created by enthusiasts that are available on github. But open source is specific - sometimes there are more problems from carelessly written elements than if you make them yourself.

The youth of technology also limits the choice of available libraries and binders. At the time of the announcement of React Native, we already had native sdk for ios and android for a long time. Using this, we immediately started porting and were the first to pack webRTC into React Native. But all the same, it took quite a long time: while you study the documentation, while you write the code, while you test everything, while you configure the continuous integration - for serious libraries this may be a question of more than one month.

The speed of development of the framework also does not always play into the hands of developers. When updating to the latest version, we suddenly stopped playing video, while the log is not something that errors - even there were no warnings. Long digging in the code showed that the authors “only” moved to another place ReactProp for Android. Such changes, of course, do not happen often - but they still happen, especially for the Android version.

 import com.facebook.react.uimanager.*; import com.facebook.react.uimanager.annotations.ReactProp; public class VoxImplantViewManager extends SimpleViewManager<VoxImplantRendererView> 

findings

The technology is very promising, but young. From direct competitors, I can call Microsoft's “windows universal apps” with a similar concept of semantic interface layout, recently reinforced with continuum technology. And “Xamarin.Forms”, offering a similar solution with “universal” and “platform-specific” interface elements. But React has a number of advantages in front of them: web as one of the platforms, super-popular JavaScript, the equally popular node.js toolchain, freebies, facebook support and “hot reloading” out of the box.

We can say that now React Native can be used to quickly prototype mobile versions of your web applications. And if the web application is already written on ReactJS, then the transfer rate increases significantly. Creating complex applications with publication in the stores is already possible, it is clearly seen in the gallery . But be prepared for the fact that the final "bringing to mind" will be delayed and will require to climb in java and objective-c.

PS And they have not repaired the chat. But there, hike, and the truth is the place is cursed.