Tweet
Tweet

Slide 1

Slide 1 text

From React to React Native Web LY Cheng @ Maicoin HQ 2019.11.20

Slide 2

Slide 2 text

Agenda • React Native Web introduction • Why React Native Web • How MaiCoin use RNW

Slide 3

Slide 3 text

React Native • March 26, 2015 • Learn once, write anywhere.

Slide 4

Slide 4 text

Expo • A framework and a platform for universal React applications

Slide 5

Slide 5 text

RN Code example

Slide 6

Slide 6 text

React Native Web • Author: Nicolas
 https://github.com/necolas • July 6, 2015 • Write once, render anywhere.

Slide 7

Slide 7 text

Who use RNW • Twitter, Major League Soccer, Flipkart, Uber, The times, DataCamp • MaiCoin!

Slide 8

Slide 8 text

Twitter use RNW

Slide 9

Slide 9 text

Twitter use RNW

Slide 10

Slide 10 text

Twitter use RNW

Slide 11

Slide 11 text

RNW Setup • npm install react react-dom react-native-web • webpack.config.js


Slide 12

Slide 12 text

RNW Setup • Babel
 module-resolver:
 alias: "^react-native$": "react-native-web" • Jest
 preset: "react-native-web" • Flow
 module.name_mapper='^react-native$' -> 'react-native-web'


Slide 13

Slide 13 text

RNW Code example

Slide 14

Slide 14 text

Problems we met • Shim modules • Native only: Alert -> window.alert • Web only: 3rd library • Platform workaround • TouchableOpacity: onPress -> onClick • React navigation • Screen Path -> URL query string

Slide 15

Slide 15 text

Problems we met • Device detection • Cookie • Header • Flexbox • Flex: 1 vs flexGrow: 1

Slide 16

Slide 16 text

UI Abstraction

Slide 17

Slide 17 text

UI Abstraction • State
 disable
 onPress

Slide 18

Slide 18 text

UI Abstraction • Style
 textColor
 backgroundColor

Slide 19

Slide 19 text

UI Abstraction • Theme
 colors set

Slide 20

Slide 20 text

UI Abstraction • Renderer

Slide 21

Slide 21 text

UI Abstraction

Slide 22

Slide 22 text

MAX • Rails backend • React native app • React Redux • Progressive React native web app • Assets page (https://max.maicoin.com/funds) • History page (https://max.maicoin.com/history/orders) • Trading page (https://max.maicoin.com/trades/btctwd)

Slide 23

Slide 23 text

MAX

Slide 24

Slide 24 text

MAX

Slide 25

Slide 25 text

MAX

Slide 26

Slide 26 text

MAX

Slide 27

Slide 27 text

MaiCoin • Rails backend • GraphQL API gateway • React native app • React native web app (for mobile only) • https://maicoin.com

Slide 28

Slide 28 text

MaiCoin

Slide 29

Slide 29 text

MaiCoin

Slide 30

Slide 30 text

MaiCoin

Slide 31

Slide 31 text

React Native Web • Pros • Codebase consistent • Development experience • No more CSS methodology • Cons • Upstream bugs • Cross platform testing

Slide 32

Slide 32 text

Special Thanks • MaiCoin Frontend Team • a9 • chunghe • evelyn • MaiCoin QA Team • MaiCoin & MAX users

Slide 33

Slide 33 text

We Are Hiring • Frontend Engineer
 React, React Native, React Native Web
 GraphQL, React Redux, Rails • [email protected]