React Native VS REACT + WebView
Alexey Kosinskiy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3268453/title-slide.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/2361923/0nDaNtJ6rpA2.jpg)
Alexey Kosinski
Senior Frontend Developer
avkos
avkosinski
avkosinski
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/2361899/twitter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/2361897/facebook_circle_color-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/2361896/github-sociocon.png)
What is WebView?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220097/android-webview-example.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
IOS
Android
Web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229977/site1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
PC
Mobile Browser
IOS
Android
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
IOS
Android
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
Windows
Example Simple App Video
React + WebView
React Native
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3236962/main_product_139212526829689300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3236962/main_product_139212526829689300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3236962/main_product_139212526829689300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220206/zoom.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3220221/smartphone_318-33441.jpg)
React + WebView
React Native
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3268437/rvsrn.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3268450/rvsrn2.png)
Animations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3230314/xTiTnduykRpC513w4M.gif)
React Animations
Re-Render
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3251084/css.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3251087/react.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3251094/js.png)
Transitions
Animations
React Animations
Transitions
Animations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3268329/animation-direction.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3268338/list-items.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460310/images/3229979/site3.png)
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