Learn Once
Write Anywhere

with React

Native apps from a web developer's

perspective

Eirik Vullum

- Scandinavia Online

- Consulting / Training

eiriklv

http://vullum.io

This talk will cover

Developer Dilemmas (where do i start?)
Going from web to native (multiplatform)
Real World Experience (good and bad)
Takeaways and the future (?)

(Stockholm syndrome..?)

JavaScript

Moving from web to native

Push Notifications

Geolocation

Fast

Go native?

Native Developers

I'm just a webdev

Different paradigms
Non-trivial learning cost
(web, ios, android, winphone..)
Different (proprietary) layout systems
Different syntax
Similar syntax - different meaning

Oxymoron..?

I know all the languages

What about..

Cross

platform?

Titanium

NativeScript

Xamarin

They're nice, but..

Proprietary/poor layout systems
Greatest common denominator
Exposing native av JavaScript
Not JavaScript
Very imperative

Go hybrid?

Let's face it..

Still web
Just not good enough
Not the same feel
Not the same performance

I just want to build apps for everyone!

Platforms have ruined everything

Write once

Run everywhere

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

React Native

React

Why React?

Declarative

What vs. how

element = createElement(...)
element.textContent = 'Submit form!';
element.style.backgroundColor = 'blue';
element.appendChild(...)
element.parentNode.parentNode...

<SubmitButton
  color='blue'
  text='Submit form!'
/>

Imperative (how)

Declarative (what)

Simple

UI = f(props, state)

Composition

const ChatApp = React.createClass({
  ...

  render() {
    return (
      <div>
        <FriendList friends={this.state.friends} />
        <MessageList messages={this.state.messages} />
        <MessageInput handleInput={this.handleInput} />
      </div>
    );
  }
});

React

(virtual DOM)

(JavaScript)

DOM

(browser)

Application

state

patch DOM

props

change

Fast

Battle tested

Community

Big Players

Rendering targets

React Canvas

React Native

react-blessed

Why React Native?

Same paradigm (as React web)
It's JavaScript (npm)
Sane layout system (*)
Truly native
Great backing and community

Diving in

Building blocks

	React.js	React Native
Block	<div>	<View>
Inline	<span>	<Text>
Image	<img>	<Image>
List	<ul>	<ListView>

// React.js
const Component = React.createClass({
  render() {
    return (
      <div>
        <span>Hello World</span>
        <img src='...' />
      </div>
    );
  }
});

// React Native
const Component = React.createClass({
  render() {
    return (
      <View>
        <Text>Hello World</span>
        <Image source={{ uri: '...' }} />
      </View>
    );
  }
});

Native Components

Common elements

ListView
ScrollView
TextInput
WebView
MapView
Modal

Platform Dependent

(maps to native equivalents)

SliderIOS
ToolbarAndroid
TabBarIOS
DrawerLayoutAndroid

Clickables

(making elements actionable)

TouchableHighlight
TouchableOpacity
TouchableNativeFeedback
....

Routing

(Inherent to native platforms)

Navigator

Native APIs

APIs

Alert
Dimensions
CameraRoll
AsyncStorage
StyleSheet
Animations

Platform dependent

(Inherent to specific platform)

StatusbarIOS
PushNotificationsIOS
ToastAndroid
BackAndroid
VibrationIOS

Code sharing and reuse

Platform API

const { Platform } = require('react-native');

if (Platform.OS === 'ios') {
  // runs on ios..
}

if (Platform.OS === 'android') {
  // runs on android..
}

File extension suffix

/**
 * requires ./App.android.js on Android
 * requires ./App.ios.js on iOS
 */
const App = require('./App.js');

Polyfilling

Definition

by Remy Sharp

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

Networking

XMLHttpRequest
WebSocket
As JavaScript

Layout and styling

Flexbox
JavaScript

// React.js
const Component = React.createClass({
  render() {
    return (
      <div style={styles.container}>
        <span style={styles.text}>Hello</span>
      </div>
    );
  }
});

const styles = {
  container: {
    flex: 1
    backgroundColor: 'red',
  },
  text: {
    color: 'green'
  }
};

// React Native
const Component = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello</Text>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1
    backgroundColor: 'red',
  },
  text: {
    color: 'green'
  }
});

Benefits

Easier to modularize
Few or no global styles

How?

JSCore

How does all of this work out in real life?

Our app

Live updates

Mobile web version

App

React Views
Data / State logic (flux)
HTTP API requests (superagent)
websockets (socket.io)

socket.io fix

/**
 * Need this to make socket.io
 * work in production.
 *
 * JSCore is running on device
 * which has no window.navigator.userAgent,
 * but when you run in debug mode
 * everythings runs in Chrome (V8)
 * which does have window.navigator.userAgent
 */
if (!window.navigator.userAgent) {
  window.navigator.userAgent = 'react-native';
}