Shalva Gegia

Mobile Development with React Native

January 13, 2019

React Native lets you build mobile apps using only JavaScript
It uses the same design as React
Build a real mobile app (not hybrid)
Supported platforms : iOS, Android, Apple TV, Desktop
Philosophy: Learn once, write everywhere
Code sharing between platform 80%-95%

Showcases

React native has been a while, release in 2015 and gained popularity among developers. There are quite impressive list of companies using React native

showcase

Advantages of React Native

Developing cross-platform apps has its advantages compare to Native development. Developers who are already experienced with Javascript will find React Native is a great choice.

Faster speed of development
Same codebase across platforms (Especially if web app is already done.)

Lower cost
No need of hiring separate teams for making app per platform

OTA (bypass App Store / Play Store)
Instant updates is thing that I would mention as benefit for cross-platform development.
Every update needs time to be deployed to the store (Apple takes minimum 2 days to publish new update) Using React Native you can bypass verification process from publisher and deliver update to end user instantly

Also there is also a very steady increase in the number of production and open source apps written using React Native. 

Advantages of Native Development

We know that Javascript is fast, but Java, ObjC / Swift are faster especially for heavy calculations. It’s a known fact that JavaScript code is not as efficient for calculation-intensive tasks, and there is an overhead when JavaScript is controlling native elements.

JavaScript has a single dedicated device thread, while native code is free to use whatever threads it wants. In performance, React Native stays behind an optimized native application.

If your app is not doing any hugely heavy lifting (i.e. in terms of heavy memory or CPU usage) React Native seems like a really good choice. Having worked with both hybrid and native platforms before, if your app is doing a ton of heavy lifting, I would still recommend native development as a way to more closely manage things like CPU usage and memory footprint.

Constant updates to the platform

React Native is a relatively young and emerging platform. Whereas Native development is quite mature. iOS(ObjC) and Android(Java) have been on the go for close to 10 years and there some really great tools that have developed in that time. This is not really a disadvantage but rather another point that React Native has a lot of catching up to do.

Due to its relatively new entrance React Native is heavily in development, and a new version is released every month. Constant updates bring new ported native components, improved custom ones (like the Navigator), bug fixes and performance improvements. This is good in terms of activeness of the platform. But a bad choice if the app is to be maintained for a long-term as each build might require updating the platform which brings dependency checking for existing code base.

Incorporating these new releases requires vigilant updates to our own code if the logic of the prebuilt components changes. So developers will have to set aside some effort to incorporate these changes in order to keep up with the platform. Many people take up React Native fully understanding this situation. But if you are consulting for a client make sure that they understand this fact.

Loosely-typed language

React Native uses JavaScript code, CSS-like stylesheets and HTML-like tags for layout. The good side is that we get to use all the better aspects of JavaScript but of course, the bad side is that it brings some of the horrors of Javascript. Unlike Java and Swift, Javascript does not enforce a type of variables and parameters to functions. That is, any variable can be anything at any time. Developers need to follow the discipline and standards that they practice in their strongly-typed native programming language

Native Language Dependency

If a functionality that you require isn’t currently available in React Native, you will end up writing native modules. Native modules are a way of bridging native code and React Native code. The native module needs to be written in Java and Swift/Objective C. Possibly, at some point during your development you have to take help from a native developer or do it yourself in the native language.

Google Trends

google_trends

Red: Swift
Blue: React Native

How React Native Works

There are two important threads running in each React Native application.

Main thread which also runs in each standard native app. It handles displaying the elements of the user interface and processes user gestures.

JS Thread (React Native) Executes the JavaScript code in a separate JavaScript engine. The JavaScript deals with the business logic of the application. It also defines the structure and the functionalities of the user interface. These two threads never communicate directly and never block each other.

layers

Threads Interaction

Between these two threads is the so-called bridge, which is the core of React Native. The bridge has three important characteristics.

Asynchronous It enables asynchronous communication between the threads. This ensures that they never block each other.

Batched It transfers messages from one thread to the other in an optimised way.

Serializable The two threads never share or operate with the same data. Instead, they exchange serialized messages.

React Native for Web Developers

React native is great for web developers, especially if you already are familiar with React.js

Web UI Primitives have their “equivalents” in React Native, for example:

<div /> === <View />
<input /> === <TextInput>
<img /> === <Image />
<button /> === <Button />

But unlike Web, UI primitives not living in global scope, you must import them

import { 
  View,
  Image,
  TextInput,
  Button,
} from "react-native";

Differences between Web / React Native

Primitives Styling (based on CSS / Flexbox) Navigation Unlike web, not every component has every interaction Touchable Components Button, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback PanResponder - reconciles several touches into a single gesture

we dont have window object, window push history API

No id, or class, title attributes 
for example:

can be clickable

Handful touchable components because of devices

Large selection of touchables

It makes single-touch gestures resilient to extra touches

Can be used to recognize simple multi-touch gestures

Build your first React Native app

React Native CLI Create React Native CLI (Merged with Expo CLI)

Getting started

$ npm i -g react-native
$ react-native init MyFirstProject
$ cd MyFirstProject
$ react-native run-ios
$ npm i -g expo-cli
$ expo init MyFirstProject
$ cd MyFirstProject
$ expo start

Expo over React Native CLI

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). Expo also provides UI components.
e.g. icons, blur views, and more. Expo SDK provides access to services: Expo can manage your Assets for you Push Notifications Build native binaries which are ready to deploy to the app store. OTA


Shalva Gegia

Powered by Shalva Gegia who lives and works in Tbilisi (Georgia) building useful things. Twitter Github About Me