React Native Architecture in 2021

Slides for talk about React Native Re-architecture on React Conf Brazil 2021

Transcript

1. React Native Architecture in 2021 Akinn Rosa
2. Akinn Rosa @akinncar @akinncar Fullstack Developer
3. Overview
4. Current Architecture
5. React "Native"
6. Native Component
7. Native Component: Color View ColorViewManager.java
8. Native Component: Color View ColorPackage.java lic class ColorPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) return Arrays.<ViewManager>asList(new ColorViewManager()); }
9. Native Component: Color View App.js import { requireNativeComponent } from 'react-native'; export const ColorView = requireNativeComponent('ColorView'); export default function App() { return ( <View style={{ flex: 1 }}> <ColorView color="#32a852" style={{ flex: 1 }} /> </View> ); }
10. Native Module
11. Native Module: Sum SumModule.java
12. Native Module: Sum ColorPackage.java lass SumPackage implements ReactPackage { rride ic List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactCo List<NativeModule> modules = new ArrayList<>(); modules.add(new SumModule(reactContext)); return modules; rride ic List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactCont return Collections.emptyList();
13. Native Module: Sum App.js import { NativeModules } from 'react-native'; const { SumModule } = NativeModules; export default function App() { return ( <View style={{ flex: 1 }}> <Text>Result: {SumModule.sum(2, 2)}</Text> </View> ); }
14. Threads
15. Threads
16. Threads
17. Threads
18. Threads
19. Threads
20. Problems
21. Current ScrollView
22. Turbo Modules Is the new generation of React Native Modules. It aims to work with native functions like browsers, exposing native functions using JSI and improving module performances.
23. Browser Native Function
24. Javascript Interface (JSI) JSI is an engine-independent API to interact with Javascript from C++. It allows to call functions and hold references on these two languages, without the need for any serialization.
25. Sum Module Header (Objective-C++) Sum.h #import <React/RCTBridgeModule.h> #import "react-native-sum.h" @interface Sum : NSObject <RCTBridgeModule> @property (nonatomic, assign) BOOL setBridgeOnMainQueue; @end
26. Sum Module (Objective-C++) Sum.mm
27. Sum Module Header (C++) react-native-sum.h #include <jsi/jsilib.h> #include <jsi/jsi.h> void installSum(facebook::jsi::Runtime& jsiRuntime);
28. Sum Module (C++) react-native-sum.cpp
29. Sum Module (Javascript) App.js export default function App() { return ( <View style={{ flex: 1 }}> <Text>Result: {global.sum(2, 2)}</Text> </View> ); }
30. Libraries implemented using JSI react-native-reanimated react-native-vision-camera react-native-mmkv react-native-quick-sqlite
31. Fabric Is the new React Native renderer. With Fabric, the UI operations are exposed to Javascript with JSI. This new UI can create and update native components passing information without using the bridge.
32. Current Architecture
33. New Architecture
34. New Architecture + Codegen
35. Codegen (react-native-codegen) Automation to compatibility JS and Native code. It's a generator that will define your classes and functions in C++ base on types with Typescript and Flow, to avoid data validation every time.
36. What should I do?
37. What's next?
38. References The New React Native Architecture Explained David Vacca - The state of React Native Parashuram N - React Native's New Architecture Emily Janzer - The New React Native React-native JSI module React Native JSI: Part 1 - Getting Started Bringing the Fabric renderer to the “Facebook” app React Native in H2
39. Be my Patreon: https://www.patreon.com/akinncar
40. Thanks! @akinncar @akinncar