The document discusses Spotify's transition to a "consistent, thin, and dumb" approach to building applications. This involved moving from thick client-based apps to lighter backend-driven apps. Key aspects of the approach included using a GLUE framework for shared UI elements, a modular organization, and separating view models, views, and controllers. This allowed for greater scalability, innovation, and the ability to hypothesize and experiment without risking the app store ecosystem.

1. Consistent,
Thinand
Dumb
Hector Zarate
(@iOSCowboy)

2. Consistent,
Thinand
Dumb
Hector Zarate
(@iOSCowboy)

3. Spotify Numbers
59 markets Over 30 million Songs75 millionActive Users
(30 million Subscribers)

4. iOS Client Numbers
50 monthly contributors 0.6 million lines of code millions of users

5. Visually Inconsistent
Thick
Client-Based

6. Consistent
Light
Backend Driven

7. Consistent
Thin
Dumb

8. ?
2013
2015
2025

9. 1. Scale

10. 2. Innovation

11. 3. Modular Organization

12. 3. Modular Organization
Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover Genre

13. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

14. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

15. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

16. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

17. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

18. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

19. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

20. Radio Running Album
Ads Equalizer Inbox

22. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

23. Radio Running Album Show
Player Browse Artist Playlist
Social Conce
CarChart
scover GenreAds Equalizer Inbox Podcast

24. GLUE(Global Language, Unified Experience)

25. FontsColorsMetrics

35. UIKit
GLUE.framework
Radio Running Albums Shows

36. GLUE.framework

37. GLUE.framework / 1. Subclassing
UIButton
SPTActionButton
UICollectionViewCell
SPTTableBasedCollectionViewCell SPTCollectionViewCell

38. GLUE.framework / 2. Factories
UIImage+SPTIcon.h
UIImageView+SPTImageStyleMasking.h
UILabel+SPTDefaultApperance.h

39. GLUE.framework / 3. Configuration
Colors.jsonMetrics.json Fonts.json

40. GLUE.framework
Colors.jsonSPTTheme.h

41. GLUE.framework

42. UIKit
GLUE.framework
Radio Running Albums Shows

43. Colors.json
{
"glueBlackColor": "000000",
"glueGray25Color": "3E3E40",
"glueGray55Color": "88898C",
"glueGray80Color": "c6c7cc",
"glueGray90Color": "DFE0E6",
"glueWhiteColor": "ffffff",
"glueGreenLightColor": "1ed760",
"glueGreenColor": "1db954",
"glueGreenDarkColor": "1da74d",
}

44. Colors.json
{
"glueBlackColor": "000000",
"glueGray25Color": "3E3E40",
"glueGray55Color": "88898C",
"glueGray80Color": "c6c7cc",
"glueGray90Color": "DFE0E6",
"glueWhiteColor": "ffffff",
"glueGreenLightColor": "1ed760",
"glueGreenColor": "c53770",
"glueGreenDarkColor": "1da74d",
}

46. Try this at home!

47. colorsmetrics fonts

49. Atoms

50. Molecules

51. Compounds

53. Consistent

54. Consistent
Thin
Dumb

59. ITEM
- title
- subtitle
- image
SPACE
- title
1 nblocks
BLOCK
- title
- footer
- renderType
1 nitems

60. VerticalCollectionView
CollectionViewCell
CollectionViewCell
CollectionView

61. VerticalCollectionView
CollectionView
CollectionView
CollectionView

62. VerticalCollectionView
CollectionView
CollectionView
CollectionView
CarouselLayout
ListLayout
GridLayout

63. UICollectionViewCell <SPTCeramicCell >
- populateWithItem: (id <SPTCeramicItem>)item

65. space

67. block
block

69. item item

98. << Item, ItemWithIcon >>

99. << Item >> << Item, ItemWithIcon >><< Item, ItemWithMetadata >>

100. GLUE.framework
Radio Running Albums Shows
Browse
?

101. GLUE.framework
Radio
Running Albums Shows Browse
?

102. GLUE.framework
Radio
Running Albums Shows Browse
Ceramic

103. g Albums
Ceramic

104. g Albums
Ceramic
<< Block >><< Space >> << Item >>CeramicVC

105. g Albums
Ceramic
<< Block >><< Space >> << Item >>CeramicVC

106. g Albums
Ceramic
<< Block >><< Space >> << Item >>CeramicVC

109. GLUE.framework
Radio
Running Albums Shows Browse
CeramicThin

110. Consistent
Thin
Dumb

111. View Model
View Controller
View
Model

112. View Model
View Controller
View
Model

113. View Model
View Controller
View
Model
Backend Client

114. GLUE.framework
Radio
Running Albums Shows Browse
Ceramic

115. GLUE.framework
Radio
Running Albums Shows Browse
Ceramic
Hubs

116. View Model
View Controller
View
Model
Backend Client
Dumb

117. Consistent
Thin
Dumb

118. Демо!

121. Personalization

122. Hypothesize

123. Hypothesize

124. NoApp Store

126. Risks

127. Risks

128. Risks

129. GLUE.framework
Radio
Running Albums Shows Browse
Ceramic
Hubs

130. Frameworks as Machines

131. Frameworks as Machines

132. Final Words
1. Single Purpose
2.Vision
3. ShareThatToy
4. Marketing
5. Shared Success

133. Спасибо!

134. Вопросы?
Hector Zarate
@iOSCowboy
spotify.com/jobs