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
150
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
100
Webpack pack your web
yhsiang
17
12k
2015 Summer of ?
yhsiang
0
260
How to be a good wan-jun
yhsiang
1
130
Experience in building isomorphic app
yhsiang
11
710
Other Decks in Programming
See All in Programming
『品質』という言葉が嫌いな理由
korimu
0
160
Software Architecture
hschwentner
6
2.1k
CI改善もDatadogとともに
taumu
0
110
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
最近のVS Codeで気になるニュース 2025/01
74th
1
250
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Featured
See All Featured
Designing for Performance
lara
604
68k
Docker and Python
trallard
44
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
4 Signs Your Business is Dying
shpigford
182
22k
Six Lessons from altMBA
skipperchong
27
3.6k
Producing Creativity
orderedlist
PRO
343
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Music & Morning Musume
bryan
46
6.3k
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]