BRIDGING THE GAPWEB AND NATIVE

MIKE NORTHJAZOON, FALL 2016

@MICHAELLNORTHgithub.com/mike-north

@MICHAELLNORTH

TEXT

@MICHAELLNORTH

GOING BEYOND WEB-BASED TOOLS

USEFUL NATIVE FUNCTIONALITY

▸ Data

▸ Camera

▸ Fingerprint Sensor

▸ Media library

▸ Network information

▸ Haptics & Vibration

▸ Storage

▸ Battery

▸ Payment

▸ Location++

▸ Passwords

▸ Encryption

▸ Touch

▸ Wearables

▸ Motion

▸ Notifications

▸ Deep URLs

WHAT ARE YOU SHIPPING?

TWO EXAMPLESCORDOVA / REACT NATIVE

CORDOVA

CORDOVA

JAVA

OBJECTIVE-C

Bridge

WHY USE CORDOVA

▸ Use all of the great new stuff for the web

▸ PWA, css, layouts, pouchdb, d3, etc…

▸ Embed web content

▸ Rich and mature plugin ecosystem

WHAT ARE WE BUILDING?

CORDOVA OBJECTIVE-C

CORDOVA JAVA

CORDOVA JAVASCRIPT

`

CORDOVA LINKING PLUGINS

CORDOVA USING THE PLUGIN

CORDOVA BUILD, RUN

@MICHAELLNORTH

CORDOVA: TL;DR▸ Contain native specifics and complexity in plugins

▸ One class to implement on native side, with callback-style control flow

▸ Not much structure, not many constraints

▸ plugins on window.*

REACT NATIVE

WHAT ARE WE BUILDING?

REACT NATIVE

JAVA

OBJECTIVE-C

Bridge

REACT NATIVE

JAVA

OBJECTIVE-C

Bridge

WHY REACT NATIVE

▸ Write JavaScript, tapping into the rich JS ecosystem

▸ React is popular, and widely used & understood

▸ Native views

▸ Web-style developer iteration

▸ Easy to get started

REACT-NATIVE GETTING STARTED

REACT-NATIVE OBJECTIVE-C

REACT-NATIVE JAVASCRIPT

REACT-NATIVE PROMISES

REACT-NATIVE JAVA

@MICHAELLNORTH

PIECES OF JAVA REACT NATIVE INTERFACES

▸ Package

▸Module

▸Module#method

@MICHAELLNORTH

REACT-NATIVE: TL;DR▸ Native views

▸ Easy to get started, Approachable for react devs

▸ More working for you on the client side than raw cordova

▸ Quick and easy in iOS land, not as much in Java

▸ Reflection —> promise vs callback

TAKEAWAYS

IT’S NOT UNLIKE AJAX

PLUGINS: USE CORDOVA

github.com/axemclion/react-native-cordova-plugin

KNOW, IF NOT MASTER THE BRIDGE

THANKSI’m available for react-native, JavaScript

and rails/elixir training & consulting!michael.l.north@gmail.com

@MICHAELLNORTH

@MICHAELLNORTH

WHAT VERSIONS OF STUFF AM I USING

IN THESE EXAMPLES

▸ react-native 0.34

▸ react-native-cli 1.0.0

▸ cordova 6.3.1

▸ node 5.11.1

▸ gcc/llvm x86_64-apple-darwin16.1.0,Apple LLVM version 8.0.0 (clang-800.0.24.1)

▸ Xcode Version 8.0 beta (8S128d)