Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Architecture in 2021
Search
Akinn Rosa
October 16, 2021
Technology
0
210
React Native Architecture in 2021
Slides for talk about React Native Re-architecture on React Conf Brazil 2021
Akinn Rosa
October 16, 2021
Tweet
Share
More Decks by Akinn Rosa
See All by Akinn Rosa
React Native Universal Apps
akinncar
0
3
Aplicativo Móvel para gestão de fidelidade de clientes
akinncar
0
24
Developing 3D multiplatform games with three.js in React Native
akinncar
0
120
Other Decks in Technology
See All in Technology
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
270
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
220
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.8k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
210
Datasets for Critical Operations by Dataform
kimujun
0
120
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
430
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
140
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
400
TypeScript 上達の道
ysknsid25
23
4.9k
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
300
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
600
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Music & Morning Musume
bryan
46
6.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
For a Future-Friendly Web
brad_frost
179
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
A Tale of Four Properties
chriscoyier
160
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Transcript
React Native Architecture in 2021 Akinn Rosa
Akinn Rosa @akinncar @akinncar Fullstack Developer
Overview
Current Architecture
React "Native"
Native Component
Native Component: Color View ColorViewManager.java
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()); }
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> ); }
Native Module
Native Module: Sum SumModule.java
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();
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> ); }
Threads
Threads
Threads
Threads
Threads
Threads
Problems
Current ScrollView
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.
Browser Native Function
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.
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
Sum Module (Objective-C++) Sum.mm
Sum Module Header (C++) react-native-sum.h #include <jsi/jsilib.h> #include <jsi/jsi.h> void
installSum(facebook::jsi::Runtime& jsiRuntime);
Sum Module (C++) react-native-sum.cpp
Sum Module (Javascript) App.js export default function App() { return
( <View style={{ flex: 1 }}> <Text>Result: {global.sum(2, 2)}</Text> </View> ); }
Libraries implemented using JSI react-native-reanimated react-native-vision-camera react-native-mmkv react-native-quick-sqlite
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.
Current Architecture
New Architecture
New Architecture + Codegen
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.
What should I do?
What's next?
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
Be my Patreon: https://www.patreon.com/akinncar
Thanks! @akinncar @akinncar