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 :)

Show of hands

React

ES6

Flexbox

Show of hands

Cordova/Phonegap/Ionic

Xamarin/RoboVM/other hybrid

Native iOS

Native Android

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)

Hybrid, non-JS

Xamarin ($$$, C#)

RoboVM ($$$, Java)

(etc)

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

Thanks!

Contact me (Qs about React/React Native welcome)

Twitter: @sesm_

E-mail: sergey.smyshlyaev@gmail.com

Telegram: @sergey_smyshlyaev

VK: vk.com/id115992

Questions?

Made with Slides.com