JSDC 2020 Cross Platform Development - React Native for Web

60a71672b538fb50cc1d15c41c971255?s=47 Bingo Yang
October 17, 2020

JSDC 2020 Cross Platform Development - React Native for Web

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

60a71672b538fb50cc1d15c41c971255?s=128

Bingo Yang

October 17, 2020
Tweet

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!