Intro

• Facebook pushed React for everything, creates ecosystem
  • ReactVR :)
• still 0.52 is latest -> bit flaky sometimes
• build native mobile apps using React and JS
  • wrapper over platform native elements
  • not a hybrid app, no webview, true native
• bit of “eye-opener” at the time
  • totally new use of VDOM
  • proved to be a real abstraction, not only for DOM
• green field project <-> “brown field“ project
  • significant differences

State of Native JS

battle of frameworks

React vs React Native

• non browser environment -> different components
  • div -> View
  • span -> Text
• navigation (browser vs native flow)
• styling (css vs StyleSheet object)
  • flexbox or absolute positioning only!
• networking (3rd party vs unified Fetch API)
• native bridges
• learn once, write anywhere approach
  • not “write once, use anywhere” :(

RN internals

• 2 threads are running at the same time
  • JS thread (JSCore) - layouting, JS logic
  • Native thread - rendering, gestures, animations
• they talk via thing called "Bridge" -> calling out to native

Running locally

• React Native using a developer server: packager
  • compile ES6,7 features, serve files
  • ~ webpack + babel
• Automatic change detection: watchman
  • Facebook open source tool
  • on any change -> recompile source
• Javascript is not executed on the device!
  • it is being run by Chrome debugger on V8
  • in a service worker (debuggerWorker.js)
  • communicate via packager using websockets
  • port forwarding must be enabled on android emulator 

enable "debug JS remotely"

Running in production

• React is going to run on the device
  • JSCore runtime
• we need to provide a JS bundle which contains our app
  • can be produced by react-native CLI
• need to pass js bundle location to RCTView instead of the packager address
• performance optimization
  • Perf Mon (built in react-native)
  • react-addons-perf (measure wasted renders)
    • this requires chrome debugging

How we do it

• biggest issue to solve with RN: multi repository problem
• 3 potential solution
  • copy paste
  • single RN repository
  • single APP repository

• Our approach: copy paste :(
  • DRY principle?
  • platform specific components?
  • inconsistencies
• Our goal: single RN repository

Single RN repo

Contribution

• create new folder in react-native/skyscanner_modules
• create root container and register it
• expose UI elements to storybook (storybook/index.js)
• unit test, linting, (acceptance tests using Detox)

Tips

• not every react package RN compatible!
• nor every npm package installable
• appreciate shared dependencies
• use node@8, npm@5
• state management
  • redux for larger projects
  • container state for smaller