The JavaScript
Realm
The Native
Realm
The Bridge
React Native Architecture
JSCore (VM)
Single Thread
Main UI Thread
Other BG Threads
Slide 10
Slide 10 text
The JavaScript
Realm
The Native
Realm
The Bridge
Developer Experience
Javascript
One JS Bundle
Business Logic
ObjC+Swift / Java
IPA / APK
The Framework
Slide 11
Slide 11 text
The JavaScript
Realm
The Native
Realm
The Bridge
Performance?
✔ ✔
✖
Slide 12
Slide 12 text
Keep passes over the
bridge to a minimum!
Slide 13
Slide 13 text
Obvious Pitfalls
WHERE MOST OF THE COMPETITION LOST THE BATTLE
Synchronous updates between realms
Don’t we need that for consistency?
Slide 14
Slide 14 text
React Native
HANDLES THIS SURPRISINGLY WELL OUT-OF-THE-BOX, YAY
React.js solves a similar problem on the web
Updates between realms are async!
Slide 15
Slide 15 text
Where Performance
Breaks Down
03
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Set state from JS
on every touch
event
1
Swipeable
Slide 18
Slide 18 text
Data crosses the
bridge on every frame!
Slide 19
Slide 19 text
What can we do?
LET’S PULL OUT THE BIG GUNS
In RN we can move any component to native
How can we reduce bridge traffic?
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Implement the
Swipeable container
handling touch
events in native
2
Swipeable
Slide 22
Slide 22 text
Good but not ideal
WE CAN PROBABLY DO BETTER
Need native skillset to fix this (or open source)
We keep 10% native devs for this purpose
Slide 23
Slide 23 text
React Native doesn’t mean
the end of native
Slide 24
Slide 24 text
Declare interaction
in JS, and send it
over the bridge to a
native driver
3
declare driver
Slide 25
Slide 25 text
The Future of RN
SOLVING MORE AND MORE SCENARIOS WITHOUT NATIVE CODE
JS API that reduces passes over the bridge
Declarative nature of React is a big help
Slide 26
Slide 26 text
DEMO
Get The Full Code
github.com/wix/
rn-perf-experiments