Backend-driven UIs - #Pragma Conference 2016
-
Upload
john-sundell -
Category
Technology
-
view
4.199 -
download
0
Transcript of Backend-driven UIs - #Pragma Conference 2016
![Page 1: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/1.jpg)
@JOHNSUNDELL
BACKEND-DRIVEN UIS
John Sundell Lead iOS Developer, Spotify
![Page 2: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/2.jpg)
! "
![Page 3: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/3.jpg)
! "#
CocoaPods/Carthage
Fastlane
Swift
Protocol oriented programming
Model-View-ViewModel
Promises / Operations / Rx
![Page 4: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/4.jpg)
UI
![Page 5: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/5.jpg)
![Page 6: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/6.jpg)
// 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 }
![Page 7: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/7.jpg)
UITableViewDelegate
UITableViewDataSource
Caching
UIViewController subclass
JSON parsing
Integrate view controller with the rest of the app
Setup UITableView
Register UITableViewCell classUITableViewCell subclass
Handle network errors
Handle slow connections
OfflinePerform HTTP request
View Model
City Model
BACKEND
![Page 8: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/8.jpg)
![Page 9: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/9.jpg)
![Page 10: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/10.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”)
]
![Page 11: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/11.jpg)
![Page 12: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/12.jpg)
1. SHARED DATA MODEL(FULLY SERIALIZABLE)
![Page 13: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/13.jpg)
struct Image { var url: URL }
struct City { var name: String var country: String }struct User {
var name: String var imageUrl: URL }
![Page 14: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/14.jpg)
ComponentModel
ComponentModel
ComponentModel
ViewModel
![Page 15: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/15.jpg)
struct { var title: String var subtitle: String var imageUrl: URL ... }
ComponentModel
![Page 16: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/16.jpg)
2. PROTOCOL-ORIENTED VIEWS
![Page 17: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/17.jpg)
Components
UICollectionView
![Page 18: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/18.jpg)
Components
UICollectionView
protocol Component {var view: UIView? { get }
func loadView()
}func configure(withModel: ComponentModel)
var preferredViewSize: CGSize { get }var layoutTraits: [LayoutTrait] { get }
UICollectionViewLayout
![Page 19: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/19.jpg)
3. A DECLARATIVE API
![Page 20: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/20.jpg)
class ViewController: UIViewController { init(json: Data) }
![Page 21: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/21.jpg)
class ViewController: UIViewController { init(json: Data) }
$
Reloads Actions Local dataInteractions
![Page 22: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/22.jpg)
ContentOperationsViewModelBuilder Content
BACKEND
LOCAL CODE
![Page 23: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/23.jpg)
1. SHARED DATA MODEL
2. PROTOCOL-ORIENTED VIEWS
3. A DECLARATIVE API
![Page 24: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/24.jpg)
![Page 25: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/25.jpg)
DEMO
![Page 26: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/26.jpg)
OPEN SOURCE! %
![Page 27: Backend-driven UIs - #Pragma Conference 2016](https://reader031.fdocuments.in/reader031/viewer/2022022414/58701eff1a28ab7f428b781b/html5/thumbnails/27.jpg)
GITHUB.COM/JOHNSUNDELL
@JOHNSUNDELL