React Native: Retrospective

changing mobile development

What is it?

Build mobile applications with web technologies

Uses React to target platforms other than the browser

  • iOS
  • Android
  • Windows
  • Tizen
  • OS X (WIP)
  • Web (WIP)

Why it's good


  • Native-level performance
  • Learn once, write anywhere


Performs noticeably better than hybrid apps (Ionic)

Shorter development time than building (android + ios) apps

How does it work

Abstractions in components

React native bridge

Platform specific native modules

Use almost any javascript utility libraries

Create your own component to native bridge

Endless possibilities!

Development

Testing

  • Mocha + Enzyme (unit/integration)
  • Calabash or Appium (integration)

React Native Components

Components: View, TextInput, Navigator, ListView, ...

APIs: PanResponder, Animated, BackAndroid, AppState, ...

Components are constantly being revised with developer happiness in mind.


Let's take a look at ListView.

Retrospective

the bad stuffs

Linux guide introduced after Feb 15, 2016

Plenty of breaking changes and bugs


Latest 5 major versions have breaking changes

v0.25 - May 5, 2016
- Requiring React API from react-native is now deprecated
v0.26 - May 19, 2016
- React API must be now required from react package (previously a warning on 0.25)

14 days

[import React from 'react-native'] - breaks every packages

v0.21 - Mar 1, 2016

Upgrade android project


v0.16 - Dec 5, 2015

Babel 6 upgrade


v0.15 - Nov 24, 2015

Upgrade to Xcode 7


v0.13 - Oct 24, 2015

React Native no longer published to CocoaPods

Integration with facebook sdk

v0.1 -> CocoaPods

v0.2 -> rnpm

Orientation

  • Fixing an orientation
  • Alternating orientations


Orientation bridge + Navigator lifecycle

switching orientation async vs. calculating window's dimension

Need components that are not available

Bridging with Native Modules


  • Writing high performance, multi-threaded code
  • Image processing
  • Database
  • Complex animations
  • Native APIs/SDK, e.g. (Shopify Buy SDK, Paypal SDK)

Writing your own Native Toast module

Android

Complexity in rendering might result in slow performance

Profiling with Systrace
More on optimising React Native: Tools and Tips, by Tadeu Zagallo

is React Native for everyone?

No (not really)


- Use the right tools for the job

- Young but fast growing community

React Native community is young


Contribute to RN components

JS Coach - RN