react native - it future expo 2019 · brownfield react native • place your ios and android...

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