@AndreiCalazans
@Andrei_Calazans
g2i.co
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>
)
}
DART
JS
yarn add react-native-reanimated
cd ios && pod install
flutter upgrade
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
[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.