Building component-driven UIs at Spotify
2 likes•2,573 views
The document discusses building component-driven user interfaces (UIs) at Spotify, highlighting the need for flexibility and speed in UI development as the team has faced challenges with slow and inflexible processes. It emphasizes a model where UI is a function of state that can be dynamically rendered, allowing for rapid iteration and experimentation. Key components include data binding, error handling, and backend integration to streamline UI creation and enhance user experience.
![protocol Component {
var view: UIView? { get }
func loadView()
}
func configureWithModel(model: ComponentModel)
UICollectionView
var preferredViewSize: CGSize { get }
var layoutTraits: [LayoutTrait] { get }
UICollectionViewLayout](https://image.slidesharecdn.com/umt-component-driven-ui-160722082831/85/Building-component-driven-UIs-at-Spotify-17-320.jpg)
![EntityCard
[CompactWidth]
CategoryCard
[CompactWidth]
Carousel
[FullWidth, Stackable]
NavigationRow
[FullWidth, Stackable]
SectionHeader
[FullWidth, Divider]](https://image.slidesharecdn.com/umt-component-driven-ui-160722082831/85/Building-component-driven-UIs-at-Spotify-18-320.jpg)
Building component-driven UIs at Spotify
- 1. Building component-driven UIs at Spotify John Sundell Lead iOS developer @johnsundell
- 2. Music streaming service 100+ million users 100+ mobile developers ~100,000 commits on iOS
- 3. We ❤We build a lot of UI Experimenting
- 4. Optimizing for experimentation UI should be easyto change Code needs to be dynamic Building new UIs should be fast Want to launch & learn as quick as possible
- 7. Card Backend Feature CreateView Controller Setup containerview Register card Load data Handle offline Backend request Parse response Handle errors ortimeouts Caching Bind data to cards Handle highlights & selection IntegrateView Controllerwith the rest ofthe app Wait forthe next binary release
- 8. Always building UIs from scratch made us slow and inflexible
- 9. Most ofthe time, we write code to render a state and to handle events from state changes
- 13. UI = fn(state)
- 14. 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
- 15. State State State State State Rendering & event handling
- 16. UICollectionView
- 17. protocol Component { var view: UIView? { get } func loadView() } func configureWithModel(model: ComponentModel) UICollectionView var preferredViewSize: CGSize { get } var layoutTraits: [LayoutTrait] { get } UICollectionViewLayout
- 19. UI = fn(state) state = json json = backend
- 20. UI = fn(backend)
- 21. DEMO
- 22. Component-driven UI Components have built-in reusability UI as a function of state State can be loaded from backend We can now quickly iterate on UI
- 23. This is just the beginning ;)
- 24. @johnsundell