React Native

Native App Development for Web Developers

Nader Dabit

@dabit3 on Twitter & Github

About Me

Software developer by trade
Now a full time consultant and trainer
Originally a web developer, now doing both web and mobile development
Transitioned from Angular > React + React Native in early 2015
Founder of React Native Training
Author of React Native in Action from Manning Publications
Host of React Native Radio on Devchat.tv
Open source contributor to React Native and various React Native projects

What is React Native?

Framework for building Native Mobile Apps using JavaScript

Built on top of React
Use React Native to build cross platform mobile applications
Open sourced and maintained by Facebook
Apps written in JavaScript
Learn once, write anywhere
80%-95% code reuse
Compiles to real native mobile applications
Uses the same fundamental UI building blocks as real native apps under the hood

React Native vs HTML

<div>
  <p>Hello World</p>
</div>

<View>
  <Text>Hello World</Text>
</View>

HTML

React Native

React Native vs HTML

HTML | React Native

React Native vs React

import React from "react"

class SomeComponent extends React.Component {
  render () {
    return (
      <div>
        <p>Hello World</p>
      </div>
    )
  }
}

React

React Native vs React

import React from "react"
import { View, Text } from "react-native"

class SomeComponent extends React.Component {
  render () {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    )
  }
}

React Native

React Elements

import { Button, SocialIcon } from "react-native-elements"

<Button
  title="Button" />

<SocialIcon
  type="facebook" />

React Native vs Hybrid

Pros

Project momentum
React ecosystem / Redux / one way data flow / Mobx
Better user experience - apps feel much better and smoother
No longer dealing with browser apis
Great developer experience
Hot / live reloading
Open Source
Core contributors of React Native are using it in their own production apps and in their companies
Fun to build once you learn the framework
Will be able to build for desktop, web, + other platforms
Continuous deployment easy to integrate (Code Push and similar)

React Native vs Hybrid

Cons

Still new - 24 months iOS / 18 months Android
Fairly Unstable - New versions every 2 weeks, some with breaking changes
Another technology that you have to learn (React), while Cordova can be picked up quickly by anyone who knows HTML + JavaScript.
Unfamiliar development environments and platforms (xCode, Android IDE)
Styling inconsistencies with CSS
Not yet quite to feature parity with Cordova

Is React Native Production Ready?

Facebook Groups
Facebook Ads Manager
Facebook News Feed
Instagram
Tesla
Wix
WalMart
Airbnb
Delivery.com

Current Platforms

Can currently target Android, iOS and Windows

In development to target MacOS, Web, Apple TV, Tizen

Future / Developing Platforms

Compiles this:

React Native Web

<div>
  <span>Hello World</span>
</Div>

To this:

<View>
   <Text>Hello World</Text>
</View>

Fundamental changes in the way future engineered teams are designed and organized.

What this means

Single Team => 2 - 5 Platforms

Organized by technology
iOS, Android, Web, Desktop teams
Expensive to build and maintain across platforms
Inconsistent APIs
Difficult to test across platforms
Virtually zero code reuse
Multiple languages, frameworks, and APIs

Traditional Engineering Teams

Organized by feature ownership
Single team working on Mobile, Web, and Desktop
Much less expensive to build and maintain applications across platforms
Consistent APIs
Less context switching
Large increase in code reuse
Single or smaller number of languages
Smaller number of frameworks
Possible consulting with native developers for complex feature implementations.
Nodejs backend ++

Engineering Team of the Future

Cross stack engineering is an opportunity that is blossoming with React Native

- James Ide, Engineer at Expo

Team × Technology React Conf 2016

Faster development time
Consistent apis
Can build for Web, Desktop, and Mobile
Was organized by platform, now by feature
Consistent user experience across platforms
Those familiar with native platforms will be especially valuable
Development is less expensive in terms of time and money
Cross Stack engineers more valuable, resulting in higher pay

Birth of the Cross Stack Developer

Growing opportunity in this space

Because Native development is becoming more and more expensive, engineers who can deliver applications across platforms and stacks will become extremely valuable and in demand.

Coming to React Native from the web

