Developing React Native Upon Native App (React Native Portland meetup)

A talk about how we developed React Native upon Native app, especially from Android stand point.
There are 3 topics:
1. how our architecture looks like and key components to make a hybrid app work
2. Developing and Testing flow
3. How the team changed by developing a hybrid app

Transcript

1. Developing React Native Upon Native App Tomoak Imai @React Native Portland 7/20/2017
2. Hi I’m Tomo Mobile Developer (Android, ReactNative, iOS) Joined Mercari, Inc. 2014 twitter: @tomoaki_imai github: tomoima525
3. Can you tell the difference between Native & React Native?
4. Native + React Native Hybrid App
5. Native + React Native Hybrid App Native (TL, SearchBar, NavBar) React Native React Native React Native
6. Native + React Native Hybrid App /BUJWF
   TDSFFOT 3FBDU
   /BUJWF
   TDSFFOT 5JNF
   -JOF
   -JTUJOH
   $BNFSB
   (BMMFSZ
   $IFDLPVU
   *UFN%FUBJM
   %FFQMJOL8FC 4FUUJOHT
   &EJU
   1SPpMF
   *OCPY
   $IBU
   'PMMPX
   MJTU )BT
   BOJNBUJPO
   .VMUJ
   UISFBEFE
   QSPDFTT
   6TFT
   04
   'SBNFXPSL 4UBUJD
   QBHFT
   
   
   .PSF
   GBODZ
   TDSFFOT
   
7. 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
8. Agenda - Hybrid App Architecture and Key Components - Developing/Testing Flow for Hybrid App - How the team changed by developing Hybrid App
9. Hybrid App Architecture and Key Components
10. 3FBDU
    'SBHNFOU 3FBDU
    3PPU
    7JFX 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
11. 3FBDU
    'SBHNFOU 3FBDU
    3PPU
    7JFX 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
12. 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)
13. 3FBDU
    'SBHNFOU 3FBDU
    3PPU
    7JFX 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
14. React Fragment • Handles which React Native Screen to open
15. React Fragment scene = “INBOX” USER_ID = “xxxx” HashMap<String, String> data = new HashMap<>(1);
 data.put(USER_ID, userId);
 ReactFragment inboxContent = ReactFragment.newInstance(INBOX, data); • Handles which React Native Screen to open HomeActivity.java
16. React Fragment scene = “INBOX” USER_ID = “xxxx” HashMap<String, String> data = new HashMap<>(1);
 data.put(USER_ID, userId);
 ReactFragment inboxContent = ReactFragment.newInstance(INBOX, data); HashMap<String, String> 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
17. 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) => <RouterWithRedux navigationBarStyle={styles.navigationBarStyle}> <Scene key="root"> { // Setup all scenes _.map(scenes, (component, name) => ( <Scene key={name} title={name} component={component} // Setup initial scene {...(context.initialScene === name ? initialSceneProps : {})}/>))} </Scene> </RouterWithRedux>;
18. 3FBDU
    'SBHNFOU 3FBDU
    3PPU
    7JFX 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
19. 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}); };
20. 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;
 ….
21. Event Hook Module &WFOU
    XF
    TFOU
    GSPN
    3FBDU
    /BUJWF /BUJWF
    #BDL UP
    DMPTF
    3FBDU/BUJWF
    4DSFFO
    0QFO
    OFX
    "DUJWJUZ7JFX$POUSPMMFS
    -PH
    &WFOU
    &SSPS
    $SBTI
    &ODSZQUJPO
22. Developing/Testing Flow for Hybrid App
23. Code Coverage Error Reporting Chat Ops Release Testing Notification Crash Report (thru Native) Upload Push
24. Chat Ops Release Testing Notification Code Coverage Error Reporting Upload Push Crash Report (thru Native)
25. Uploading to GCS • All Pull Requests will be deployed to GCS from CI
26. 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!
27. Chat Ops Release Testing Notification Code Coverage Error Reporting Upload Push Crash Report (thru Native)
28. Release Automation • Deployment to Production is done from Slack gsutil cp -a 4.1.2/* release/
29. How the development changed?
30. 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
31. Team members are becoming full stack mobile engineers
32. 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!!