December 7, 2016

React Native Review: To Use or Not To Use

An overview by Sergey Taradaev and Tatiana Ivanova

React Native:Pros and Cons

Nowadays mobile traffic share is growing like mushrooms after the rain. People use their devices non-stop – starting from a jogging session in the morning till late night surfing in bed. The days when your grandmother couldn’t turn on a TV set are over. Now she’s coping with the smartphone challenge.

It doesn’t matter which business you’re in, the world is moving forward and you simply can’t stand aside or you will be left behind. For the last couple of years demands for mobile development have gone up significantly – so has the number of ways to develop a mobile app.

Now we have 3 general ways to build a mobile application:

  • Native apps are more powerful and flexible compared to others. However, they are also the most expensive and require a lot of qualified human resources (every platform needs a separate app).
  • Cross-platform applications are fast and easy to develop in comparison to native. One code source works on many mobile platforms (with some small changes). However, they are slow and in most cases require an internet connection. Graphics are scanty (complete animation and 3D graphics). It is often hard to develop large, sophisticated apps, and even harder to maintain and support them, because this type of application is based on HTML+CSS and Javascript code which works within React Native:Pros and Consa browser.
  • Hybrid mobile applications are not new. They are not too time-consuming to build either. To be honest, they are significantly simpler in comparison to native apps. One codebase is compatible with both web and mobile platforms. On top of that, these apps have very good performance (hard graphics rendering is very close to native). They are definitely a favorite approach now, because as developers often say, “Learn once, run anywhere!”

If you want to keep up with the hybrid applications trend, you’ll have to dive deeper into the fresh and highly anticipated React Native technology.

React Native provides the same abilities as the popular PhoneGap/Cordova solution for cross-platform development, but represents a completely different approach. Cross-platform apps (including PhoneGap) use a browser engine for UI rendering. In fact, you obtain a WEB-page, while React Native uses native rendering and native UI components.

What do you need to know about React Native?

  • Introduced by Facebook at the beginning of 2015. Android support was released in Autumn 2015
  • Interaction between the JavaScript app and the mobile platform OS is asynchronous
  • Allows moving the resource-intensive operations (like image processing, saving files on storage and others) to a separate thread without blocking the user’s UI
  • Gives access to a powerful event system, a multilayer Flex model, for block element layout with different screen sizes
  • Enables Native UI development
  • Open Source

Performance and Layout

My first impression of React Native layout is extremely positive. Its creators managed to transfer Flex layout from the web into mobile development. It looks fantastic and works fast! But… only if you try to write the Hello World! Application.React Native:Pros and Cons

In fact, you can get a quite unpredictable component behavior. Absolute positioning works in a different way in comparison to a browser. Flex-box also appears to be different, as automatic image width and height don’t work correctly. It creates the impression that although you know how to code and your code works well, the result is not in tune with your expectations.

On the whole, rendered scenes work really fast, but not so fast as in native apps. However, every time you add a new View (base-building component, like
in HTML) to the components hierarchy, be prepared to increase rendering time, sometimes considerably, especially on Android.

Data-Flow

When it comes to the React Native data-flow, it is very important to understand the correct way from the beginning. You need to correctly develop the interaction between components and build the right hierarchy out of them. The reason is because it will have a direct proportional effect on your app performance.

React Native:Pros and Cons

The author, Sergey (on the right),  with Waverley colleague and full-stack engineer Ilya, enjoying a moment

Third-Party Libraries

If you need such React Native components as the sidebar, menu, image loader or progress bar – you can find ready-made solutions. The amount of components available is small, there are not many options to choose from, but it’s enough.

New components come out every day, but are contributed by third-party people, volunteers mostly. There are no guarantees in terms of their functionality and further support. Moreover, most of them exist only in one sample, unchangeable, incomplete, or just having the wrong data-flow. Get ready to write your own components (modules) instead of correcting the existing ones. However, do not be in a rush to rewrite libraries, just try to update them.

React Native:Pros and ConsDebugging

This part is well done. You can run React Native applications on both platforms (currently iOS and Android are available). The changes in React Native will reload on both of them at the same time. This is really convenient. Still, there are several little glitches in Chrome debugging. It can get stuck, bombard you with warnings or just shut down occasionally – reloading always helps.

A few hot tools in running the app on a device are worth mentioning. Just shake your phone to open the development menu, where you can attach some options like debugging, showing inspector on the device, inspecting performance or just code reloading.

To Use or Not to Use – That Is The Question

The React Native technology is very promising, but still raw and facing strong competition. It has several major advantages:

  • web platform support
  • active development and support by Facebook
  • extremely popular JavaScript as a base
  • Open Source
  • some useful features like “Live reload”

Believe it or not, React Native can make you satisfied and disappointed at the same time. It is very complicated in terms of the input threshold. It presupposes a good knowledge of JavaScript. You need to have a sufficient understanding of React as well as be aware of the correct data-flow in Flux architecture. In addition, React Native markup comprehension is required, and you must spend some time on learning styles (they are close to CSS but still a little bit different).

React Native:Pros and Cons

Sooner or later you will have to write your own Native components, and here you need at least a basic understanding of Java (Android) and Objective-C (iOS). The good news is if you learn it once — you’ll be able to write applications which work everywhere.