building react web and react native apps with shared code … · building react web and react...

Building React web and React Native apps with shared codeTyrone Trevorrow: @tyrone_mpoleeTim Sawtell: @saw083Damon Smith: @damondefault

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

3

Our (old) teams

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 4

We get things wrong before we get things right.

— Alistair Cockburn

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 5

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

Our front end apps

• 5 year old iOS app

• 4 year old mobile web site

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 7

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

Our apps are complex

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

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 9

10

Important code

• Data models and application state

• APIs

• Unit tests

• Business Logic

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 11

We saw an opportunity

Imagine if ...• The developers could write the

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

12

Imagine if you could

maintainyour high standard forcustomer user experience

13

14

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

We built a prototype

• React and React Native code base

• Build an existing feature

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 16

17

ArchitectureSingle Repository

• Removes all psychological ownership barriers

• Easier to develop in lock-step

• No submodule, npm link pain

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 18

ArchitectureModules

• 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

ArchitecturePackagers

• Use the packager for the platform

• Metro (React Native)

• Webpack (Web)

• Expect differences!

• Usually workarounds for everything

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 20

ArchitecturePlatform 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

ArchitectureContainer 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

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 23

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 24

Platform SpecificWeb: Root

iOS: "navigator"

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 25

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 26

Platform Independent

"Container"

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 27

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

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 28

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

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

// root.jsx

import { MatchList } from "./web/match_list"import { Container } from "./common/container"

...<Container child={MatchList}>

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 31

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 32

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 33

Platform Specific

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 34

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

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

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 36

Next steps: Showcase to CIO

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 37

We trained our developers

• Step by step intro topics

• Coding exercises

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 38

Summary

• Remove duplication

• Build the best customer experience

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 39

Contact Us

Tyrone Trevorrow: @tyrone_mpoleeTim Sawtell: @saw083Damon 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