Building component-driven UIs at Spotify
-
Upload
john-sundell -
Category
Technology
-
view
380 -
download
1
Transcript of Building component-driven UIs at Spotify
![Page 1: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/1.jpg)
Building component-driven UIs at Spotify
John SundellLead iOS developer@johnsundell
![Page 2: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/2.jpg)
Music streaming service
100+ million users
100+ mobile developers
~100,000 commits on iOS
![Page 3: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/3.jpg)
We ❤We build a lot of UI Experimenting
![Page 4: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/4.jpg)
Optimizing for experimentation
UI should be easy to changeCode needs to be dynamicBuilding new UIs should be fastWant to launch & learn as quick as possible
![Page 5: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/5.jpg)
What’s the problem?
![Page 6: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/6.jpg)
Card Backend
Feature
![Page 7: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/7.jpg)
Card Backend
Feature
Create View Controller
Setup container view
Register card
Load data
Handle offline
Backend request
Parse response
Handle errors or timeouts
Caching
Bind data to cards
Handle highlights & selection
Integrate View Controller with the rest of the app
Wait for the next binary release
![Page 8: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/8.jpg)
Always building UIs from scratch made us slow and inflexible
![Page 9: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/9.jpg)
Most of the time, we write code to render a state and to handle events from state changes
![Page 10: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/10.jpg)
Playlists
Links
Genres
"Navigate
![Page 11: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/11.jpg)
Header
Navigate
"
Playlists
![Page 12: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/12.jpg)
"
Playlists
Links
Genres
State
Render
Respond
Navigate
Selection
![Page 13: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/13.jpg)
UI = fn(state)
![Page 14: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/14.jpg)
View Model
Playlists
Links
Genres
State
Albums
Artists
Shared data model Component Model
Component Model
Component Model
Component Model
Component Model
Component Model
Render
Components
![Page 15: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/15.jpg)
State State State State State
Rendering & event handling
![Page 16: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/16.jpg)
UICollectionView
![Page 17: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/17.jpg)
protocol Component {var view: UIView? { get }
func loadView()
}func configureWithModel(model: ComponentModel)
UICollectionView
var preferredViewSize: CGSize { get }var layoutTraits: [LayoutTrait] { get }
UICollectionViewLayout
![Page 18: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/18.jpg)
EntityCard[CompactWidth]
CategoryCard[CompactWidth]
Carousel[FullWidth, Stackable]
NavigationRow[FullWidth, Stackable]
SectionHeader[FullWidth, Divider]
![Page 19: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/19.jpg)
UI = fn(state)
state = json
json = backend
![Page 20: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/20.jpg)
UI = fn(backend)
![Page 21: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/21.jpg)
DEMO
![Page 22: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/22.jpg)
Component-driven UIComponents have built-in reusability
UI as a function of stateState can be loaded from backendWe can now quickly iterate on UI
![Page 23: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/23.jpg)
This is just the beginning ;)
![Page 24: Building component-driven UIs at Spotify](https://reader030.fdocuments.us/reader030/viewer/2022020410/5871ac6a1a28abda6a8b5ae1/html5/thumbnails/24.jpg)
@johnsundell