React Native

Sergey Smyshlyaev / @sesm_

About me

1 year experience with React, big project from scratch

1 mo experience with React Native, joined existing project

For cutting edge tech it still counts as experience :)

WebView

+ can use all the libs

- non-native look and feel

- gesture handling

- limited use of HW acceleration

- too much work for one JS thread

WebView examples

Apache Cordova

Built on top of Cordova:

Phonegap

Ionic

(etc)

Scripting native

+ can use native widgets, APIs, gestures, etc

+ animation runs in native code

- challenging (see further)

Scripting native is hard

Sync calls between native and JS will block native execution, so need to run JS in separate thread

but...

- resource contention (i.e. accessing native element props), need to block

- calls between JS and native are costly.

React offers async rendering model, that solves both problems!

Architecture

JS thread: component lifecycle, JS libs

Bridge

Native UI thread: layout, animation, native component rendering

Native auxilary threads: image decoding, native API

Sharing experience, not code

Layout system is subset of web, but FlexBox only.

Styling similar to inline styles.

Running the same React as in web, using JSX for views.

Use React ecosystem (Redux with all middleware, etc).

Use JS libs, that are not browser or node.js specific.

Development experience

Actually pretty good!

[here comes the demo]

State of React Native

Needs community outside of FB

Become a contributor, low hangings fruits are waiting

Resources

React

Official docs/tutorial

Best guide to ecosystem

React Native

Official docs/tutorial

3rd party components

Playground

Thanks!

Contact me (Qs about React/React Native welcome)

Questions?