Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backend-driven UIs - #Pragma Conference 2016

4,485 views

Published on

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.

Published in: Technology
  • Be the first to comment

Backend-driven UIs - #Pragma Conference 2016

  1. 1. @JOHNSUNDELL BACKEND-DRIVEN UIS John Sundell Lead iOS Developer, Spotify
  2. 2. ! "
  3. 3. ! "# CocoaPods/Carthage Fastlane Swift Protocol oriented programming Model-View-ViewModel Promises / Operations / Rx
  4. 4. UI
  5. 5. // 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 }
  6. 6. 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
  7. 7. 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”) ]
  8. 8. 1. SHARED DATA MODEL (FULLY SERIALIZABLE)
  9. 9. struct Image { var url: URL } struct City { var name: String var country: String }struct User { var name: String var imageUrl: URL }
  10. 10. ComponentModel ComponentModel ComponentModel ViewModel
  11. 11. struct { var title: String var subtitle: String var imageUrl: URL ... } ComponentModel
  12. 12. 2. PROTOCOL-ORIENTED VIEWS
  13. 13. Components UICollectionView
  14. 14. Components UICollectionView protocol Component { var view: UIView? { get } func loadView() } func configure(withModel: ComponentModel) var preferredViewSize: CGSize { get } var layoutTraits: [LayoutTrait] { get } UICollectionViewLayout
  15. 15. 3. A DECLARATIVE API
  16. 16. class ViewController: UIViewController { init(json: Data) }
  17. 17. class ViewController: UIViewController { init(json: Data) } $ Reloads Actions Local dataInteractions
  18. 18. ContentOperationsViewModelBuilder Content BACKEND LOCAL CODE
  19. 19. 1. SHARED DATA MODEL 2. PROTOCOL-ORIENTED VIEWS 3. A DECLARATIVE API
  20. 20. DEMO
  21. 21. OPEN SOURCE! %
  22. 22. GITHUB.COM/JOHNSUNDELL @JOHNSUNDELL

×