Retour d'expérience

React Native

-

Présentation de React Native

History

• Announced by Facebook in March 2015

• Used on iOS in production by Facebook since 2015

• Android support since late 2015

• #13 open-source repository on GitHub March 2018

Usage in the wild

• Used by instagram since 2017

• Used by Airbnb since 2016

• Used by Walmart, Bloomberg, Tesla

How it works

React Native native code

JavaScript engine

App code (React)

Platform (iOS/Android)

React Native APIs

native modules

native

Javascript

bridge

How it works

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

• Unit testing with Jest (or Mocha optionally)

• e2e testing with Detox or native solutions

Key features

• 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

Applications are rendered at 60fps

• Native rendering is done asynchronously (bridge)

• Any "lag" in business logic/heavy computation won't slowdown the interface

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

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

Comparison with PhoneGap/Cordova (or Web Views)

Comparison with Phonegap/Cordova

• Not based on "WebViews" (native app feeling)

• Easier to dig into native code (e.g: integrating Zendesk)

• Push changes without store submission (can still be done with CodePush)

• Development should be done on a Mac for iOS

During development

• Large ecosystem, lots of components

• Debugging is done with Chrome Debugger but not as complete as with webviews

• Developers must sometimes deal with native tooling (XCode, Android Studio)

• Most APIs (geolocation...) are backed in React Native

• Regular upgrades, needs care from developers

Retours sur des problématiques rencontrées

RN 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...)

Reuse of codebase for web apps

• We can share all business logic

• User interactions

• Routing

Reuse of codebase for web apps

Slides