The slides from my talk about component-driven UIs and the Hub Framework at Mobile Era 2016 in Olso, Norway

1. @JOHNSUNDELL
BUILDING
COMPONENT-DRIVEN UIS
John Sundell
Lead iOS Developer, Spotify

2. ! "

3. ! "#
CocoaPods/Carthage
Fastlane
Swift
Protocol oriented programming
Model-View-ViewModel
Promises / Operations / Rx

4. UI

6. // MARK: - UITableViewDataSource
func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 0 {
return model.unreadMessages.count
}
return model.readMessages.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "message", for: indexPath)
let message: Message
if indexPath.section == 0 {
message = model.unreadMessages[indexPath.row]
} else {
message = model.readMessages[indexPath.row]
}
cell.textLabel?.text = message.subject
cell.detailTextLabel?.text = "From: (message.sender)"
return cell
}

7. UITableViewDelegate
UITableViewDataSource
Caching
UIViewController subclass
JSON parsing
Integrate view controller with
the rest of the app
Setup UITableView
Register UITableViewCell class
UITableViewCell subclass
Handle network errors
Handle slow connections
Offline
Perform HTTP request
View Model
City Model
BACKEND

10. Render state
[
Image(“Tokyo”),
Image(“Gothenburg”),
Row(“Berlin”, “Germany”),
Row(“Beijing”, “China”),
Row(“Paris”, “France”),
Row(“San Francisco”, “USA”),
User(“Julia”),
User(“Mathew”),
User(“Caroline”),
User(“David”),
Row(“Athens”, “Greece”),
Row(“Oslo”, “Norway”),
Row(“Stockholm”, “Sweden”)
]

11. UI = fn(state)

13. 1. SHARED DATA MODEL

14. struct Image {
var url: URL
}
struct City {
var name: String
var country: String
}struct User {
var name: String
var imageUrl: URL
}

15. ComponentModel
ComponentModel
ComponentModel
ViewModel

16. struct {
var title: String
var subtitle: String
var imageUrl: URL
...
}
ComponentModel

17. 2. PROTOCOL-ORIENTED VIEWS

18. Components
UICollectionView
protocol Component {
var view: UIView? { get }
func loadView()
}
func configure(withModel: ComponentModel)
var preferredViewSize: CGSize { get }
var layoutTraits: [LayoutTrait] { get }
UICollectionViewLayout

19. 3. A DECLARATIVE API

20. $
Logic to load content Respond to Interactions
COMPONENTS
COMPONENT
MODELS

21. CONTENT
OPERATIONS
ViewModelBuilder Content
BACKEND
MODELS

22. COMPONENTS
COMPONENT
MODELS
CONTENT
OPERATIONS
DECLARERENDER

23. 1. SHARED DATA MODEL
2. PROTOCOL-ORIENTED VIEWS
3. A DECLARATIVE API

24. THE HUB FRAMEWORK

25. DEMO

26. OPEN SOURCE! %

27. GITHUB.COM/JOHNSUNDELL
@JOHNSUNDELL