The State of

React Native

O que é e como funciona?

1
 

Como React Native se compara ao Flutter?

1
 

O que é rearchitetura do React Native?

1
 

Andrei Calazans

@AndreiCalazans

@Andrei_Calazans

g2i.co

React Native

Productivity

Developer Experience

Native look and feel

function App() {
  return (
    <ScrollView>
      <Image />
      <View>
        <Text>Welcome to React</Text>
      </View>
      <Text>Step One</Text>
      <Text>See Your Changes</Text>
      <Text>Debug</Text>
      <Button title="Find out more" onPress={handleOnPress} />
    </ScrollView>
  )
}

Image source

Cross-Platform

Xamarin

Kotlin Native

Ionic

Flutter

Architecture

1.

Dev. Experience

2.

Nuances

3.

Performance

4.

Architecture

1

Canvas Model

Image source

DART

Component Model

Image source

JS

Canvas

VS

Native

Widgets

Canvas

Native Widgets

Custom Consistent UI

Native look and feel UI

Cheap interoperability

Efficient rendering

No control

Costly interoperability

Developer Experience

2

yarn add react-native-reanimated
cd ios && pod install

3rd Party Packages & Native integration

Code

31 files with 1485 lines

47 files with 2923 lines

Upgrading

flutter upgrade

Ecosystem

Lean Core

Image source

Expo

Managed

Bare

Nuances

3

Code Push

~7-8MB

Image source

Performance

4

Release

Android & Hermes

systrace

top

dumpsys procstats

4~10%

8~14%

5~13%

CPU Usage

Memory consuption

164~167MB in 23s

164~169MB in 28s

Large Lists

Game Over

Image source

React

Fiber

Fabric

Rearchitecture

Bridge & Async Threads

Image source

Bridge

JSI & Synchronous
Bridge & Async Threads

FabricUIManager

UIManager c++
&
Immutable tree

type Node = {};
type NodeSet = Array<Node>;
type NodeProps = {};
type InstanceHandle = {};
type Spec = {|
  +createNode: (
    reactTag: number,
    viewName: string,
    rootTag: number,
    props: NodeProps,
    instanceHandle: InstanceHandle,
  ) => Node,
  +cloneNode: (node: Node) => Node,
  +cloneNodeWithNewChildren: (node: Node) => Node,
  +cloneNodeWithNewProps: (node: Node, newProps: NodeProps) => Node,
  +cloneNodeWithNewChildrenAndProps: (node: Node, newProps: NodeProps) => Node,
  +createChildSet: (rootTag: number) => NodeSet,
  +appendChild: (parentNode: Node, child: Node) => Node,
  +appendChildToSet: (childSet: NodeSet, child: Node) => void,
  +completeRoot: (rootTag: number, childSet: NodeSet) => void,
  +setNativeProps: (node: Node, nativeProps: NodeProps) => void,
  +measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
  +measureInWindow: (
    node: Node,
    callback: MeasureInWindowOnSuccessCallback,
  ) => void,
  +measureLayout: (
    node: Node,
    relativeNode: Node,
    onFail: () => void,
    onSuccess: MeasureLayoutOnSuccessCallback,
  ) => void,
  +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node,
|};
New UIManager

2020

Native Modules

Renderer

Initialization

?

$

Obrigado!

References

[1] Most only considered React Native or PhoneGap/Cordova, which were very different from each other, Flutter despite not being a JavaScript solution but with Dart, which is very similar to JavaScript in its C like syntax, was not stable to be considered.
[2] Wikipedia contributors. (2019, June 30). Flutter (software). In Wikipedia, The Free Encyclopedia. Retrieved 14:04, July 7, 2019, from https://en.wikipedia.org/w/index.php?title=Flutter_(software)&oldid=904189137
[3] Reactiflux QA React Core Team. (2019, January 24). In reactiflux.com transcript, retrieved from https://www.reactiflux.com/transcripts/react-native-team/#youitv-engine-one-currently-binds
[4] Reflectly App presentation. (2019, Mar 7). In Mobile World Congress 19, retrieved from https://youtu.be/hdOxvNQbies?t=746
[5] On July 7th, 2019, we can find the following issues in Flutter's repository related to UI elements behavior which would not exist if they were using Native UI Widgets: https://github.com/flutter/flutter/issues/35068, https://github.com/flutter/flutter/issues/35577, https://github.com/flutter/flutter/issues/35694. There are more this is just an example.
[6] We can see the evidence of this impact by the number of declarative mobile frameworks/toolkits which came after React Native. Flutter, SwiftUI, Jetpack Compose
[7] Widget index https://flutter.dev/docs/reference/widgets
[8] Ticket related to the broken hot reloading module https://github.com/facebook/react-native/issues/18899
[9] Ticket related to Lean Core https://github.com/facebook/react-native/issues/23313
[10] This is a good overview of the current bridge architecture, https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8. Issue corresponding the Fabric architecture https://github.com/react-native-community/discussions-and-proposals/issues/4.
 

[11] Embedding iOS views is an expensive operation and should be avoided when a Flutter equivalent is possible. https://api.flutter.dev/flutter/widgets/UiKitView-class.html
[12] Insights from Flutter's first user survey of 2019. (2019, April 11). In Medium post, retrieved from https://medium.com/flutter/insights-from-flutters-first-user-survey-of-2019-3659b02303a5
[13] Flutter's Handling breaking changes Wiki https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[14] React Native's Upgreade Helper https://github.com/react-native-community/upgrade-helper
[15] Flutter and React Native's evidence of AndroidX support efforts. https://flutter.dev/docs/development/packages-and-plugins/androidx-compatibility
https://github.com/react-native-community/discussions-and-proposals/issues/129
[16] Alex Sulivan - Examining performance differences between Native, Flutter, and React Native mobile development. Thoughtbot dev site: https://thoughtbot.com/blog/examining-performance-differences-between-native-flutter-and-react-native-mobile-development
[17] Various posts complaing of Animated performance: https://www.reddit.com/r/reactnative/comments/6ex9y1/brutally_slow_animations_on_android/, https://stackoverflow.com/questions/48928229/slow-animations-in-reactnatives-android-app
[18] react-native-reanimated https://github.com/kmagiera/react-native-reanimated
[19] React Native Repository Pull Requests from Amazon, Callstack, and Expo
[20] https://flutter.dev/docs/resources/faq#how-does-flutter-run-my-code-on-android

[21] https://www.youtube.com/watch?v=52El0EUI6D0

 

The State of React Native

By Andrei Calazans

Made with Slides.com

The State of React Native

  • 2,763

More from Andrei Calazans