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
Honoとフロントエンドの 型安全性について
yodaka
4
250
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
CI改善もDatadogとともに
taumu
0
110
『品質』という言葉が嫌いな理由
korimu
0
160
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Spring gRPC について / About Spring gRPC
mackey0225
0
220
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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]