Consistent, Thin and DumbHector Zarate (@iOSCowboy)
Consistent, Thin and DumbHector Zarate (@iOSCowboy)
Spotify Numbers
59 markets Over 30 million Songs75 million Active Users
(30 million Subscribers)
iOS Client Numbers
50 monthly contributors 0.6 million lines of code millions of users
Visually Inconsistent
Thick
Client-Based
Consistent
Light
Backend Driven
Consistent
Thin
Dumb
3. Modular Organization
3. Modular Organization
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover Genres
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album
Ads Equalizer Inbox
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
Radio Running Album Show
Player Browse Artist Playlist
Social Concert
CarChart
Discover GenresAds Equalizer Inbox Podcast
GLUE(Global Language, Unified Experience)
FontsColorsMetrics
UIKit
GLUE.framework
Radio Running Albums Shows
GLUE.framework / 1. Subclassing
UIButton
SPTActionButton
UICollectionViewCell
SPTTableBasedCollectionViewCell SPTCollectionViewCell
GLUE.framework / 2. Factories
UIImage+SPTIcon.h
UIImageView+SPTImageStyleMasking.h
UILabel+SPTDefaultApperance.h
GLUE.framework / 3. Configuration
Colors.jsonMetrics.json Fonts.json
GLUE.framework
Colors.jsonSPTTheme.h
UIKit
GLUE.framework
Radio Running Albums Shows
Colors.json
{ "glueBlackColor": "000000", "glueGray25Color": "3E3E40", "glueGray55Color": "88898C", "glueGray80Color": "c6c7cc", "glueGray90Color": "DFE0E6", "glueWhiteColor": "ffffff",
"glueGreenLightColor": "1ed760", "glueGreenColor": "1db954", "glueGreenDarkColor": "1da74d",
}
Colors.json
{ "glueBlackColor": "000000", "glueGray25Color": "3E3E40", "glueGray55Color": "88898C", "glueGray80Color": "c6c7cc", "glueGray90Color": "DFE0E6", "glueWhiteColor": "ffffff",
"glueGreenLightColor": "1ed760", "glueGreenColor": "c53770", "glueGreenDarkColor": "1da74d",
}
Try this at home!
colorsmetrics fonts
Consistent
Thin
Dumb
ITEM
- title
- subtitle
- image
SPACE
- title
1 nblocks
BLOCK
- title
- footer
- renderType
1 nitems
VerticalCollectionView
CollectionViewCell
CollectionViewCell
CollectionView
VerticalCollectionView
CollectionView
CollectionView
CollectionView
VerticalCollectionView
CollectionView
CollectionView
CollectionView
CarouselLayout
ListLayout
GridLayout
UICollectionViewCell <SPTCeramicCell >
- populateWithItem: (id <SPTCeramicItem>)item
<< Item, ItemWithIcon >>
<< Item >> << Item, ItemWithIcon >><< Item, ItemWithMetadata >>
GLUE.framework
Radio Running Albums ShowsBrowse
?
GLUE.framework
RadioRunning Albums Shows Browse
?
GLUE.framework
RadioRunning Albums Shows Browse
Ceramic
Running Albums Shows
Ceramic
Running Albums Shows
Ceramic<< Block >><< Space >> << Item >>CeramicVC
Running Albums Shows
Ceramic<< Block >><< Space >> << Item >>CeramicVC
Running Albums Shows
Ceramic<< Block >><< Space >> << Item >>CeramicVC
GLUE.framework
RadioRunning Albums Shows Browse
CeramicThin
Consistent
Thin
Dumb
View Model
View Controller
View
Model
View Model
View Controller
View
Model
View Model
View Controller
View
Model
Backend Client
GLUE.framework
RadioRunning Albums Shows Browse
Ceramic
GLUE.framework
Radio
Running Albums Shows Browse
Ceramic
Hubs
View Model
View Controller
View
Model
Backend Client
Dumb
Consistent
Thin
Dumb
GLUE.framework
Radio
Running Albums Shows Browse
Ceramic
Hubs
Frameworks as Machines
Frameworks as Machines
Final Words
1. Single Purpose
2. Vision
3. Share That Toy
4. Marketing
5. Shared Success
Вопросы?Hector Zarate @iOSCowboy
spotify.com/jobs