Building mobile apps with React

React Native from a web developers

perspective

Eirik Vullum

- Scandinavia Online

- Consulting / Training

eiriklv@github
eiriklv@twitter
http://vullum.io

This talk will cover

  • Going from web to native
  • What React native is and how it works
  • The experience of building an app with RN
  • The good, the bad and the future

Recap

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

Composition

const ChatApp = React.createClass({
  ...

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

Battle tested

Community

Big Players

Moving from web to native

(Stockholm syndrome..?)

Native Developers

Go native?

I'm just a webdev

  • Big investment in learning
  • Several paradigms
    (web, ios, android)
  • New (hard) layout systems
  • Different syntax

What about?

They're nice, but..

  • Still very imperative
  • Poor layout systems
  • No React!

Go hybrid?

Let's face it..

  • Just not good enough
  • Not the same feel
  • Not the same performance

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.

From the website

Why React Native?

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

Let's dive in

Basic building blocks

React.js React  Native
Block <div> <View>
Inline <span> <Text>
Image <img> <Image> 
// 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

Basic

  • ListView
  • ScrollView
  • TextInput

Platform Dependent

  • SwitchIOS
  • SwitchAndroid
  • SliderIOS
  • ToolbarAndroid

Clickables

  • TouchableHighlight
  • TouchableOpacity
  • ....

More basic ones

  • WebView
  • MapView
  • Modal

Routing

  • Navigator

Native API's

API's

  • Dimensions (device dims)
  • CameraRoll
  • AsyncStorage
  • StyleSheet
  • Animations

Platform dependent

  • StatusbarIOS
  • PushNotificationsIOS

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 infix

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

Polyfilling

Networking

  • XMLHttpRequest
  • WebSocket

Layout

  • Flexbox

Styling and layout

// 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 does all of this work out in real life?

Toppsaker

Live updates

Mobile web version

Our app

  • React Views
  • Flux based data flow (fluxxor)
  • 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';
}

Rebuilding the views

Routing/navigating

Developer experience

The result

The bad

The not so good

  • Android
    • WebView
    • Websockets
  • Bugs and crashes
  • Missing features
  • OS X only (linux sort of..)
  • Native modules (*)

Native Modules

Mobile and web

No silver bullet

Takeaways

  • Great if you already know React
  • Nice way to step into native
  • Still early
  • Exited about the future!

Questions?

Thanks!

Building mobile apps with React Native (talk)

By Eirik Langholm Vullum

Building mobile apps with React Native (talk)

Introduction on building mobile apps with React Native - a web developer perspective.

  • 3,198

More from Eirik Langholm Vullum