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

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

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';
}

Rebuilding the views

Routing/navigating

Developer experience

The result

Releasing

The bad

The not so good

  • Android
    • WebView
    • WebSockets
  • Bugs and crashes
  • Incomplete (*)
  • OS X only
  • Native modules (*)

Native Modules

Native UI Components

Reuse your old native stuff

Bridging the gap (yourself)

Mobile and web

Community made

No silver bullet

JavaScript Fatigue

@ericclemmons

Saul: “How’s it going?”
Me: “Fatigued.”
Saul: “Family?”
Me: “No, Javascript.”

The idea.
Not the implementation

Other approaches

Elm

Cycle.js

om

Fundamentals and transferrable knowledge

Hot Code Pushing

Section 3.3.2 of the iOS Developer Program explicitly permits this 

 

provided that code does not change the primary or advertised purpose of the Application as submitted to the App Store.

Demo

Takeaways

  • Great if you already know React
  • Nice way to step into native
  • Don't get married to platforms
  • Still early
  • The idea is golden
  • Exited about the future

Questions?

Thanks!

@eiriklv / vullum.io

Learn Once Write Anywhere (NDC London)

By Eirik Langholm Vullum

Learn Once Write Anywhere (NDC London)

Being a productive developer across platforms without being a unicorn

  • 752
Loading comments...

More from Eirik Langholm Vullum