The State of
React Native
O que é e como funciona?
Como React Native se compara ao Flutter?
O que é rearchitetura do React Native?
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> ) }
Cross-Platform
Xamarin
Kotlin Native
Ionic
Flutter
Architecture
1.
Dev. Experience
2.
Nuances
3.
Performance
4.
Architecture
1

Canvas Model

DART

Component Model
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

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


React
Fiber
Fabric
Rearchitecture

Bridge & Async Threads
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
The State of React Native
- 3,040