Building component-based UIs

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Hi, I’m Chris I work at Hyper

Slide 3

Slide 3 text

Spots

Slide 4

Slide 4 text

What is Spots?

Slide 5

Slide 5 text

Spots is a cross-platform view controller framework for building component-based UIs.

Slide 6

Slide 6 text

but first…

Slide 7

Slide 7 text

Credit Give credit where credit is due.

Slide 8

Slide 8 text

John Sundell "Components & View Models in the Cloud - how Spotify builds native, dynamic UIs"

Slide 9

Slide 9 text

Ole Begemann “Scroll Views Inside Scroll Views”

Slide 10

Slide 10 text

Origin Story Hitting the sweet spot of inspiration

Slide 11

Slide 11 text

Why?

Slide 12

Slide 12 text

How does it work?

Slide 13

Slide 13 text

ListSpot UITableView-based

Slide 14

Slide 14 text

GridSpot UICollectionView-based

Slide 15

Slide 15 text

CarouselSpot UICollectionView-based

Slide 16

Slide 16 text

Controller Your friendly Spots controller

Slide 17

Slide 17 text

Component All UI share the same value type

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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]]

Slide 21

Slide 21 text

Why JSON?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Parser.parse(json: [String : Any])   -> [Spotable] From Component {  var dictionary: [String : Any]  } To

Slide 24

Slide 24 text

Use value types!

Slide 25

Slide 25 text

What about the views?

Slide 26

Slide 26 text

var preferredViewSize: CGSize { get } SpotConfigurable func configure(_ item: inout Brick.Item)

Slide 27

Slide 27 text

View state caching

Slide 28

Slide 28 text

Live editing

Slide 29

Slide 29 text

Component-based UI’s

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Spotify iOS using Spots

Slide 32

Slide 32 text

Controller Carousel List

Slide 33

Slide 33 text

Spotify macOS using Spots

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Live demo

Slide 40

Slide 40 text

Questions?

Slide 41

Slide 41 text

Thank you! ❤

Slide 42

Slide 42 text

• https://github.com/zenangst • https://twitter.com/zenangst 'JOENFPO

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

• 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 0QFO4PVSDF