React Native from Rubyist's Perspective

Alexey Vasiliev

• Web and Mobile Developer (Ruby, Java, JavaScript, Objective-C, C/C++, Golang, Elixir/Erlang), DevOps
• Open-Source libs: PGTune, SQL Joins Visualizer, RWbox, Go-Kinesis, ElixirV8, WebP-ffi, Zopfli-ffi, MongodbLogger, SMTRails, SHTRails, ...
• Open-Source books: Cooking Infrastructure by Chef, Setting up and scaling of PostgreSQL (Russian)
• Leading RWpod podcast about Ruby and JavaScript

Mobile development solutions (iOS and Android)

• Native (Objective-C/Swift + Java/Kotlin)
• React Native
• NativeScript
• Ionic 2 (Cordova + Angular)
• Xamarin (C#)
• Qt (C++)
• Appcelerator Titanium
• RubyMotion
• Ruboto (only Android)
• Unity 3D (games)
• Corona SDK (games)
• many more...

React Native

Example

import React from 'react';
import {Text, View} from 'react-native';

class RubyMeditationMobile extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello Rubymeditation!</Text>
      </View>
    );
  }
}

Example

import {AppRegistry} from 'react-native';

AppRegistry.registerComponent(
  'RubyMeditationMobile',
  () => RubyMeditationMobile
);

Example

$ react-native start // start dev server

$ react-native run-ios // run app in ios emulator

$ react-native run-android // run app in android emulator

Style

import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Style

export default class RubyMeditationMobile extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello RubyMeditation!</Text>
      </View>
    );
  }
}

React Native components

• View
• Text
• Button
• Image
• TextInput
• WebView
• Slider
• Modal
• ScrollView
• ListView, FlatList, SectionList
• StatusBar
• Picker
• etc...

React Native API

• Alert
• AppState
• AsyncStorage
• BackHandler
• CameraRoll
• Clipboard
• Dimensions
• Keyboard
• Linking
• PixelRatio
• Vibration
• PanResponder
• etc...

Networking

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

React Native Plugins

• react-native-fcm
• react-native-image-picker
• react-native-fetch-blob
• react-native-firebase-analytics
• react-native-google-analytics-bridge
• react-native-vector-icons
• react-navigation
• react-native-maps
• react-native-calendars
• native.directory/recommended
• and basically all react plugins (redux, redux-form, redux-saga, reselect, etc.)

React Native Benefits

• You are using react way to build apps (components, react infrastructure)
• You can share codebase with your react web application: actions, action types, reducers, API functions (REST, GraphQL)
• Fast development for small team (one team for iOS and Android platform) and you can see results immediately
• Very good fit for apps, like: conferences app, booking app, catalogs app, shopping app, etc

React Native Disadvantages

• React Native provides only basic components and APIs
• Components built on top of the React native components are more flexible, but they are decreasing performance for an interface
• In case you need some special (native) component you need to have knowledge in Objective-C/Swift + Java/Kotlin
• You have only one JS thread for interface, so heavy animations or some heavy JS logic will block interface
• Still is not very stable in development process

React Native Disadvantages

• iOS first, Android second: support of the Android is not full and not perfect (shadows, image placeholders, etc)
• Top level debug is simple, but if you need go deeper - you need to read native code
• Outdated/not complete documentation
• BSD + Patents license (not critical)
• Not fit for apps like: games, low-level apps (that get some system info)

<Thank You!> Any Questions?