React NativeGabor Wnuk, Mobile Tech Leader
https://gabo.re/
This is not phonegap
This is genuinely native
TL; DR
TL; DR
• 500 000 active users
• Brownfield
What are we aiming for?
What are we aiming for?
• Ability to utilize brownfield and greenfield approach
What are we aiming for?
• Ability to utilize brownfield and greenfield approach
• Increase importance of native development team
What are we aiming for?
• Ability to utilize brownfield and greenfield approach
• Increase importance of native development team
• Being able to write code for 3 platforms by 1 developer
What are we aiming for?
• Ability to utilize brownfield and greenfield approach
• Increase importance of native development team
• Being able to write code for 3 platforms by 1 developer
• Time is money
What are we aiming for?
• Ability to utilize brownfield and greenfield approach
• Increase importance of native development team
• Being able to write code for 3 platforms by 1 developer
• Time is money
• Convince our native developers it is not wrong direction for
their careers
Convince your developers
this is not manure.
StackOverflow?
However ...
Resistance is futile
Resistance is futile
Resistance is futile
How does React Native
really work?
How does RN really work?
• There is no WebView. Period. No CSS. Period. No HTML.
Period.
How does RN really work?
• There is no WebView. Period. No CSS. Period. No HTML.
Period.
• Everything you do via JavaScript goes from JS VM through
React Native Bridge and is executed natively
How does RN really work?
JS VM(async)
Bridge(batch)
Native
Call n native methods
How does RN really work?
JS VM(async)
Bridge(batch)
Native
Call n native methods
Serialize payload
How does RN really work?
JS VM(async)
Bridge(batch)
Native
Call n native methods
Serialize payload
Process methods
Update UI
Collect response and notify JS VM
Execute events(timer, network, touch …)
How does RN really work?
JS VM(async)
Bridge(batch)
Native
Call n native methods
Serialize payload Serialize response
Process methods
Update UI
Collect response and notify JS VM
Execute events(timer, network, touch …)
How does RN really work?
JS VM(async)
Bridge(batch)
Native
Call n native methods Process response
Serialize payload Serialize response
Process methods
Update UI
Collect response and notify JS VM
Execute events(timer, network, touch …)
How does RN really work?
call('GWPAdPlacementView','initWithFrame',
[{x: 0, y: 0, width: 320, height: 240}])JS VM
(async)
Bridge(batch)
Native
How does RN really work?
call('GWPAdPlacementView','initWithFrame',
[{x: 0, y: 0, width: 320, height: 240}])
[{'GWPAdPlacementView','initWithFrame',
[{x: 0, y: 0, width: 320, height: 240}]}]
JS VM(async)
Bridge(batch)
Native
How does RN really work?
call('GWPAdPlacementView','initWithFrame',
[{x: 0, y: 0, width: 320, height: 240}])
[{'GWPAdPlacementView','initWithFrame',
[{x: 0, y: 0, width: 320, height: 240}]}]
[_bridge enqueueJSCall:@"GWPAdPlacementView.initWithFrame"
args:@[@{@"x": @0, @"y": @0,
@"width": @320, @"height": @240}]]
JS VM(async)
Bridge(batch)
Native
How does RN really work?
• There is no WebView. Period. No CSS. Period. No HTML.
Period.
• Everything you do via JavaScript goes from JS VM through
React Native Bridge and is executed natively
• Everything written in JavaScript is represented in native
code
How does RN really work?
How does RN really work?
Brown field, green field.
I can’t write my product
from scratch.
Greenfield React Native
• Type react-native init ProjectName
Greenfield React Native
• Type react-native init ProjectName
• You’re set.
Greenfield React Native
Greenfield React Native
Brownfield React Native
• Place your iOS and Android projects in proper directories (ios/, android/)
Brownfield React Native
• Place your iOS and Android projects in proper directories (ios/, android/)
• Add React Native dependencies in your Podfile or
build.gradle
Brownfield React Native
Brownfield React Native
• Place your iOS and Android projects in proper directories (ios/, android/)
• Add React Native dependencies in your Podfile or
build.gradle
• Run yarn install, pod install, etc.
Brownfield React Native
• Place your iOS and Android projects in proper directories (ios/, android/)
• Add React Native dependencies in your Podfile or
build.gradle
• Run yarn install, pod install, etc.
• Voila!
Demo
Demo (iOS)
One developer, 3x productivity.
Sort of.
One developer, 3x productivity.
Sort of.
Not really.
One developer, 3x productivity
• Business logic reused (data models, APIs, UI
independent components, statistics, ads)
Business logic reused
iOS presentation
Android presentation
Web presentation
Models
Data repository
Statistics
Data parsing (VAST, JSON)
Networking
...
Business logic reused (HOC)
Models
Data repository
Statistics
Data parsing (VAST, JSON)
Networking
...
Higher-Order Component
iOS render
Android render
Web render
One developer, 3x productivity
• Business logic reused (data models, APIs, UI independent
components, statistics, ads)
• Shared knowledge, single language, better product
quality
Before ReactNative
12 iOS
Developers
12 Android
developers
12 Web
developers
12 effective
developers+ + =
After ReactNative
24 ReactNative
Developers12 Web developers
36 effective
developers+ =
One developer, 3x productivity
• Business logic reused (data models, APIs, UI independent
components, statistics, ads)
• Shared knowledge, single language, better product quality
• Hot reloading
One developer, 3x productivity
• Business logic reused (data models, APIs, UI independent
components, statistics, ads)
• Shared knowledge, single language, better product quality
• Hot reloading
• You still use the same quality patterns as before
BDD (rspec)
flowtype
One developer, 3x productivity
• Business logic reused (data models, APIs, UI independent
components, statistics, ads)
• Shared knowledge, single language, better product quality
• Hot reloading
• You still use the same quality patterns as before
• You still need native developers!
Time is money.
Time is money: Pudelek
• Revenue boost: over 30%*
• Shared codebase: 98%*
• Crash Free Users: +1% (currently 99.6%)
• Hot reloading: 1 second state preserving
reload vs 4 minute build
• Constant 60 fps even on really
weak devices == happy customers!
We’re hiring!
We’re hiring!
• React, ReactNative developers
• Golang
• Python
‣ Details: rekrutacja.wp.pl