Backend-driven UIs - #Pragma Conference 2016
?
3 likes?4,914 views
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.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
![// 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
}](https://image.slidesharecdn.com/backend-drivenuipragmaconf-161014102402/85/Backend-driven-UIs-Pragma-Conference-2016-6-320.jpg)
![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￣)
]](https://image.slidesharecdn.com/backend-drivenuipragmaconf-161014102402/85/Backend-driven-UIs-Pragma-Conference-2016-10-320.jpg)
![Components
UICollectionView
protocol Component {
var view: UIView? { get }
func loadView()
}
func configure(withModel: ComponentModel)
var preferredViewSize: CGSize { get }
var layoutTraits: [LayoutTrait] { get }
UICollectionViewLayout](https://image.slidesharecdn.com/backend-drivenuipragmaconf-161014102402/85/Backend-driven-UIs-Pragma-Conference-2016-18-320.jpg)
Backend-driven UIs - #Pragma Conference 2016
- 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 }
- 15. struct { var title: String var subtitle: String var imageUrl: URL ... } ComponentModel
- 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
- 23. 1. SHARED DATA MODEL 2. PROTOCOL-ORIENTED VIEWS 3. A DECLARATIVE API
- 25. DEMO
- 26. OPEN SOURCE! %