JSDC 2020 Cross Platform Development - React Native for Web

react-native 讓前端工程師可以寫出跨平台的應用程式，但 web 還是需要支援，從以往 web 為主，app 為輔，到現在 app 為主，web 為輔的需求模式，開發者如何因應？

Transcript

1. React Native for Web Bingo Yang｜Oct 17, 2020 Cross Platform Development
2. Desktop Web Mobile Web iOS App
3. 95% Code Reuse • iOS App • Android App
4. 90% Code Reuse • Desktop Web • Mobile Web • iOS App • Android App
5. Hello, I’m Bingo Yang • UrMap • HTC • 鉅亨網 • Frontend Lead @Verybuy Contact me：blackbing@gmail.com ? Level
6. 主打女性客群 提供跨境、情境式購物體驗 中日韓等 數十萬檔商品 最懂你的喜好 符合你的風格與穿搭推薦
7. Outline 01 react-native-web 02 Tips 03 Challenge 04 Case Study
8. What is react-native-web? 01
9. - React Native - “Learn Once, Write Anywhere”
10. - React Native Web - “Write Once, Render Anywhere”
11. - Nicolas Gallagher - “React Native Is In fact A Web Framework At Heart”
12. import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( <View style={styles.container}> <Text>Hello World</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); React Native Example Hello World Android: android.text IOS: UITextView
13. import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( <View style={styles.container}> <Text>Hello World</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); React Native Web Example Hello World Android: android.text Web: <div/> IOS: UITextView
14. Native Web React Native React Native Web Ref：https://youtu.be/tFFn39lLO-U?t=751 Bring React Native back to the Web
15. VR Dual screen macos windows/xbox IOS/Android Vue Native Supports for all
16. StyleSheet
17. StyleSheet.create({ one: { color: "#fff", marginLeft: 10 }, two: { opacity: 0 }, three: { color: "#fff", opacity: 0 } }); Source <style> .rn-1qtguxu { color: #fff; } .rn-11wrixw { margin-left: 10px; } .rn-1272l3b { opacity: 0; } </style> Generated
18. Accessibility
19. Branching Within Components // MyComponent import { Platform } from 'react-native'; const styles = StyleSheet.create({ height: (Platform.OS === 'web') ? 200 : 100, });
20. Component Branching MyComponent.android.js MyComponent.ios.js MyComponent.web.js import MyComponent from './MyComponent'; MyComponent.js MyComponent.web.js
21. Server-side rendering Next.js with-react-native-web
22. // webpack.config.js module.exports = { // ...the rest of your config resolve: { alias: { 'react-native$': 'react-native-web' } } } create react app
23. npm install expo-cli --global expo init my-app cd my-app expo start Expo Web
24. ? We all use react-native-web In production &
25. Cross Platform Tips 02
26. 1. Home Screen 2. Deep Link 1. URL App Web Entry Point
27. 1. Android Back button 2. IOS Swipe Back 1. Address bar back/ forward 2. InApp Browser Navigate Behavior App Web
28. Navigate Solution
29. App Web Code Splitting
30. react-native-bundle-splitter React.lazy Code Splitting Solution App Web
31. • react-responsive Responsive Web Design import MediaQuery from 'react-responsive' const Example = () => ( <div> <h1>Device Test!</h1> <MediaQuery minDeviceWidth={1224} device={{ deviceWidth: 1600 }}> <p>You are a desktop or laptop</p> <MediaQuery minDeviceWidth={1824}> <p>You also have a huge screen</p> </MediaQuery> </MediaQuery> <MediaQuery minResolution='2dppx'> {/* You can also use a function (render prop) as a child */} {(matches) => matches ? <p>You are retina</p> : <p>You are not retina</p> } </MediaQuery> </div> )
32. • styled-components Styled Components import styled from 'styled-components'; import styledNative from 'styled-components/native'; export default { Container: styled.div` height: 185px; border-radius: 12px; background-color: #00000099; backdrop-filter: blur(12px); box-sizing: border-box; justify-content: flex-end; opacity: ${props => (props.hidden ? 0 : 1)}; `, LinkItemWrapper: styledNative(Touchable)` width: 76px; height: 80px; background-color: rgba(0, 0, 0, 0.4); `, }
33. Eco System Ref：https://reactnative.directory/
34. - React Native Web - “Write Once, Render Anywhere”
35. - React Native Web - “Write Once, Render Anywhere” Bug
36. • jest • react-native-testing-library Unit Test const { Platform } = jest.requireActual('react-native') ; it('should correct if web', () => { Platform.OS = 'web'; expect(something).toBe(true); });
37. End to End Test Detox Cypress App Web
38. Android IOS Web 1. Rendering UI 2. Business Logic 3. Shared Component Reduce Develop/Maintain Cost
39. Challenge 03
40. Cross platform development is HARD
41. * Desktop(ABC) * Mobile(ABC) Release 1 * Desktop(D) * Mobile(D) Release 2 * Desktop(EFG) * Mobile(EFG) Release 3 * Desktop(H) * Mobile(I) Release 4 * Android(ABC) * IOS(ABC) * Android(D) * IOS(D) * Android(EF) * IOS(E) * Android(J) * IOS(K) Release Timeline
42. Here is The Change
43. Web Android IOS Platform Development Separated
44. Android IOS Web The problems of each platform still exists Feature/Requirement Convergence
45. Web Android IOS Converge our requirement instead of thinking differentiation in each Platform Feature/Requirement Convergence
46. Case Study
47. 1. IOS/Android SDK support 2. Web SDK support 3. Easy to use and custom UI on Web Platform 4. Need more native code for custom UI on IOS/Android Tappay SDK
48. import { CreditCardInput } from 'react-native-credit-card-input'; //... return ( <CreditCardInput onChange={handleChangeCardInfo} placeholders={{ number: translate('credit-card-number'), expiry: 'MM/YY', cvc: 'CVC/CVV', }} invalidMessage={{ number: translate('input-correct-card'), expiry: translate('input-correct-expiration-date'), }} inputStyle={{ color: red }} /> ); CreditCardInput UI
49. import TapPay from 'react-native-tap-pay'; TapPay.setup( REACT_APP_TAPPAY_APP_ID, REACT_APP_TAPPAY_APP_ID_KEY, REACT_APP_TAPPAY_SERVER_TYPE ); // validate TapPay.validateCard(cardNumber, expirationMonth, expirationDay, cvc); // saveCard TapPay.setCard(cardNumber, expirationMonth, expirationDay, cvc); try { getPrimeResponse = await TapPay.getDirectPayPrime(); } catch (e) { console.error(e); } react-native module
50. import tech.cherri.tpdirect.api.TPDCard; public class TapPayModule extends ReactContextBaseJavaModule { @ReactMethod public void setCard(String cardNumber, String dueMonth, String dueYear, String CCV, Promise promise) { this.cardNumber = cardNumber; this.dueMonth = dueMonth; this.dueYear = dueYear; this.CCV = CCV; this.tpdCard = new TPDCard(this.reactContext, new StringBuffer(cardNumber), new StringBuffer(dueMonth), new StringBuffer(dueYear), new StringBuffer(CCV)); } } TapPayModule.java
51. export interface TapPayInstance { setup: (appId: number, appKey: string, env: string) => void; validateCard: () => Promise; setCard: () => void; getDirectPayPrime: () => Promise; removeCard: () => void; ApplePay:() => Promise; LinePay: () => Promise; } declare const TapPay: TapPayInstance; export default TapPay; index.d.ts
52. ├── CreateCreditCardPage.tsx ├── CreateCreditCardPage.web.tsx CreateCreditCardPage • react-native-tappay • react-native-credit-card-input • tappay-js-sdk
53. Safari Web iOS App Android App
54. 1. react-native is a rendering UI language 2. react-native-web is production ready library 3. Reduce develop/maintain cost with cross platform development 4. Converge our requirement instead of thinking differentiation in each Platform Contact me：blackbing@gmail.com Highlights Recap We are hiring!
55. Contact me：blackbing@gmail.com We are hiring!