Why the hybrid
approach finally works

@peterpeerdeman

architect in online

A happy nerd club

Context

"Delivering mobile experiences that match our users expectations"

A little hybrid history at Lifely

"From native to web ... and back again"

Frankwatching app

(native iOS)

Leefplezier

(cordova/ionic)

Leefplezier

(cordova/ionic)

(cordova/angular)

Part-up

(cordova/react/meteor)

StartDashboard

(reactnative/meteor)

HvA

(reactnative)

GrowBee

(reactnative)

React? ReactNative?

React (web!)

  • javascript web application framework
  • developed and maintained by Facebook
  • component based
  • declarative views
  • components keep internal state
                    
import React from 'react';

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  render() {
    return (
      

        Seconds: {this.state.seconds}
      

    );
  }
}

ReactDOM.render(, mountNode);

React Native (mobile!)

  • react paradigm
  • native components instead of Webviews
  • native navigation iOS / Android
  • render predictability
  • community support
                    
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {isShowingText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      {display}
    );
  }
}

Look familiar?

                    
import React from 'react';

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  render() {
    return (
      

        Seconds: {this.state.seconds}
      

    );
  }
}

ReactDOM.render(, mountNode);
                    
                    
                    
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {isShowingText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      {display}
    );
  }
}

Hybrid with benefits

benefits

  • 1 codebase
  • 1 language expertise
  • 1 QA (business logic)
  • rich plugin/bridge ecosystem
  • hot code reload

but most of all...

native user experience

Downsides?

downsides

  • "sdk feature delay"
  • plugin/bridge dependency
  • single javascript thread
  • patents/uncertainty
  • specific custom behaviors

Some questions arise...

"Does the experience compare to two native apps?"

It does, actually

"Don't you bump into boundaries constantly?"

We don't mind designing
within boundaries

"I've already got 2 native apps"

Integrate ReactNative in existing apps

Hamvraag...

"Is it for me?"

Yes:

  • Quick multiplatform development
  • Leverage JS developerment skills
  • Optimize QA efficiency

"You have got no reason not to use ReactNative"

ReactNative Meetup

link to livestream recording

Why the hybrid
approach finally works

@peterpeerdeman