30 months on React Native with 30 developers

Hi! 👋

@FlorianRival on

Architect-Developer @

Developer of

So you said React Native?

History

  • Announced by Facebook in March 2015
  • Used on iOS in production by Facebook since 2015
  • Android support since late 2015

61 000 stars on GitHub in March 2018

  • #13 open-source repository on GitHub March 2018

Usage in the wild

  • Used by instagram since 2017

https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7

  • Used by Airbnb since 2016

https://www.youtube.com/watch?v=tUfgQtmG3R0

  • Used by Walmart, Bloomberg, Tesla...

http://facebook.github.io/react-native/showcase.html

How it works

Not based on "WebViews" 

React Native (iOS/Android)

JavaScript engine

Javascript code (React)

React Native exposes native components (View, Text, TouchableOpacity...)

How it works (2)

React Native native code

JavaScript engine (JSCore)

App code (React)

Platform (iOS/Android)

React Native APIs

native modules

native

Javascript

bridge

How it works (3)

App code (React)

  • Application entirely written in Javascript (ES2018)
  • React Native exposes native components (View, Text, TouchableOpacity...)
  • You can use native APIs provided by React Native (Geolocation, CameraRoll...)
  • Flowtype or optionally Typescript for static typing
  • Unit testing with Jest (or Mocha optionally)
  • e2e testing with Detox or native solutions

How we started

Late 2014

BAM founded

Using Cordova to achieve the "cross-platform dream"

Late 2015

Started 2 pilot projects with React Native

3 weeks later

"We should have stayed on Cordova"

3 weeks later

"Let's use React Native for all the apps"

Late 2016

BAM is ~30 people

80% of our apps are React Native, flow typed

Early 2018

80% of our apps are React Native, the rest are native with React Native inside

BAM is 50+ people

What's so great?

Single codebase

  • Components can be specialized for a platform

A single app exists and has to be maintained

  • 90% code reuse between iOS and Android
  • A single development team can deliver on iOS and Android
UserPicture.ios.js
UserPicture.android.js
index.js
src/App.js
    MyComponent.js
    ...
ios/MyApp.xcodeproj
    ...
android/build.gradle
       /app/...

Structure of an app

  • Platform-specific UI components
  • Native mobile gesture
  • Fluid transitions
  • Native effects (e.g. "Ripple" effects)

Native-like User Experience

Apps can't be distinguished from a native app

  • Javascript code is isolated from native rendering

Performance

Separate threads = ♥️

  • Native rendering is done asynchronously (bridge)
  • Any "lag" in business logic/heavy computation won't slowdown the interface

Developer Experience

Fast learning curve

Web skills can be ported to React Native

  • ~3 weeks onboarding for a new developer
  • Most engineers won't need to learn specific iOS or Android development skills
  • ~1 week onboarding for a React.js developer

Native skills are welcome to React Native

http://artsy.github.io/blog/2017/07/06/React-Native-for-iOS-devs/

https://egghead.io/browse/frameworks/react-native

Getting started

2. At BAM, we encourage to share knowledge:

1. Start with some great courses:

https://github.com/bamlab/dev-standards

Development

  • Large ecosystem, lots of reusable components

React Native ecosystem:

  • Most APIs (geolocation...) are backed in React Native
  • VSCode, Atom or Webstorm have integrations with Flowtype/Typescript, Jest for testing.

Development (2)

UI libraries:

React Native Elements

Native Base

React Native Paper

Development (3)

Debugging:

  • Debugging is done with Chrome Debugger but not as complete as with webviews/web.
  • Developers must sometimes deal with native tooling (XCode, Android Studio). Ex: icons/splashscreens

Native:

  • A developer menu is accessible in the app with remote debugger connection

If you come from Cordova/Phonegap

Easier for:

  • Digging into native code (e.g: integrating 3rd party SDKs like Zendesk)

Harder for:

  • Development should be done on a Mac for iOS, you can't avoid it

Same:

  • Live reload/Hot reload: fast feedback loop during development

Pain points?

Navigation ⚠️

  • React Navigation: 100% JS powered, customizable, becoming the de-facto standard
  • react-native-navigation (Wix): 100% native, exact same components as native apps
  • native-navigation (Airbnb): for embedding RN inside a native app. Not maintained anymore, see BAM fork instead.

👉 Be sure to choose the right one at the beginning of the project

Beware of platform inconsistency 📱

  • React is learn once, write anywhere (not run anywhere!)
  • Shadow handling for views
  • Fonts rendering
  • Some APIs are iOS/Android only

👉 Always test on iOS and Android regularly

👉 Have a device lab

React Native upgrades 💣

  • New React Native release each month

👉 Don't wait for months before upgrading

  • In the past, some native breaking changes: packages to be upgraded
  • In the past, some JS breaking changes (with codemod provided sometime)

Advanced use: Can I do <x> with React Native ?

React Native inside a native app

  • Integration is invisible for end user
  • Need to onboard existing native developers

3rd party SDKs

  • Stripe
  • Firebase Analytics
  • Zendesk
  • Push notifications (Batch.com...)

https://github.com/bamlab/react-native-batch-push

Reuse of codebase for web apps

  • We can share all business logic

Same code for a native app and a webapp?

  • Same for API 

Feasible, but require adaptations for:

  • User interactions
  • Routing
  • Same for components implementing business rules

React Native for Web

https://github.com/react-native-web-community

React Native for Web Community (BAM)

https://github.com/necolas/react-native-web

Thanks!

https://slides.com/florianrival

Slides are online:

@FlorianRival

@bam_lab