React Native VS REACT + WebView
Alexey Kosinskiy


Alexey Kosinski
Senior Frontend Developer
avkos
avkosinski
avkosinski



What is WebView?







IOS
Android
Web



WebView
React
LOADING REACT+WEBVIEW
WEBVIEW
SERVER
JS bundle
REACT
YOUR APP
LOCAL
FILE
STORAGE
LOADING REACT NATIVE
NATIVE CONTROLLER
LOCAL
FILE
STORAGE
JS bundle
REACT NATIVE
YOUR APP
React + WebView
React Native




PC
Mobile Browser
IOS
Android


IOS
Android

Windows
Example Simple App Video
React + WebView
React Native




Render Test
let style={ backgroundColor: `rgb(${r},${g},100)`, width: 1, height: 1,
display:'inline-block' };
let style = { backgroundColor: `rgb(${r},${g},100)`, width: 1, height: 1 };
React
React-Native
Styles
for (let r = 0; r < 255; r = r + 10) { green[r] = []; for (let g = 0; g < 255; g++) { cnt++; green[r].push(<div key={`s${r}-${g}`} style={...} />) } red.push(<div key={`v${r}`}>{green[r]}</div> ) }
React cycle
for (let r = 0; r < 255; r = r + 10) { green[r] = []; for (let g = 0; g < 255; g++) { cnt++; green[r].push(<View key={`s${r}-${g}`} style={...} />) } red.push(<View key={`v${r}`}>{green[r]}</View>) }
React Native cycle


React + WebView
React Native

React Native
React + WebView
render() { let {R, G, B} = this.state; return <View style={{ height: 500, backgroundColor: `rgb(${R},${G},${B})` }}/>; }
render() { let {R, G, B} = this.state; return <div style={{ height: 500, backgroundColor: `rgb(${R},${G},${B})` }}/>; }
Test 2 - One block
React Render
React Native Render
React + WebView
React Native
React Native
React + WebView

Animations

React Animations
Re-Render



Transitions
Animations
React Animations
Transitions
Animations


React Native Animations
JS
Native
Controller
Native
Component
Transitions and Animations Example
React
React Native
<div/>
CSS3
ReactCSSTransitionGroup
<Animated.View/>
Animated
classes + styles
time-functions
Transitions and Animations Example
React + WebView
React
Native
GPU
Draw
Command issue
Swap buffers
16ms
GPU
React + WebView
React Native

Native API
Custom API
or
Framework
Cordova
Components
Custom API
window.mobileApi.scanQR();
document.mobileApi.pushNotification(data);
React + WebView
React Native
Devices
Render
Animations
Native API
Native
$8 000
$12 000
$38 000 - $70 000
Cost
GPU
HOLY WAR
React-Native VS React+WebView
By Alexey Kosinski
React-Native VS React+WebView
- 3,557