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

30 months, 30 developers and React Native

By Florian Rival

Made with Slides.com

30 months, 30 developers and React Native

Introduction to React Native and its usage for making apps during 30 months with 30 developers.

  • 2,263

More from Florian Rival