The slides from my talk at #Pragma Conference 2016 in Verona, Italy about Backend-driven UI, also introducing Spotify's Hub Framework as an open source project.

1. @JOHNSUNDELL
BACKEND-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. Backend response
[
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”)
]

12. 1. SHARED DATA MODEL
(FULLY SERIALIZABLE)

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

14. ComponentModel
ComponentModel
ComponentModel
ViewModel

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

16. 2. PROTOCOL-ORIENTED VIEWS

17. Components
UICollectionView

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. class ViewController: UIViewController {
init(json: Data)
}

21. class ViewController: UIViewController {
init(json: Data)
}
$
Reloads Actions Local dataInteractions

22. ContentOperationsViewModelBuilder Content
BACKEND
LOCAL CODE

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

25. DEMO

26. OPEN SOURCE! %

27. GITHUB.COM/JOHNSUNDELL
@JOHNSUNDELL