Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSDC 2020 Cross Platform Development - React Na...

Bingo Yang
October 17, 2020

JSDC 2020 Cross Platform Development - React Native for Web

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

Bingo Yang

October 17, 2020
Tweet

More Decks by Bingo Yang

Other Decks in Programming

Transcript

  1. Hello, I’m Bingo Yang • UrMap • HTC • 鉅亨網

    • Frontend Lead @Verybuy Contact me:[email protected] ? Level
  2. 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
  3. 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
  4. 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
  5. Branching Within Components // MyComponent import { Platform } from

    'react-native'; const styles = StyleSheet.create({ height: (Platform.OS === 'web') ? 200 : 100, });
  6. // webpack.config.js module.exports = { // ...the rest of your

    config resolve: { alias: { 'react-native$': 'react-native-web' } } } create react app
  7. 1. Android Back button 2. IOS Swipe Back 1. Address

    bar back/ forward 2. InApp Browser Navigate Behavior App Web
  8. • 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> )
  9. • 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); `, }
  10. • 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); });
  11. Android IOS Web 1. Rendering UI 2. Business Logic 3.

    Shared Component Reduce Develop/Maintain Cost
  12. * 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
  13. Web Android IOS Converge our requirement instead of thinking differentiation

    in each Platform Feature/Requirement Convergence
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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:[email protected] Highlights Recap We are hiring!