Developing React Native Upon Native App Tomoak Imai @React Native Portland 7/20/2017

Hi I’m Tomo Mobile Developer (Android, ReactNative, iOS) Joined Mercari, Inc. 2014 twitter: @tomoaki_imai github: tomoima525

Can you tell the difference between Native & React Native?

Native + React Native Hybrid App

Native + React Native Hybrid App Native (TL, SearchBar, NavBar) React Native React Native React Native

Native + React Native Hybrid App /BUJWFTDSFFOT 3FBDU/BUJWFTDSFFOT 5JNF-JOF -JTUJOH $BNFSB (BMMFSZ $IFDLPVU *UFN%FUBJM %FFQMJOL8FC 4FUUJOHT &EJU 1SPpMF *OCPY $IBU 'PMMPXMJTU )BTBOJNBUJPO .VMUJUISFBEFEQSPDFTT 6TFT04'SBNFXPSL 4UBUJDQBHFT .PSFGBODZTDSFFOT

Developing Hybrid App is not simple! - How to Bridge data between React Native & Native - Using Native thru React Native, vice versa - Developing/Testing React Native upon Native App • Need to consider more things compared to React Native App

Agenda - Hybrid App Architecture and Key Components - Developing/Testing Flow for Hybrid App - How the team changed by developing Hybrid App

Hybrid App Architecture and Key Components

3FBDU'SBHNFOU 3FBDU3PPU7JFX Architecture in a nutshell 3FBDU/BUJWF 3FBDU*OTUBODF.BOBHFS /BUJWF .PEVMFT 0UIFS "DUJWJUJFT 3FBDU 4FSWJDF &WFOU )PPL 3FBDU 3FQPTJUPSZ JS bundle file React Native Native Framework Bridge

3FBDU'SBHNFOU 3FBDU3PPU7JFX Architecture in a nutshell 3FBDU/BUJWF 3FBDU*OTUBODF.BOBHFS /BUJWF .PEVMFT 0UIFS "DUJWJUJFT 3FBDU 4FSWJDF &WFOU )PPL 3FBDU 3FQPTJUPSZ JS bundle file React Native Native Framework Bridge

React Service & React Repository • React Service is a factory class that creates React Instance Manager • Also checks updates on JS Bundle • React Repository is where JS Bundle file is stored 3FBDU 4FSWJDF 3FBDU 3FQPTJUPSZ Load Bundle on memory from Asset directory 3FBDU*OTUBODF .BOBHFS Checks update on server Bundle from Local server (for development usage)

3FBDU'SBHNFOU 3FBDU3PPU7JFX Architecture in a nutshell 3FBDU/BUJWF 3FBDU*OTUBODF.BOBHFS /BUJWF .PEVMFT 0UIFS "DUJWJUJFT 3FBDU 4FSWJDF &WFOU )PPL 3FBDU 3FQPTJUPSZ JS bundle file React Native Native Framework Bridge

React Fragment • Handles which React Native Screen to open

React Fragment scene = “INBOX” USER_ID = “xxxx” HashMap data = new HashMap<>(1);
 data.put(USER_ID, userId);
 ReactFragment inboxContent = ReactFragment.newInstance(INBOX, data); • Handles which React Native Screen to open HomeActivity.java

React Fragment scene = “INBOX” USER_ID = “xxxx” HashMap data = new HashMap<>(1);
 data.put(USER_ID, userId);
 ReactFragment inboxContent = ReactFragment.newInstance(INBOX, data); HashMap params = getArguments().getSerializable(DATA); 
 Bundle bundle = new Bundle();
 bundle.putString( ”initialScene”, getArguments().getSerializable(SCENE));
 bundle.putSerializable(React.Param.DATA, data); 
 reactView.startReactApplication( reactManager, ReactService.MAIN_MODULE, bundle); • Handles which React Native Screen to open HomeActivity.java ReactFragment.java

React Fragment • Handles which React Native Screen to open class InboxScene extends React.Component { getChildContext() { if (this.props.user_id) { return { data: { user_id: this.props.user_id } }; } } … import * as scenes from './scenes'; const RouterWithRedux = connect()(Router); const initialSceneProps = { initial: true }; const Scenes = (props, context) => { // Setup all scenes _.map(scenes, (component, name) => ( ))} ;

3FBDU'SBHNFOU 3FBDU3PPU7JFX Architecture in a nutshell 3FBDU/BUJWF 3FBDU*OTUBODF.BOBHFS /BUJWF .PEVMFT 0UIFS "DUJWJUJFT 3FBDU 4FSWJDF &WFOU )PPL 3FBDU 3FQPTJUPSZ JS bundle file React Native Native Framework Bridge

Event Hook Module • Native Module that pass events/data from React Native to Native import { NativeModules } from 'react-native'; export const openActivity = (name, data = null) => { NativeModules.EventHook.sendEvent('openActivity', { name,data}); };

class ReactEventHookModule extends ReactContextBaseJavaModule {
 ReactEventHooks hooks;
 @ReactMethod
 public void sendEvent(String name, @Nullable ReadableMap data) {
 // receive parameters from react module
 hooks.getEventProcessor().onNext(new ReactEvent(name, data));
 }
 } Event Hook Module • Native Module that pass events/data from React Native to Native import { NativeModules } from 'react-native'; export const openActivity = (name, data = null) => { NativeModules.EventHook.sendEvent('openActivity', { name,data}); }; // ReactFragment.java public boolean handleEvent(ReactEvent reactEvent) {
 switch (reactEvent.getName()) {
 case ”openActivity”:
 openActivity(reactEvent);
 break;
 ….

Event Hook Module &WFOUXFTFOUGSPN3FBDU/BUJWF /BUJWF#BDL UPDMPTF3FBDU/BUJWF4DSFFO 0QFOOFX"DUJWJUZ7JFX$POUSPMMFS -PH&WFOU&SSPS$SBTI &ODSZQUJPO

Developing/Testing Flow for Hybrid App

Code Coverage Error Reporting Chat Ops Release Testing Notification Crash Report (thru Native) Upload Push

Chat Ops Release Testing Notification Code Coverage Error Reporting Upload Push Crash Report (thru Native)

Uploading to GCS • All Pull Requests will be deployed to GCS from CI

Testing from device • Download JS Bundle file from GCS • JS Bundle can be selected with Pull Request # on Github • Super easy to test with an actual device!

Chat Ops Release Testing Notification Code Coverage Error Reporting Upload Push Crash Report (thru Native)

Release Automation • Deployment to Production is done from Slack gsutil cp -a 4.1.2/* release/

How the development changed?

Code faster, Deploy faster! • All engineer can contribute to mobile app • Over The Air update every week When All tasks are Native Native + React Native Frontend Engineer Server Engineer 2 Native Engineers

Team members are becoming full stack mobile engineers

React Native experience for Android Developer Hard to find error in JSX (it won’t show in Debugger) No Type or Null check (started to introduce Flow) Clean Architecture. Thanks to Redux and Atomic design! Less code with ES6 Live reloading!!