Building React web and React Native apps with shared code Tyrone - - PowerPoint PPT Presentation

▶
building react web and react native apps with shared code
SMART_READER_LITE
LIVE PREVIEW

Building React web and React Native apps with shared code Tyrone - - PowerPoint PPT Presentation

Jul 16, 2023 460 likes •874 views

Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon Smith: @damondefault Outline 1. Why Sportsbet would consider React and React Native 2. What React and React Native offers

slide-1
SLIDE 1

Building React web and React Native apps with shared code

Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon Smith: @damondefault

slide-2
SLIDE 2

Outline

  • 1. Why Sportsbet would consider React and React Native
  • 2. What React and React Native offers
  • 3. Live Demo
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 2
slide-3
SLIDE 3 3
slide-4
SLIDE 4

Our (old) teams

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 4
slide-5
SLIDE 5

We get things wrong before we get things right.

— Alistair Cockburn

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 5
slide-6
SLIDE 6

Our teams

  • We're now running scrum, have

cross functional teams

  • Features go out in lock-step
  • 9 feature teams adding more

features

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 6
slide-7
SLIDE 7

Our front end apps

  • 5 year old iOS app
  • 4 year old mobile web site
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 7
slide-8
SLIDE 8

Our customers

  • Our customers use multiple online betting companies
  • Our customers want more rewards, better prices and

intuitive journeys

  • Our product offerings grew, and so did the number of

customers

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 8
slide-9
SLIDE 9

Our apps are complex

  • We solve complex problems in code, and we do that

multiple times

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 9
slide-10
SLIDE 10 10
slide-11
SLIDE 11

Important code

  • Data models and application state
  • APIs
  • Unit tests
  • Business Logic
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 11
slide-12
SLIDE 12

We saw an opportunity

Imagine if ...

  • The developers could write the

important code once, and style the views in their platform specific variants

12
slide-13
SLIDE 13

Imagine if you could

maintain

your high standard for

customer user experience

13
slide-14
SLIDE 14 14
slide-15
SLIDE 15

Due Diligence

  • We regularly evaluate new tech
  • We apply our operating requirements (our people, our

customers)

  • Has to be worth it
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 15
slide-16
SLIDE 16

We built a prototype

  • React and React Native code base
  • Build an existing feature
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 16
slide-17
SLIDE 17 17
slide-18
SLIDE 18

Architecture

Single Repository

  • Removes all psychological ownership barriers
  • Easier to develop in lock-step
  • No submodule, npm link pain
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 18
slide-19
SLIDE 19

Architecture

Modules

  • Code is broken down into modules,

almost like self contained apps

  • Based on individual features, and

each contain:

  • Unit tests
  • Platform-specific components
  • Cross-platform components
  • Business logic, APIs
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 19
slide-20
SLIDE 20

Architecture

Packagers

  • Use the packager for the platform
  • Metro (React Native)
  • Webpack (Web)
  • Expect differences!
  • Usually workarounds for everything
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 20
slide-21
SLIDE 21

Architecture

Platform specific components

  • Should be the only place you do:
  • import ... from "react-native", or
  • import ... from "react-dom"
  • Generally stateless. Functional. Limited business logic.
  • Used primarily for layout, styling.
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 21
slide-22
SLIDE 22

Architecture

Container Components

  • Allows us to "sandwich" platform

independent components between platform-specific ones.

  • Can be "smart", stateful, contain

logic.

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 22
slide-23
SLIDE 23 Tyrone Trevorrow. Tim Sawtell. Damon Smith. 23
slide-24
SLIDE 24 Tyrone Trevorrow. Tim Sawtell. Damon Smith. 24
slide-25
SLIDE 25

Platform Specific

Web: Root iOS: "navigator"

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 25
slide-26
SLIDE 26 Tyrone Trevorrow. Tim Sawtell. Damon Smith. 26
slide-27
SLIDE 27

Platform Independent

"Container"

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 27
slide-28
SLIDE 28

Container

Root [Native/Web Platform Specific] └─┬ Container [Cross Platform] └── MatchList [Native/Web Platform Specific]

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 28
slide-29
SLIDE 29

Container

  • Container is cross platform
  • Cannot import "react-native" or "react-dom"
  • Cannot import platform specific components
  • But it can have them passed to it!
  • It can import other cross-platform components
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 29
slide-30
SLIDE 30

Root...

  • Root is platform specific
  • It can import other platform specific components
  • It can import cross-platform components
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 30
slide-31
SLIDE 31

// root.jsx import { MatchList } from "./web/match_list" import { Container } from "./common/container" ... <Container child={MatchList}>

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 31
slide-32
SLIDE 32 Tyrone Trevorrow. Tim Sawtell. Damon Smith. 32
slide-33
SLIDE 33 Tyrone Trevorrow. Tim Sawtell. Damon Smith. 33
slide-34
SLIDE 34

Platform Specific

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 34
slide-35
SLIDE 35

Platform Specific

  • "react-native" vs "react-dom"
  • <View> vs <div>
  • <Text> vs <div>
  • <Image> vs ...... <div>? Really?
  • style={} vs plain old CSS
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 35
slide-36
SLIDE 36

We'd love to show you an example ...

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 36
slide-37
SLIDE 37

Next steps: Showcase to CIO

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 37
slide-38
SLIDE 38

We trained our developers

  • Step by step intro topics
  • Coding exercises
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 38
slide-39
SLIDE 39

Summary

  • Remove duplication
  • Build the best customer experience
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 39
slide-40
SLIDE 40

Contact Us

Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon Smith: @damondefault

Try it yourself

  • Our open source code:

https://github.com/sportsbet

  • The code demo you just saw:

https://github.com/sportsbet/just-the-tip

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 40