Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/2qvwC9N. Ian Thomas discusses breaking down monoliths into composable parts and understanding value from the point of the customer, showing examples of functional programming styles for building front-end apps. Filmed at qconlondon.com. Ian Thomas leads a team of engineers developing the next generation of user interface at Sky Betting & Gaming. The team is tasked with building API-driven, component-based applications which, when combined, form a cohesive, resilient and performant customer experience which copes with both the scale of the customer base and engineering team.

1. REBUILDING THE MONOLITH WITH
COMPOSABLE APPS

2. InfoQ.com: News & Community Site
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
monolith-composable-apps
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon London
www.qconlondon.com

4. 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

6. 2013

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

15. XHR

17. 2014

23. WHY DO WE CARE SO MUCH ABOUT MOBILE?
Because it makes up a huge proportion of our traffic, of which there is lots…

28. MOBILE IS GROWING AT A SCARY RATE TOO…

29. 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

32. BACK TO THE TECH
What are the challenges we were facing?

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

34. 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

39. “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

40. WHOLLY OWNED, VERTICAL SLICES

41. “Favor object composition over class inheritance…
...You should be able to get all the functionality you
need just by assembling existing components through
object composition.”
Gamma et al, 1994

43. CHOOSING THE TECH STACK

44. “Don’t Rewrite, React”
Ryan Florence, React Europe 2015

50. IN PRACTICE IT’S NEVER THAT SIMPLE

51. 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?

52. IT GETS HARDER AS THE PRODUCT REQUIREMENTS
GROW MORE DETAILED

54. WORKING WITH COMPONENTS

57. FUNCTIONAL COMPOSITION

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

60. ENCAPSULATE CSS

62. EXTRACT LOW LEVEL DESIGN LANGUAGE

65. THE ELEVENTH HOUR CURVE BALL

67. DELIVER A MARKET LEADING
REQUESTABET™ PRODUCT FOR THE START
OF THE PREMIER LEAGUE SEASON
(That gave us less than six weeks)

69. 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,
otherwise 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

70. 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

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

72. CUSTOMERS LOVE THE FEATURE
(And we delivered it with a week to spare)

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

76. THE BITS THAT DIDN’T GO SO WELL

77. BUILT COMPONENTS IN THE UI-LIBRARY TOO SOON

78. SERVER RENDERING

79. SOME FUNCTIONAL TECHNIQUES CAME WITH A
STEEP LEARNING CURVE

80. TEAM NAMES MATTER MORE THAN YOU THINK

81. HAVE WELL DOCUMENTED ENGINEERING
PRINCIPLES WHICH ARE ACTIVELY DISCUSSED

83. TDD, PAIRING AND CODE REVIEW KEEP THE
QUALITY BAR HIGH

84. WHAT’S NEXT?

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

89. THANK YOU
Ian Thomas – Principal Engineer, Sky Betting & Gaming
@anatomic

90. Watch the video with slide synchronization on
InfoQ.com!
https://www.infoq.com/presentations/monolith-
composable-apps