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
180
Sayit in Taiwan
yhsiang
0
130
LY sayit
yhsiang
0
120
Webpack pack your web
yhsiang
17
12k
2015 Summer of ?
yhsiang
0
270
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
730
Other Decks in Programming
See All in Programming
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
120
ComposeでのPicture in Picture
takathemax
0
140
Embracing Ruby magic
vinistock
2
230
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
260
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
220
オープンソースコントリビュート入門
_katsuma
0
130
Cloudflare Workersで進めるリモートMCP活用
syumai
5
470
VibeCoding時代のエンジニアリング
daisuketakeda
0
180
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
140
Serving TUIs over SSH with Go
caarlos0
0
650
Vibe Coding の話をしよう
schroneko
14
3.8k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
336
57k
Speed Design
sergeychernyshev
29
940
Side Projects
sachag
453
42k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Writing Fast Ruby
sferik
628
61k
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
378
70k
Done Done
chrislema
184
16k
How STYLIGHT went responsive
nonsquared
100
5.5k
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]