Dev environments / IDEs
Application UI
Routing
Styling inconsistencies vs CSS
Publishing apps to Play and App Store
Bridging native code (advanced dev)

Main stumbling blocks

Xcode (iOS)

Coming to React Native from the web

Routing / Navigation

Different paradigm than web routing
Navigation flows are hard to reproduce
Navigation UX is different each platform (managed by some navigation frameworks)

Routing - React

Coming to React Native from the web

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

const App = () => (
  <Router>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
    </ul>
    <Switch>
      <Route exactly pattern="/" component={Home} />
      <Route pattern="/about" component={About} />
      <Route pattern="/topics" component={Topics} />
      <Route component={NoMatch}/>
    </Switch>
  </Router>
)

Coming to React Native from the web

Routing / Navigation - Angular 2

const appRoutes: Routes = [
  { path: 'home', component: Home },
]

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})

// HTML

<h1>Angular Router</h1>
<nav>
  <a routerLink="/" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
</nav>

<router-outlet></router-outlet>

Coming to React Native from the web

Routing / Navigation - Vue

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
  '/': Home,
  '/about': About
}
new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

import React from 'react';
import {
  Text,
  View,
  Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import AboutScreen from './AboutScreen'

class App extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello!!</Text>
        <Button
          onPress={() => navigate('About')}
          title="Chat with Lucy"
        />
      </View>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  About: { screen: AboutScreen },
});

export default SimpleApp

Routing / Navigation - React-Navigation

Coming to React Native from the web

Navigation - Getting Started

Explore different router Apis, choose one that makes sense to you

react-navigation - React Native Community
native-navigation - Airbnb
react-native-navigation - Wix

Coming to React Native from the web

Styling React Native

Uses JavaScript styling
Similar api, but not exactly, as css
Uses Flexbox for layout
Rely heavily on the documentation, especially at first

Styling React Native

// css
.header {
  width: 100%;
  background-color: red
}

// html
<div class="header" />

Web

// styles variable
styles = {
  header: {
    width '100%',
    backgroundColor: 'red'
  }
}

// style
<div style={styles.header} />

React

Styling React Native

// styles variable
styles = StyleSheet.create({
  header: {
    width '100%',
    backgroundColor: 'red'
  }
})

// style
<View style={styles.header} />

React Native

Styling React Native

Reusing styles in React Native vs Web

In web development, we reuse classes:

// css
.button {
  background-color: blue;
}

// html
<div>
  <button class='button'>Button1</button>
  <button class='button'>Button1</button>
  <button class='button'>Button1</button>
</div>

Styling React Native

Reusing styles in React Native vs Web

In React / React Native, we reuse components:

import React from 'react'
import { View, TouchableHighlight, Text } from 'react-native'

const Button = () => (
  <TouchableHighlight style={styles.button}>
    <Text style={styles.buttonText}>Hello World</Text>
  </TouchableHighlight>
)

class Home extends React.Component {
  render () {
    return (
      <View>
        <Button />
        <Button />
        <Button />
      </View>
    )
  }
}

APIs and Built In Components

Coming to React Native from the web

Built In APIs and Components

Coming to React Native from the web

// Images (component)
import { Image } from 'react-native'

<Image
  source={require('./img/favicon.png')}
/>

<Image
  source={{ uri: 'http://www.myimage.com' }}
/>

// Alert (API)
import { Alert } from 'react-native'

Alert.alert('Alert Title', 'Alert Msg')

Browser Polyfills

Coming to React Native from the web

console.{log, warn, error, info, trace, table}

CommonJS require

XMLHttpRequest, fetch

{set, clear} {Timeout, Interval, Immediate}, {request, cancel}

AnimationFrame

navigator.geolocation

Get a quick start by using UI Libraries, like bootstrap for the web.

React Native Elements

Get a quick start by using UI Libraries, like bootstrap for the web.

React Native Material Design

Get a quick start by using UI Libraries, like bootstrap for the web.

Shoutem UI

Tips when beginning

React Native

99% of work can be accomplished from command line and any text editor
Rely on third party modules for basic styling and functionality if not 100% certain on implementation
Reach out to community for questions, a lot of helpful people out there
Possibly get started with Expo