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

Our (old) teams


We get things wrong before we get things right.

— Alistair Cockburn


Our teams

• We're now running scrum, have cross functional teams

• Features go out in lock-step

• 9 feature teams adding more features


Our front end apps

• 5 year old iOS app

• 4 year old mobile web site


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


Our apps are complex

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


Important code

• Data models and application state

• APIs

• Unit tests

• Business Logic


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

Due Diligence

• We regularly evaluate new tech

• We apply our operating requirements (our people, our customers)

• Has to be worth it


We built a prototype

• React and React Native code base

• Build an existing feature


ArchitectureSingle Repository

• Removes all psychological ownership barriers

• Easier to develop in lock-step

• No submodule, npm link pain


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


ArchitecturePackagers

• Use the packager for the platform

• Metro (React Native)

• Webpack (Web)

• Expect differences!

• Usually workarounds for everything


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.


ArchitectureContainer Components

• Allows us to "sandwich" platform independent components between platform-specific ones.

• Can be "smart", stateful, contain logic.


Platform SpecificWeb: Root

iOS: "navigator"


Platform Independent

"Container"


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


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


Root...• Root is platform specific

• It can import other platform specific components

• It can import cross-platform components


// root.jsx

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

...<Container child={MatchList}>


Platform Specific


Platform Specific

• "react-native" vs "react-dom"

• <View> vs <div>

• <Text> vs <div>

• <Image> vs ...... <div>? Really?

• style={} vs plain old CSS


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


Next steps: Showcase to CIO


We trained our developers

• Step by step intro topics

• Coding exercises


Summary

• Remove duplication

• Build the best customer experience


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


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

Documents