Tweet
Tweet

Slide 1

Slide 1 text

React Native for Web Bingo Yang｜Oct 17, 2020 Cross Platform Development

Slide 2

Slide 2 text

Desktop Web Mobile Web iOS App

Slide 3

Slide 3 text

95% Code Reuse ● iOS App ● Android App

Slide 4

Slide 4 text

90% Code Reuse ● Desktop Web ● Mobile Web ● iOS App ● Android App

Slide 5

Slide 5 text

Hello, I’m Bingo Yang ● UrMap ● HTC ● 鉅亨網 ● Frontend Lead @Verybuy Contact me：[email protected] ? Level

Slide 6

Slide 6 text

主打女性客群 提供跨境、情境式購物體驗 中日韓等 數十萬檔商品 最懂你的喜好 符合你的風格與穿搭推薦

Slide 7

Slide 7 text

Outline 01 react-native-web 02 Tips 03 Challenge 04 Case Study

Slide 8

Slide 8 text

What is react-native-web? 01

Slide 9

Slide 9 text

- React Native - “Learn Once, Write Anywhere”

Slide 10

Slide 10 text

- React Native Web - “Write Once, Render Anywhere”

Slide 11

Slide 11 text

- Nicolas Gallagher - “React Native Is In fact A Web Framework At Heart”

Slide 12

Slide 12 text

import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( Hello World ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); React Native Example Hello World Android: android.text IOS: UITextView

Slide 13

Slide 13 text

import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( Hello World ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); React Native Web Example Hello World Android: android.text Web:
IOS: UITextView

Slide 14

Slide 14 text

Native Web React Native React Native Web Ref：https://youtu.be/tFFn39lLO-U?t=751 Bring React Native back to the Web

Slide 15

Slide 15 text

VR Dual screen macos windows/xbox IOS/Android Vue Native Supports for all

Slide 16

Slide 16 text

StyleSheet

Slide 17

Slide 17 text

StyleSheet.create({ one: { color: "#fff", marginLeft: 10 }, two: { opacity: 0 }, three: { color: "#fff", opacity: 0 } }); Source .rn-1qtguxu { color: #fff; } .rn-11wrixw { margin-left: 10px; } .rn-1272l3b { opacity: 0; } Generated

Slide 18

Slide 18 text

Accessibility

Slide 19

Slide 19 text

Branching Within Components // MyComponent import { Platform } from 'react-native'; const styles = StyleSheet.create({ height: (Platform.OS === 'web') ? 200 : 100, });

Slide 20

Slide 20 text

Component Branching MyComponent.android.js MyComponent.ios.js MyComponent.web.js import MyComponent from './MyComponent'; MyComponent.js MyComponent.web.js

Slide 21

Slide 21 text

Server-side rendering Next.js with-react-native-web

Slide 22

Slide 22 text

// webpack.config.js module.exports = { // ...the rest of your config resolve: { alias: { 'react-native$': 'react-native-web' } } } create react app

Slide 23

Slide 23 text

npm install expo-cli --global expo init my-app cd my-app expo start Expo Web

Slide 24

Slide 24 text

? We all use react-native-web In production &

Slide 25

Slide 25 text

Cross Platform Tips 02

Slide 26

Slide 26 text

1. Home Screen 2. Deep Link 1. URL App Web Entry Point

Slide 27

Slide 27 text

1. Android Back button 2. IOS Swipe Back 1. Address bar back/ forward 2. InApp Browser Navigate Behavior App Web

Slide 28

Slide 28 text

Navigate Solution

Slide 29

Slide 29 text

App Web Code Splitting

Slide 30

Slide 30 text

react-native-bundle-splitter React.lazy Code Splitting Solution App Web

Slide 31

Slide 31 text

● react-responsive Responsive Web Design import MediaQuery from 'react-responsive' const Example = () => (

Device Test!

You are a desktop or laptop

You also have a huge screen

{/* You can also use a function (render prop) as a child */} {(matches) => matches ?

You are retina

:

You are not retina

}
)

Slide 32

Slide 32 text

● 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); `, }

Slide 33

Slide 33 text

Eco System Ref：https://reactnative.directory/

Slide 34

Slide 34 text

- React Native Web - “Write Once, Render Anywhere”

Slide 35

Slide 35 text

- React Native Web - “Write Once, Render Anywhere” Bug

Slide 36

Slide 36 text

● 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); });

Slide 37

Slide 37 text

End to End Test Detox Cypress App Web

Slide 38

Slide 38 text

Android IOS Web 1. Rendering UI 2. Business Logic 3. Shared Component Reduce Develop/Maintain Cost

Slide 39

Slide 39 text

Challenge 03

Slide 40

Slide 40 text

Cross platform development is HARD

Slide 41

Slide 41 text

* 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

Slide 42

Slide 42 text

Here is The Change

Slide 43

Slide 43 text

Web Android IOS Platform Development Separated

Slide 44

Slide 44 text

Android IOS Web The problems of each platform still exists Feature/Requirement Convergence

Slide 45

Slide 45 text

Web Android IOS Converge our requirement instead of thinking differentiation in each Platform Feature/Requirement Convergence

Slide 46

Slide 46 text

Case Study

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

import { CreditCardInput } from 'react-native-credit-card-input'; //... return ( ); CreditCardInput UI

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

├── CreateCreditCardPage.tsx ├── CreateCreditCardPage.web.tsx CreateCreditCardPage ● react-native-tappay ● react-native-credit-card-input ● tappay-js-sdk

Slide 53

Slide 53 text

Safari Web iOS App Android App

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

Contact me：[email protected] We are hiring!