React native

VS

Cordova

~20min

About me

Florian Rival

@florianrival

github.com/4ian

App developer @

Developer of

React Native

enables you to build world-class application on native platforms

based on JavaScript and React

Facebook uses React Native in multiple production apps and will continue investing in React Native

How react native works

iOS or Android

JavaScriptCore

React Native

provided by iOS, embedded on Android

your JavaScript app

Components

APIs

React Native JS components

Natif

JS

WebView

 JavaScript app

Chrome/

UIWebView

 JavaScript app

JSCore

App with native components

cordova

React native

an app organisation

export default class ClickableImage extends Component {
  render() {
    return (
      <TouchableHighlight onPress={this.props.onClick}>
        <Image style={styles.image} source={{ uri: this.props.imageUri }}/>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

bootstrap is done in index.[os].js

use Components the react way

use APIs provided by RN

onClick() {
    fetch('http://my/api').then((response) => { 
        Alert.alert(response.json())
    });
}

Style your components 

No real css, real encapsulation

flexbox based layout

most properties are similar to the css you are used to

<Text style={this.myStyle} />
<Text style={{margin: 10, color: #BADA55}} />
<View style={{flexDirection: 'row'}}>
    <Text style={{flex:0}}>I fit</Text>
    <Text style={{flex:1}}>I'm taking all the spaaaaace</Text>
</View>

Animations 

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        Animated.timing(this.state.progress, {
          toValue: 200,
        }).start();
    });
}

render() {
    return (<Animated.View style={{
      transform: [{
        translateX: this.state.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [500, 0],
        }),
        opacity: this.state.progress
      }],
    }}>
        <Text>Hello world</Text>
    </Animated.View>);
}

transform css-like properties

animated.* components

Performance

in general, performance is really satisfying 

60fps, smooth transitions, smooth animations even on older devices

Beware of

Very large images on Android,

Run fetches/cpu intensive code after interactions

 

deactivate dev mode first

Digging into Native Code

CALLING  NATIVE CODE

Add Objective-C/Java code directly inside your project

INTEGRATE  EXISTING NATIVE COMPONENT

full control on the native projects  

Make it easier to integrate custom SDK (Facebook, Parse...) without having to rely on plugins

RN Ecosystem

react-native github

25000 stars, 500 contributors, a release each ~2weeks

react.parts

Lots of components (from icons to full messenger component) 

Can i haz...

camera?

Yup

Deep links?

Yup, yup

sharing menu?

Sure bro

facebook login?

Ok

maps?

Yuuuuuuuus

emoji in texts?

Yeeeaahh 😺

 DEVELOPER experience

Yellow box

Chrome debugging

No network requests monitoring, use V8 instead of JSC

developer menu

very simple inspector, debugger launchers,

FPS counter, options to connect to the remote packager

LIVE Reload in the emulators/devices

 caveats/pain points

the whole framework is very young

platform parity

Testing is hard

Jest is (was?) slow to start,

hard to test components

incomplete polyfills of browsers api

100% compatibility between OSes is not a goal 

we pushed a fix to RN and made rn-camera-roll/rn-image-resizer 

Regularly test on both OSes

a few incomplete/outdated documentation pages

navigation is a bit hard to start with

upgrading is not easy 

Navigator does a good job, but no easy-to-use router

Be cautious and follow the doc

adding plugins is done manually 

Solutions are being created

most pain points are addressed by the rn team

Thanks!

deck

By Florian Rival