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
170
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
1.1k
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
190
Sayit in Taiwan
yhsiang
0
150
LY sayit
yhsiang
0
130
Webpack pack your web
yhsiang
17
12k
2015 Summer of ?
yhsiang
0
290
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
750
Other Decks in Programming
See All in Programming
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
One Enishi After Another
snoozer05
PRO
0
160
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Software Architecture
hschwentner
6
2.3k
チームの境界をブチ抜いていけ
tokai235
0
220
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
230
Featured
See All Featured
Music & Morning Musume
bryan
46
6.9k
Designing for Performance
lara
610
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
A better future with KSS
kneath
239
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Bash Introduction
62gerente
615
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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]