Consistent, Thin and Dumb. UA Mobile 2016.
134
Consistent, Thin and Dumb Hector Zarate (@iOSCowboy)
Transcript of Consistent, Thin and Dumb. UA Mobile 2016.
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
?
20132015
2025
1. Scale
2. Innovation
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
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
GLUE.framework
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
Atoms
Molecules
Compounds
Consistent
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
space
block
block
item 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
Демо!
Personalization
Hypothesize
Hypothesize
No App Store
Risks
Risks
Risks
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
Спасибо!
