ITT 2016 - Hector Zarate - Consistent, Thin and Dumb

Hector Zarate talks on a journey about Spotify's transition from a client-based app to a server-based one. It explains a little bit about how they leverage their internal frameworks and how did this framework occurred within their organization which is extremely modular.

Transcript

1. Consistent, Thin and Dumb Hector Zarate (@iOSCowboy)
2. Hector Zarate (@iOSCowboy) Software Engineer at Spotify Homepage
3. Spotify Numbers 58 markets Over 30 million Songs 75 million Active Users (20 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 Car Chart scover Genre
13. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
14. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
15. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
16. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
17. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
18. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
19. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
20. Radio Running Album Ads Equalizer Inbox
22. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
23. Radio Running Album Show Player Browse Artist Playlist Social Conce Car Chart scover Genre Ads Equalizer Inbox Podcast
24. GLUE (Global Language, Unified Experience)
25. Fonts Colors Metrics
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.json Metrics.json Fonts.json
40. GLUE.framework Colors.json SPTTheme.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 it!
47. colors metrics fonts
49. Atoms
50. Molecules
51. Compounds
53. Consistent
54. Consistent Thin Dumb
59. ITEM - title - subtitle - image SPACE - title 1 n blocks BLOCK - title - footer - renderType 1 n items
61. space
63. block block
65. item item
94. << Item, ItemWithIcon >>
95. << Item >> << Item, ItemWithIcon >> << Item, ItemWithMetadata >>
96. GLUE.framework Radio Running Albums Shows Browse ?
97. GLUE.framework Radio Running Albums Shows Browse ?
98. GLUE.framework Radio Running Albums Shows Browse Ceramic
99. g Albums Ceramic
100. g Albums Ceramic << Block >> << Space >> << Item >> CeramicVC
101. g Albums Ceramic << Block >> << Space >> << Item >> CeramicVC
102. g Albums Ceramic << Block >> << Space >> << Item >> CeramicVC
105. Try it!
106. VerticalCollectionView CollectionViewCell CollectionViewCell CollectionView
107. VerticalCollectionView CollectionView CollectionView CollectionView
108. VerticalCollectionView CollectionView CollectionView CollectionView CarouselLayout ListLayout GridLayout
109. UICollectionViewCell <SPTCeramicCell > - populateWithItem: (id <SPTCeramicItem>)item
111. GLUE.framework Radio Running Albums Shows Browse Ceramic Thin
112. Consistent Thin Dumb
113. View Model View Controller View Model
114. View Model View Controller View Model
115. View Model View Controller View Model Backend Client
116. GLUE.framework Radio Running Albums Shows Browse Ceramic
117. GLUE.framework Radio Running Albums Shows Browse Ceramic Hubs
118. View Model View Controller View Model Backend Client Dumb
119. Consistent Thin Dumb
120. Demo!
123. Personalization
124. Hypothesize
125. Hypothesize
126. No App Store
128. Risks
129. Risks
130. Risks
131. GLUE.framework Radio Running Albums Shows Browse Ceramic Hubs
132. Frameworks as Machines
133. Frameworks as Machines
134. Final Words 1. Single Purpose 2. Vision 3. Share That Toy 4. Marketing 5. Shared Success
135. Teşekkürler!
136. Sorular? Hector Zarate @iOSCowboy spotify.com/jobs