The JavaScript
Realm
The Native
Realm
The Bridge
React Native Architecture
JavaScript
JSCore (VM)
Single Thread
ObjC+Swift / Java
Main UI Thread
Other BG Threads
Slide 10
Slide 10 text
The JavaScript
Realm
The Native
Realm
The Bridge
Performance?
✔ ✔
✖
Slide 11
Slide 11 text
Keep passes over the
bridge to a minimum!
Slide 12
Slide 12 text
Obvious Pitfalls
WHERE MOST COMPETITION LOSES THE BATTLE
Synchronous updates between realms
Don’t we need that for consistency?
Slide 13
Slide 13 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 14
Slide 14 text
Where Performance
Breaks Down
03
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Set state from JS
on every scroll
event
1
OnScroll
Slide 17
Slide 17 text
Initialize
Opacity(y1) Scale(y1) Render
Set onScroll
Set onScroll
ScrollEvent(y1)
UpdateView
Frame 1
Opacity(y2) Scale(y2) Render
ScrollEvent(y2)
Frame 2
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
Wrap the image
with a native view
listening to scroll
events in native
2
onScroll
for any (Scroll Event)
take field (contentOffset)
save as (_scrollY)
Slide 29
Slide 29 text
for any (Scroll Event)
take field (contentOffset)
save as (_scrollY)
interpolate (_scrollY)
(opacity)
[0,250]
➔ [1,0]
Slide 30
Slide 30 text
for any (Scroll Event)
take field (contentOffset)
save as (_scrollY)
interpolate (_scrollY)
(opacity)
[0,250]
➔ [1,0]
(scale)
[-200,0,1]
➔ [1.4,1,1]
Slide 31
Slide 31 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 32
Slide 32 text
DEMO
Get Full Code
github.com/wix/
rn-perf-experiments2