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
160
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
180
Sayit in Taiwan
yhsiang
0
140
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
関数型まつりレポート for JuliaTokai #22
antimon2
0
130
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
GraphRAGの仕組みまるわかり
tosuri13
7
450
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
120
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
C++20 射影変換
faithandbrave
0
500
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
790
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
BBQ
matthewcrist
89
9.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Thoughts on Productivity
jonyablonski
69
4.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
245
12k
Building an army of robots
kneath
306
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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]