building react web and react native apps with shared code … · building react web and react...
TRANSCRIPT
![Page 1: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/1.jpg)
Building React web and React Native apps with shared codeTyrone Trevorrow: @tyrone_mpoleeTim Sawtell: @saw083Damon Smith: @damondefault
![Page 2: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/2.jpg)
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
![Page 3: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/3.jpg)
3
![Page 4: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/4.jpg)
Our (old) teams
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 4
![Page 5: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/5.jpg)
We get things wrong before we get things right.
— Alistair Cockburn
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 5
![Page 6: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/6.jpg)
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
![Page 7: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/7.jpg)
Our front end apps
• 5 year old iOS app
• 4 year old mobile web site
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 7
![Page 8: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/8.jpg)
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
![Page 9: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/9.jpg)
Our apps are complex
• We solve complex problems in code, and we do that multiple times
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 9
![Page 10: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/10.jpg)
10
![Page 11: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/11.jpg)
Important code
• Data models and application state
• APIs
• Unit tests
• Business Logic
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 11
![Page 12: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/12.jpg)
We saw an opportunity
Imagine if ...• The developers could write the
important code once, and style the views in their platform specific variants
12
![Page 13: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/13.jpg)
Imagine if you could
maintainyour high standard forcustomer user experience
13
![Page 14: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/14.jpg)
14
![Page 15: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/15.jpg)
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
![Page 16: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/16.jpg)
We built a prototype
• React and React Native code base
• Build an existing feature
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 16
![Page 17: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/17.jpg)
17
![Page 18: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/18.jpg)
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
![Page 19: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/19.jpg)
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
![Page 20: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/20.jpg)
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
![Page 21: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/21.jpg)
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
![Page 22: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/22.jpg)
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
![Page 23: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/23.jpg)
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 23
![Page 24: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/24.jpg)
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 24
![Page 25: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/25.jpg)
Platform SpecificWeb: Root
iOS: "navigator"
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 25
![Page 26: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/26.jpg)
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 26
![Page 27: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/27.jpg)
Platform Independent
"Container"
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 27
![Page 28: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/28.jpg)
ContainerRoot [Native/Web Platform Specific]└─┬ Container [Cross Platform] └── MatchList [Native/Web Platform Specific]
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 28
![Page 29: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/29.jpg)
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
![Page 30: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/30.jpg)
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
![Page 31: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/31.jpg)
// root.jsx
import { MatchList } from "./web/match_list"import { Container } from "./common/container"
...<Container child={MatchList}>
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 31
![Page 32: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/32.jpg)
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 32
![Page 33: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/33.jpg)
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 33
![Page 34: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/34.jpg)
Platform Specific
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 34
![Page 35: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/35.jpg)
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
![Page 36: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/36.jpg)
We'd love to show you an example ...
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 36
![Page 37: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/37.jpg)
Next steps: Showcase to CIO
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 37
![Page 38: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/38.jpg)
We trained our developers
• Step by step intro topics
• Coding exercises
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 38
![Page 39: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/39.jpg)
Summary
• Remove duplication
• Build the best customer experience
Tyrone Trevorrow. Tim Sawtell. Damon Smith. 39
![Page 40: Building React web and React Native apps with shared code … · Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon](https://reader030.vdocument.in/reader030/viewer/2022040104/5ed7901067b53e06555d2342/html5/thumbnails/40.jpg)
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