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

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 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 maintain your high standard for customer 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

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

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

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

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

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

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 23

Tyrone Trevorrow. Tim Sawtell. Damon Smith. 24

Platform Specific Web: 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

Container Root [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_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