From React to React Native Web

Transcript

1. From React to React Native Web LY Cheng @ Maicoin HQ 2019.11.20
2. Agenda • React Native Web introduction • Why React Native Web • How MaiCoin use RNW
3. React Native • March 26, 2015 • Learn once, write anywhere.
4. Expo • A framework and a platform for universal React applications
5. RN Code example
6. React Native Web • Author: Nicolas
 https://github.com/necolas • July 6, 2015 • Write once, render anywhere.
7. Who use RNW • Twitter, Major League Soccer, Flipkart, Uber, The times, DataCamp • MaiCoin!
8. Twitter use RNW
9. Twitter use RNW
10. Twitter use RNW
11. RNW Setup • npm install react react-dom react-native-web • webpack.config.js

12. 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'

13. RNW Code example
14. 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
15. Problems we met • Device detection • Cookie • Header • Flexbox • Flex: 1 vs flexGrow: 1
16. UI Abstraction
17. UI Abstraction • State
 disable
 onPress
18. UI Abstraction • Style
 textColor
 backgroundColor
19. UI Abstraction • Theme
 colors set
20. UI Abstraction • Renderer
21. UI Abstraction
22. 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)
23. MAX
24. MAX
25. MAX
26. MAX
27. MaiCoin • Rails backend • GraphQL API gateway • React native app • React native web app (for mobile only) • https://maicoin.com
28. MaiCoin
29. MaiCoin
30. MaiCoin
31. React Native Web • Pros • Codebase consistent • Development experience • No more CSS methodology • Cons • Upstream bugs • Cross platform testing
32. Special Thanks • MaiCoin Frontend Team • a9 • chunghe • evelyn • MaiCoin QA Team • MaiCoin & MAX users
33. We Are Hiring • Frontend Engineer
 React, React Native, React Native Web
 GraphQL, React Redux, Rails • yhsiang@maicoin.com