With each passing year, JavaScript becomes a more and more suitable language for mobile development. Regardless of whether you use Cordova to run a locally-hosted web app on the device, or a framework like React Native to generate native views from JavaScript, there's a common challenge: tapping into native device functionality with plugins. We'll set our sights on iteratively building simple Cordova and React Native plugins, which provide a JavaScript facade to access iOS or Android SDK functionality. As our plugins evolve, our understanding of best practices for "bridging the gap" -- and indeed our understanding of how these tools work internally will become more accurate and comprehensive. After this talk, developers will think of technologies like Cordova and React Native as less of a temperamental black box, and will feel more confident in the prospect of debugging, contributing to or authoring a native plugin of their own.

1. BRIDGING THE GAP
WEB AND NATIVE
MIKE NORTH
JAZOON, FALL 2016
@MICHAELLNORTHgithub.com/mike-north

3. @MICHAELLNORTH
TEXT

7. @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

9. WHAT ARE YOU SHIPPING?

10. TWO EXAMPLES
CORDOVA / REACT NATIVE

12. CORDOVA

13. CORDOVA
JAVA
OBJECTIVE-C
Bridge

14. 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

15. WHAT ARE WE
BUILDING?

21. CORDOVA
OBJECTIVE-C

27. CORDOVA
JAVA

30. CORDOVA
JAVASCRIPT

31. `

32. CORDOVA
LINKING PLUGINS

34. CORDOVA
USING THE PLUGIN

37. CORDOVA
BUILD, RUN

41. @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.*

42. REACT NATIVE

43. WHAT ARE WE
BUILDING?

46. REACT NATIVE
JAVA
OBJECTIVE-C
Bridge

47. REACT NATIVE
JAVA
OBJECTIVE-C
Bridge

48. 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

49. REACT-NATIVE
GETTING STARTED

57. REACT-NATIVE
OBJECTIVE-C

63. REACT-NATIVE
JAVASCRIPT

68. REACT-NATIVE
PROMISES

72. REACT-NATIVE
JAVA

73. @MICHAELLNORTH
PIECES OF JAVA REACT NATIVE INTERFACES
▸ Package
▸ Module
▸ Module#method

79. @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

80. TAKEAWAYS

81. IT’S NOT UNLIKE
AJAX

82. PLUGINS:
USE CORDOVA

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

84. KNOW, IF NOT
MASTER THE BRIDGE

85. THANKS
I’m available for react-native, JavaScript
and rails/elixir training & consulting!
michael.l.north@gmail.com
@MICHAELLNORTH

86. @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)