React Native VS REACT + WebView

Alexey Kosinskiy

 

https://github.com/avkos/react_native_vs_react_webview

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