Building component-based UIs

CocoaHeads meetup
Component-oriented View Controllers - 26 October

Transcript

1. Building component-based UIs
2. Hi, I’m Chris I work at Hyper
3. Spots
4. What is Spots?
5. Spots is a cross-platform view controller framework for building component-based UIs.
6. but first…
7. Credit Give credit where credit is due.
8. John Sundell "Components & View Models in the Cloud - how Spotify builds native, dynamic UIs"
9. Ole Begemann “Scroll Views Inside Scroll Views”
10. Origin Story Hitting the sweet spot of inspiration
11. Why?
12. How does it work?
13. ListSpot UITableView-based
14. GridSpot UICollectionView-based
15. CarouselSpot UICollectionView-based
16. Controller Your friendly Spots controller
17. Component All UI share the same value type
18. var identifier: String? var index: Int var title: String var kind: String var header: String var span: Double var items: [Item] var meta: [String : Any] Component
19. var identifier: String? var index: Int var title: String var kind: String var header: String var span: Double var items: [Item] var meta: [String : Any] Component
20. Item var index: Int var identifier: Int? var title: String var subtitle: String var text: String var image: String var kind: String var action: String? var size: CGSize var children: [[String : Any]] var meta: [String : Any] var relations: [String : [Item]]
21. Why JSON?
22. var identifier: String? var index: Int var title: String var kind: String var header: String var span: Double var items: [Item] var meta: [String : Any] Component var index: Int var identifier: Int? var title: String var subtitle: String var text: String var image: String var kind: String var action: String? var size: CGSize var children: [[String : Any]] var meta: [String : Any] var relations: [String : [Item]] Item
23. Parser.parse(json: [String : Any]) 
 -> [Spotable] From Component {
 var dictionary: [String : Any]
 } To
24. Use value types!
25. What about the views?
26. var preferredViewSize: CGSize { get } SpotConfigurable func configure(_ item: inout Brick.Item)
27. View state caching
28. Live editing
29. Component-based UI’s
31. Spotify iOS using Spots
32. Controller Carousel List
33. Spotify macOS using Spots
39. Live demo
40. Questions?
41. Thank you! ❤
42. • https://github.com/zenangst • https://twitter.com/zenangst 'JOE
    NF
    PO
43. • https://medium.com/@zenangst/hitting-the-sweet-spot- of-inspiration-637d387bc629#.2e16wuskx
 • http://oleb.net/blog/2014/05/scrollviews-inside- scrollviews/
 • https://www.youtube.com/watch?v=TCPWckSi0Xs 3FGFSFODFT
44. • https://github.com/hyperoslo/Spots • https://github.com/hyperoslo/Masquerade • https://github.com/hyperoslo/Compass • https://github.com/hyperoslo/Aftermath • https://github.com/hyperoslo/AftermathSpots • https://github.com/vadymmarkov/Fashion 0QFO
    4PVSDF