Component-driven UIs - Mobile Era 2016
?
0 likes?873 views
The slides from my talk about component-driven UIs and the Hub Framework at Mobile Era 2016 in Olso, Norway
![// 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/component-drivenuismobileera-161103135517/85/Component-driven-UIs-Mobile-Era-2016-6-320.jpg)
![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￣)
]](https://image.slidesharecdn.com/component-drivenuismobileera-161103135517/85/Component-driven-UIs-Mobile-Era-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/component-drivenuismobileera-161103135517/85/Component-driven-UIs-Mobile-Era-2016-18-320.jpg)
Component-driven UIs - Mobile Era 2016
- 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 }
- 16. 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. $ Logic to load content Respond to Interactions COMPONENTS COMPONENT MODELS
- 23. 1. SHARED DATA MODEL 2. PROTOCOL-ORIENTED VIEWS 3. A DECLARATIVE API
- 25. DEMO
- 26. OPEN SOURCE! %