REBUILDING THE MONOLITH WITH COMPOSABLE APPS - - PowerPoint PPT Presentation

▶
rebuilding the monolith with composable apps https quora
SMART_READER_LITE
LIVE PREVIEW

REBUILDING THE MONOLITH WITH COMPOSABLE APPS - - PowerPoint PPT Presentation

Apr 21, 2023 291 likes •1.17k views

REBUILDING THE MONOLITH WITH COMPOSABLE APPS https://www.quora.com/Why-are-front-end-developers-so-high-in-demand-at-startups-if-front-end-development-is-relatively-easier-than-other-fields-of-engineering 2013

slide-1
SLIDE 1

REBUILDING THE MONOLITH WITH COMPOSABLE APPS

slide-2
SLIDE 2

https://www.quora.com/Why-are-front-end-developers-so-high-in-demand-at-startups-if-front-end-development-is-relatively-easier-than-other-fields-of-engineering

slide-3
SLIDE 3
slide-4
SLIDE 4

2013

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

http://conference.phpnw.org.uk/phpnw13/schedule/dan-rathbone/

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

XHR

slide-14
SLIDE 14
slide-15
SLIDE 15

2014

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21

WHY DO WE CARE SO MUCH ABOUT MOBILE?

Because it makes up a huge proportion of our traffic, of which there is lots…

slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26

MOBILE IS GROWING AT A SCARY RATE TOO…

slide-27
SLIDE 27

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

Weekly Uniques on Mobile

slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

BACK TO THE TECH

What are the challenges we were facing?

slide-31
SLIDE 31

Create a more engaging customer experience Increase the resilience of our core features Scale our product Scale our teams

slide-32
SLIDE 32

Nothing rendered by JavaScript No knowledge of routing in client State stored in data attributes in the DOM Spaghetti OO style JavaScript reliant on directly bound event listeners Increasingly real-time and interactive product demands

slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37

“From a people and culture point of view, we’re very focused on maintaining the things that made Sky Bet great as we scale up the internal team – we doubled the number of employees last year.”

http://www.silicon.co.uk/cloud/it-life-andy-burton-cto-sky-bet-197113

slide-38
SLIDE 38

WHOLLY OWNED, VERTICAL SLICES

slide-39
SLIDE 39

“Favor object composition over class inheritance… ...You should be able to get all the functionality you need just by assembling existing components through

  • bject composition.”

Gamma et al, 1994

slide-40
SLIDE 40
slide-41
SLIDE 41

CHOOSING THE TECH STACK

slide-42
SLIDE 42

“Don’t Rewrite, React”

Ryan Florence, React Europe 2015

slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48

IN PRACTICE IT’S NEVER THAT SIMPLE

slide-49
SLIDE 49

Independent components may share data requirements Real-time updates need to happen simultaneously to ensure consistent experience Apps may share code dependencies (i.e. Ramda) How do we instantiate these things?

slide-50
SLIDE 50

IT GETS HARDER AS THE PRODUCT REQUIREMENTS GROW MORE DETAILED

slide-51
SLIDE 51
slide-52
SLIDE 52

WORKING WITH COMPONENTS

slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55

FUNCTIONAL COMPOSITION

slide-56
SLIDE 56

“It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures..”

Alan Perlis

slide-57
SLIDE 57
slide-58
SLIDE 58

ENCAPSULATE CSS

slide-59
SLIDE 59
slide-60
SLIDE 60

EXTRACT LOW LEVEL DESIGN LANGUAGE

slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63

THE ELEVENTH HOUR CURVE BALL

slide-64
SLIDE 64
slide-65
SLIDE 65

DELIVER A MARKET LEADING REQUESTABET™ PRODUCT FOR THE START OF THE PREMIER LEAGUE SEASON

(That gave us less than six weeks)

slide-66
SLIDE 66
slide-67
SLIDE 67

Allow customers to request a bet consisting of outcomes from the same event Select outcomes from a curated list of markets and add them to your request cart Request the bet – if it can be priced immediately you’ll see the result in real-time,

  • therwise it will be sent to

the trading team Your requests are stored locally and a push notification is sent to the device to notify when the trading team have stopped pricing requests

slide-68
SLIDE 68

When a selection is added we calculate suggestions using a web worker When a request is submitted, we can use the pre-built suggestions list to show you highly related options Web worker runs in separate JavaScript thread to minimise performance overhead

slide-69
SLIDE 69

WORKING WITH REACT AND THE CLIENT-SIDE COMPONENT APPROACH ALLOWED US TO DEVELOP THE FEATURE IN PARALLEL TO THE EXISTING ROADMAP

slide-70
SLIDE 70

CUSTOMERS LOVE THE FEATURE

(And we delivered it with a week to spare)

slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73

OVER 1 MILLION UNIQUE USERS SINCE LAUNCH AND ROUGHLY 1.7 MILLION UNIQUE REQUESTS RECEIVED BY TRADERS

slide-74
SLIDE 74

THE BITS THAT DIDN’T GO SO WELL

slide-75
SLIDE 75

BUILT COMPONENTS IN THE UI-LIBRARY TOO SOON

slide-76
SLIDE 76

SERVER RENDERING

slide-77
SLIDE 77

SOME FUNCTIONAL TECHNIQUES CAME WITH A STEEP LEARNING CURVE

slide-78
SLIDE 78

TEAM NAMES MATTER MORE THAN YOU THINK

slide-79
SLIDE 79

HAVE WELL DOCUMENTED ENGINEERING PRINCIPLES WHICH ARE ACTIVELY DISCUSSED

slide-80
SLIDE 80
slide-81
SLIDE 81

TDD, PAIRING AND CODE REVIEW KEEP THE QUALITY BAR HIGH

slide-82
SLIDE 82

WHAT’S NEXT?

slide-83
SLIDE 83
slide-84
SLIDE 84

Create a more engaging customer experience Increase the resilience of our core features Scale our product Scale our teams

slide-85
SLIDE 85
slide-86
SLIDE 86
slide-87
SLIDE 87

THANK YOU

Ian Thomas – Principal Engineer, Sky Betting & Gaming @anatomic