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
最近のVS Codeで気になるニュース 2025/01
74th
1
250
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
ARA Ansible for the teams
kksat
0
150
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Formの複雑さに立ち向かう
bmthd
1
720
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
CI改善もDatadogとともに
taumu
0
110
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for Performance
lara
604
68k
Agile that works and the tools we love
rasmusluckow
328
21k
Rails Girls Zürich Keynote
gr2m
94
13k
Become a Pro
speakerdeck
PRO
26
5.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
For a Future-Friendly Web
brad_frost
176
9.5k
Making Projects Easy
brettharned
116
6k
Practical Orchestrator
shlominoach
186
10k
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]