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

65
React Native Gabor Wnuk, Mobile Tech Leader https://gabo.re/

Upload: others

Post on 10-Oct-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

React NativeGabor Wnuk, Mobile Tech Leader

https://gabo.re/

Page 2: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

This is not phonegap

Page 3: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

This is genuinely native

Page 4: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

TL; DR

Page 5: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

TL; DR

• 500 000 active users

• Brownfield

Page 6: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

What are we aiming for?

Page 7: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

What are we aiming for?

• Ability to utilize brownfield and greenfield approach

Page 8: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

What are we aiming for?

• Ability to utilize brownfield and greenfield approach

• Increase importance of native development team

Page 9: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 10: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 11: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 12: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Convince your developers

this is not manure.

Page 13: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your
Page 14: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

StackOverflow?

Page 15: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

However ...

Page 16: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Resistance is futile

Page 17: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Resistance is futile

Resistance is futile

Page 18: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does React Native

really work?

Page 19: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

• There is no WebView. Period. No CSS. Period. No HTML.

Period.

Page 20: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 21: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

JS VM(async)

Bridge(batch)

Native

Call n native methods

Page 22: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

JS VM(async)

Bridge(batch)

Native

Call n native methods

Serialize payload

Page 23: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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 …)

Page 24: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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 …)

Page 25: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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 …)

Page 26: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

call('GWPAdPlacementView','initWithFrame',

[{x: 0, y: 0, width: 320, height: 240}])JS VM

(async)

Bridge(batch)

Native

Page 27: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 28: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 29: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 30: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

Page 31: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your
Page 32: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your
Page 33: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

How does RN really work?

Page 34: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your
Page 35: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Brown field, green field.

I can’t write my product

from scratch.

Page 36: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Greenfield React Native

• Type react-native init ProjectName

Page 37: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Greenfield React Native

• Type react-native init ProjectName

• You’re set.

Page 38: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Greenfield React Native

Page 39: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Greenfield React Native

Page 40: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Brownfield React Native

• Place your iOS and Android projects in proper directories (ios/, android/)

Page 41: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Brownfield React Native

• Place your iOS and Android projects in proper directories (ios/, android/)

• Add React Native dependencies in your Podfile or

build.gradle

Page 42: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Brownfield React Native

Page 43: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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.

Page 44: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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!

Page 45: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Demo

Page 46: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your
Page 47: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Demo (iOS)

Page 48: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

One developer, 3x productivity.

Sort of.

Page 49: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

One developer, 3x productivity.

Sort of.

Not really.

Page 50: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

One developer, 3x productivity

• Business logic reused (data models, APIs, UI

independent components, statistics, ads)

Page 51: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Business logic reused

iOS presentation

Android presentation

Web presentation

Models

Data repository

Statistics

Data parsing (VAST, JSON)

Networking

...

Page 52: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Business logic reused (HOC)

Models

Data repository

Statistics

Data parsing (VAST, JSON)

Networking

...

Higher-Order Component

iOS render

Android render

Web render

Page 53: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

One developer, 3x productivity

• Business logic reused (data models, APIs, UI independent

components, statistics, ads)

• Shared knowledge, single language, better product

quality

Page 54: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Before ReactNative

12 iOS

Developers

12 Android

developers

12 Web

developers

12 effective

developers+ + =

Page 55: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

After ReactNative

24 ReactNative

Developers12 Web developers

36 effective

developers+ =

Page 56: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

One developer, 3x productivity

• Business logic reused (data models, APIs, UI independent

components, statistics, ads)

• Shared knowledge, single language, better product quality

• Hot reloading

Page 57: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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

Page 58: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

BDD (rspec)

Page 59: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

flowtype

Page 60: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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!

Page 61: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

Time is money.

Page 62: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

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!

Page 63: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

We’re hiring!

Page 64: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your

We’re hiring!

• React, ReactNative developers

• Golang

• Python

‣ Details: rekrutacja.wp.pl

Page 65: React Native - IT FUTURE EXPO 2019 · Brownfield React Native • Place your iOS and Android projects in proper directories (ios/, android/) • Add React Native dependencies in your