React Native: another “silver bullet” for cross-platform development?
There are revolutions that occur unnoticed. When the Facebook developers released the React Native framework, no one captured bridges and telegraphs. The new approach to the cross-platform development of mobile applications managed to capture the most valuable thing - the brains of native programmers. We asked Vladimir Ivanov to tell about the central idea of React Native, its advantages, prospects and disadvantages.
Vladimir has been developing for Android for over six years, has experience in creating applications for iOS and Windows Phone. Last year, he became interested in React Native and began to move the culture of cross-platform code in EPAM Systems.
- For what you do not like the platform code? What disadvantages do you see in native development?
')
Vladimir Ivanov: When a customer says that he wants a mobile application for all platforms, he does not understand that Android, iOS and Windows are fundamentally different things. Software developers have to repeat the same code, the same business logic on two or three platforms.
The platforms themselves also have a variety. In the iPhone on iOS, there may be options for versions, capabilities, and screen size. And in Android, it reaches a catastrophic scale: you need to support not only versions starting from 2.3, but also a huge number of devices. This turns native development into a rather tedious task.
I will give an example. I have an educational project Flick Feed for React Native on Github. There are about 100 lines of code in total for two mobile platforms. And there is a similar BitBucket project on Android , which I did a few years ago. There the code to hell, an order of magnitude more, and this is only an application for Android! Look here:
This is a layout of one element from the feed, there are 36 lines, and there is no logic. It is necessary to look in the Activity, there will be a code that looks for views, puts values in them. Another inflate need to write to the element.
The same element in RN occupies 21 lines, and the logic of setting values already exists, and the inflate is not needed at all, see
- Attempts to create a convenient cross-platform framework for mobile development have been going on for several years. Neither a clear leader nor a “silver bullet” has appeared. Why?
Vladimir Ivanov: Since the advent of Android and iOS, there are a decent number of solutions that try to solve the problem of sharing code. This is PhoneGap, Titanium and others.
I see in my practice that people use such frameworks only to test business ideas. They allow you to understand that the application can really be a worker, it is convenient to use it, the business idea is normal. If everything is so, then everything is done anew in a normal way in native development.
These frameworks essentially provide a WebView and the ability to write on html + css + js what will turn in this WebView. Accordingly, you understand that the quality of the applications themselves, User Experience, which this solution can offer, is not the best. Not exactly what the platform itself can give you.
- How does React Native differ from other frameworks?
Vladimir Ivanov: React Native is better because you do not have any WebView. It uses the native user interface components of Android, iOS, and Universal Windows. This implementation allows you to unleash the full power of the platforms: the interface does not slow down and looks native, which implies high-quality UX.
React Native grew out of ReactJS, which in turn came about because it was not very convenient for Facebook developers to support their applications in traditional web development tools. A special feature of ReactJS is the presence of a renderer layer, which allows an intermediate JSX language to be rendered into HTML, which is already perceived by the browser.
At some point, the Facebook guys realized that they could use the exact same approach for their mobile apps. The React architecture allowed us to add a native renderer, which turns JSX into native components of the platform. Thus, they received React Native in an evolutionary way, not setting themselves the task of creating some kind of unusual framework, but coming to it naturally.
- In React Native there is such a thing as a virtual DOM. Is this really a cool solution that speeds up application development?
Vladimir Ivanov: React is constructed in such a way that the main occupation of its components is only to display the state. The render () method that a component has looks at State and draws content based on it. When State changes, React recreates the entire tree of its components. This tree is called the virtual DOM.
That is, when your state changes, you need to redraw the whole page again. But this is bad in terms of performance. What does React do? It stores in its memory the old and the new tree of the virtual DOM components, it calculates the difference and on the real DOM it applies only it. In the virtual DOM, a complete redrawing takes place, but in real - only partial. Rendering happens very quickly, and the code is written simply.
- How do the elements that are used in React Native and in native development correspond?
Vladimir Ivanov: Some elements are similar to native ones. For example, text input. But the power of React Native is that you can create your own components to suit your needs. You can always write a wrapper over the native tools for your React Native and continue in JavaScript to assume that you have a cross-platform application.
A lot of things and work, for example, Push-notifications. There is a solution that is implemented in Java code for Android, in Objective-C for iOS. Then this NPM module is connected to your project, and you get a JavaScript interface for Push notifications. If you need access to low-platform things, you can always provide them.
- What are the disadvantages of React Native?
Vladimir Ivanov: If you have strict interface requirements for different platforms, and it is very different in different versions, you will have to duplicate a significant part of the UI.
But business logic you can still leave cross-platform. That is, using some external storage for the state and creating the right architecture for React Native, you still save a lot of effort.
Of course, we should not forget that React-Native is a young technology and cannot be done without “jambs”. For example, such a large "cant" - navigation. Despite the fact that RN has already gone through 4 stages of navigation modifications (Navigator, NavigatorIOS, NavigationExperimental, ...), there is no decent solution. They promise that the next navigation will certainly be good, but as you know, three years are waiting for the promise.
- What do you need to learn to start working with React Native?
Vladimir Ivanov: The developer first needs to know JavaScript and its ES6 standard. All the power of Babel is needed not to write React.createClass and the rest of Boilerplate everywhere. Therefore, I recommend exploring ES6.
And the person gets acquainted with all the rest rather quickly. Within a month, after reading the materials and listening to the training courses, which are full on the Internet, you can quickly start to impose a more or less normal UI.
Of course, there are complex topics - external State, validation of forms, use of context in React Native. I will tell about these things at Mobius 2017 , so you can come to listen.
Those wishing to learn React Native need to read Getting Started from Facebook . I also recommend the course on Udemy . In addition, you should follow the gurus who are engaged in React. I recommend Dan Abramov's twitter , he writes a lot about React Native.
Of course, there is a whole sadness that if you come from an area in which mobile applications have never been touched, then you need to go through this quest to install native sdk, raise emulators, extort gigabytes of sdk, and this is a more or less manual process . In the end, you still need expertise in mobile development, otherwise it won't even start. But just a week ago React Conf presented an analogue of create-react-app for React Native: create-react-native-app . For a mobile developer, this is of course a shock: like, a mobile application without an application! But for the start, this is probably the ideal option: the script will set everything up for you and pick it up;
- What are you so fascinated React Native?
Vladimir Ivanov: As a developer, the wow effect covered me because the approach to developing a mobile application, the UI is completely different. In Android, iOS, you are faced with imperative programming, that is, "Hey you, do it, hide the button, blink right here" - you give the UI commands what to do. And in React Native, the approach is completely different, you need to break your brain a little bit in order to switch to it. This is a complete change of the development model; it pleasantly shocked me.
I think the whole industry will start migrating to these tools in the near future, because they are really good. Moreover, React Native is an open source solution, around which a steep community is actively forming. Here UberEats published how they used React Native in their products , they write: we don’t undertake to assert that the bullet is silver, but it suits us perfectly.
Vladimir Ivanov will talk about how to create full-fledged commercial projects in React Native in his report “React Native: Survival Lessons” at the Mobius conference to be held April 21-22, 2017 in St. Petersburg.
Vladimir has been developing for Android for over six years, has experience in creating applications for iOS and Windows Phone. Last year, he became interested in React Native and began to move the culture of cross-platform code in EPAM Systems.
- For what you do not like the platform code? What disadvantages do you see in native development?
')
Vladimir Ivanov: When a customer says that he wants a mobile application for all platforms, he does not understand that Android, iOS and Windows are fundamentally different things. Software developers have to repeat the same code, the same business logic on two or three platforms.
The platforms themselves also have a variety. In the iPhone on iOS, there may be options for versions, capabilities, and screen size. And in Android, it reaches a catastrophic scale: you need to support not only versions starting from 2.3, but also a huge number of devices. This turns native development into a rather tedious task.
I will give an example. I have an educational project Flick Feed for React Native on Github. There are about 100 lines of code in total for two mobile platforms. And there is a similar BitBucket project on Android , which I did a few years ago. There the code to hell, an order of magnitude more, and this is only an application for Android! Look here:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#FFF" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/thumb" android:adjustViewBounds="true" android:layout_margin="10dip" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/published" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/common"/> <TextView android:id="@+id/desc" android:ellipsize="end" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/common"/> </LinearLayout> </LinearLayout> This is a layout of one element from the feed, there are 36 lines, and there is no logic. It is necessary to look in the Activity, there will be a code that looks for views, puts values in them. Another inflate need to write to the element.
The same element in RN occupies 21 lines, and the logic of setting values already exists, and the inflate is not needed at all, see
import React from 'react'; import { View, Image, Text } from 'react-native'; export default ({ flickrItem }) => { return ( <View style={{ flexDirection: 'column', padding: 8, borderWidth: 2, borderColor: 'black', margin: 8 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <Text>{flickrItem.title}</Text> <Text>{flickrItem.date}</Text> </View> <Image source={{ uri: flickrItem.url }} style={{ marginTop: 16, width: 200, height: 200 }}/> </View>); }
- Attempts to create a convenient cross-platform framework for mobile development have been going on for several years. Neither a clear leader nor a “silver bullet” has appeared. Why?
Vladimir Ivanov: Since the advent of Android and iOS, there are a decent number of solutions that try to solve the problem of sharing code. This is PhoneGap, Titanium and others.
I see in my practice that people use such frameworks only to test business ideas. They allow you to understand that the application can really be a worker, it is convenient to use it, the business idea is normal. If everything is so, then everything is done anew in a normal way in native development.
These frameworks essentially provide a WebView and the ability to write on html + css + js what will turn in this WebView. Accordingly, you understand that the quality of the applications themselves, User Experience, which this solution can offer, is not the best. Not exactly what the platform itself can give you.
- How does React Native differ from other frameworks?
Vladimir Ivanov: React Native is better because you do not have any WebView. It uses the native user interface components of Android, iOS, and Universal Windows. This implementation allows you to unleash the full power of the platforms: the interface does not slow down and looks native, which implies high-quality UX.
React Native grew out of ReactJS, which in turn came about because it was not very convenient for Facebook developers to support their applications in traditional web development tools. A special feature of ReactJS is the presence of a renderer layer, which allows an intermediate JSX language to be rendered into HTML, which is already perceived by the browser.
At some point, the Facebook guys realized that they could use the exact same approach for their mobile apps. The React architecture allowed us to add a native renderer, which turns JSX into native components of the platform. Thus, they received React Native in an evolutionary way, not setting themselves the task of creating some kind of unusual framework, but coming to it naturally.
- In React Native there is such a thing as a virtual DOM. Is this really a cool solution that speeds up application development?
Vladimir Ivanov: React is constructed in such a way that the main occupation of its components is only to display the state. The render () method that a component has looks at State and draws content based on it. When State changes, React recreates the entire tree of its components. This tree is called the virtual DOM.
That is, when your state changes, you need to redraw the whole page again. But this is bad in terms of performance. What does React do? It stores in its memory the old and the new tree of the virtual DOM components, it calculates the difference and on the real DOM it applies only it. In the virtual DOM, a complete redrawing takes place, but in real - only partial. Rendering happens very quickly, and the code is written simply.
- How do the elements that are used in React Native and in native development correspond?
Vladimir Ivanov: Some elements are similar to native ones. For example, text input. But the power of React Native is that you can create your own components to suit your needs. You can always write a wrapper over the native tools for your React Native and continue in JavaScript to assume that you have a cross-platform application.
A lot of things and work, for example, Push-notifications. There is a solution that is implemented in Java code for Android, in Objective-C for iOS. Then this NPM module is connected to your project, and you get a JavaScript interface for Push notifications. If you need access to low-platform things, you can always provide them.
- What are the disadvantages of React Native?
Vladimir Ivanov: If you have strict interface requirements for different platforms, and it is very different in different versions, you will have to duplicate a significant part of the UI.
But business logic you can still leave cross-platform. That is, using some external storage for the state and creating the right architecture for React Native, you still save a lot of effort.
Of course, we should not forget that React-Native is a young technology and cannot be done without “jambs”. For example, such a large "cant" - navigation. Despite the fact that RN has already gone through 4 stages of navigation modifications (Navigator, NavigatorIOS, NavigationExperimental, ...), there is no decent solution. They promise that the next navigation will certainly be good, but as you know, three years are waiting for the promise.
- What do you need to learn to start working with React Native?
Vladimir Ivanov: The developer first needs to know JavaScript and its ES6 standard. All the power of Babel is needed not to write React.createClass and the rest of Boilerplate everywhere. Therefore, I recommend exploring ES6.
And the person gets acquainted with all the rest rather quickly. Within a month, after reading the materials and listening to the training courses, which are full on the Internet, you can quickly start to impose a more or less normal UI.
Of course, there are complex topics - external State, validation of forms, use of context in React Native. I will tell about these things at Mobius 2017 , so you can come to listen.
Those wishing to learn React Native need to read Getting Started from Facebook . I also recommend the course on Udemy . In addition, you should follow the gurus who are engaged in React. I recommend Dan Abramov's twitter , he writes a lot about React Native.
Of course, there is a whole sadness that if you come from an area in which mobile applications have never been touched, then you need to go through this quest to install native sdk, raise emulators, extort gigabytes of sdk, and this is a more or less manual process . In the end, you still need expertise in mobile development, otherwise it won't even start. But just a week ago React Conf presented an analogue of create-react-app for React Native: create-react-native-app . For a mobile developer, this is of course a shock: like, a mobile application without an application! But for the start, this is probably the ideal option: the script will set everything up for you and pick it up;
- What are you so fascinated React Native?
Vladimir Ivanov: As a developer, the wow effect covered me because the approach to developing a mobile application, the UI is completely different. In Android, iOS, you are faced with imperative programming, that is, "Hey you, do it, hide the button, blink right here" - you give the UI commands what to do. And in React Native, the approach is completely different, you need to break your brain a little bit in order to switch to it. This is a complete change of the development model; it pleasantly shocked me.
I think the whole industry will start migrating to these tools in the near future, because they are really good. Moreover, React Native is an open source solution, around which a steep community is actively forming. Here UberEats published how they used React Native in their products , they write: we don’t undertake to assert that the bullet is silver, but it suits us perfectly.
Vladimir Ivanov will talk about how to create full-fledged commercial projects in React Native in his report “React Native: Survival Lessons” at the Mobius conference to be held April 21-22, 2017 in St. Petersburg.
Source: https://habr.com/ru/post/325628/
All Articles