Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
From React to React Native Web
Search
Yuanhsiang Cheng
November 20, 2019
Programming
0
140
From React to React Native Web
Yuanhsiang Cheng
November 20, 2019
Tweet
Share
More Decks by Yuanhsiang Cheng
See All by Yuanhsiang Cheng
How to rebuild a websocket service by golang and redis
yhsiang
0
1k
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
170
Sayit in Taiwan
yhsiang
0
120
LY sayit
yhsiang
0
89
Webpack pack your web
yhsiang
17
12k
2015 Summer of ?
yhsiang
0
240
How to be a good wan-jun
yhsiang
1
120
Experience in building isomorphic app
yhsiang
11
700
Other Decks in Programming
See All in Programming
EventSourcingの理想と現実
wenas
6
2.1k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
5
1.8k
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
510
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.2k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
160
Piniaの現状と今後
waka292
5
1.5k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
300
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
470
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
110
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
180
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Documentation Writing (for coders)
carmenintech
65
4.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
2k
Faster Mobile Websites
deanohume
304
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Designing for humans not robots
tammielis
249
25k
Agile that works and the tools we love
rasmusluckow
327
21k
RailsConf 2023
tenderlove
29
880
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Transcript
From React to React Native Web LY Cheng @ Maicoin
HQ 2019.11.20
Agenda • React Native Web introduction • Why React Native
Web • How MaiCoin use RNW
React Native • March 26, 2015 • Learn once, write
anywhere.
Expo • A framework and a platform for universal React
applications
RN Code example
React Native Web • Author: Nicolas https://github.com/necolas • July 6,
2015 • Write once, render anywhere.
Who use RNW • Twitter, Major League Soccer, Flipkart, Uber,
The times, DataCamp • MaiCoin!
Twitter use RNW
Twitter use RNW
Twitter use RNW
RNW Setup • npm install react react-dom react-native-web • webpack.config.js
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'
RNW Code example
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
Problems we met • Device detection • Cookie • Header
• Flexbox • Flex: 1 vs flexGrow: 1
UI Abstraction
UI Abstraction • State disable onPress
UI Abstraction • Style textColor backgroundColor
UI Abstraction • Theme colors set
UI Abstraction • Renderer
UI Abstraction
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)
MAX
MAX
MAX
MAX
MaiCoin • Rails backend • GraphQL API gateway • React
native app • React native web app (for mobile only) • https://maicoin.com
MaiCoin
MaiCoin
MaiCoin
React Native Web • Pros • Codebase consistent • Development
experience • No more CSS methodology • Cons • Upstream bugs • Cross platform testing
Special Thanks • MaiCoin Frontend Team • a9 • chunghe
• evelyn • MaiCoin QA Team • MaiCoin & MAX users
We Are Hiring • Frontend Engineer React, React Native, React
Native Web GraphQL, React Redux, Rails •
[email protected]