functional ui (cocoaheads sydney, sep 2015)
TRANSCRIPT
![Page 1: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/1.jpg)
FUNCTIONAL UI
![Page 2: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/2.jpg)
RobSmiley!
![Page 3: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/3.jpg)
!@rjchatfield
linkedin facebook twitter google+ youtube bitbucket
![Page 4: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/4.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 5: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/5.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 6: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/6.jpg)
The UI is a representation of app state”
“
![Page 7: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/7.jpg)
(state) -> UI
![Page 8: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/8.jpg)
![Page 9: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/9.jpg)
[state] ->
![Page 10: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/10.jpg)
[state] ->
![Page 11: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/11.jpg)
[state]->
![Page 12: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/12.jpg)
[data]->heading subtext
id unread unticked
![Page 13: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/13.jpg)
HOW?
![Page 14: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/14.jpg)
STORY TIME
![Page 15: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/15.jpg)
Making Friends with Value Types
![Page 16: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/16.jpg)
![Page 17: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/17.jpg)
![Page 18: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/18.jpg)
(state) -> DOM
![Page 19: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/19.jpg)
(state) -> UIKit
![Page 20: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/20.jpg)
(state) -> <cavas/>
![Page 21: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/21.jpg)
(state) -> TV
![Page 22: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/22.jpg)
(state) -> TERMINAL
![Page 23: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/23.jpg)
(state) -> Android
![Page 24: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/24.jpg)
HOW??
![Page 25: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/25.jpg)
“Virtual DOM”
![Page 26: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/26.jpg)
{state}
View
->
![Page 27: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/27.jpg)
{state}
View
-> ->
![Page 28: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/28.jpg)
View
->
![Page 29: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/29.jpg)
View
Old
Diff
->
![Page 30: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/30.jpg)
View
Diff
Old->
![Page 31: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/31.jpg)
PatchesDiff
->
![Page 32: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/32.jpg)
->Diff
->Patches
![Page 33: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/33.jpg)
Patches
->
![Page 34: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/34.jpg)
Patches
->
![Page 35: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/35.jpg)
![Page 36: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/36.jpg)
{state} View Diff Patches
![Page 37: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/37.jpg)
{state}
ViewDiff Patches
->
![Page 38: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/38.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 39: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/39.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 40: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/40.jpg)
MVC
![Page 41: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/41.jpg)
MVVM
![Page 42: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/42.jpg)
![Page 43: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/43.jpg)
MVC
![Page 44: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/44.jpg)
Model
Controller
View
![Page 45: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/45.jpg)
<-[newData]->
Controller
Model ViewView
![Page 46: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/46.jpg)
-><-
Controller
ViewModel
![Page 47: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/47.jpg)
->
<-ViewModel
![Page 48: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/48.jpg)
Component
ACTION
Store
![Page 49: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/49.jpg)
![Page 50: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/50.jpg)
Component
ACTION
Store
![Page 51: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/51.jpg)
(state) -> UI
Component
![Page 52: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/52.jpg)
(trigger) -> update
Action
![Page 53: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/53.jpg)
(state, update) -> state
Store
fold
![Page 54: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/54.jpg)
(state) -> UI
Component
![Page 55: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/55.jpg)
Component
ACTION
Store
![Page 56: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/56.jpg)
Model
Controller
View
State “as” Data
Communicating Events
Components “as” Functions
![Page 57: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/57.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 58: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/58.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 59: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/59.jpg)
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
![Page 60: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/60.jpg)
Questions?
@rjchatfield
![Page 61: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/61.jpg)
!@rjchatfield
linkedin facebook twitter google+ youtube bitbucket
![Page 62: Functional UI (Cocoaheads Sydney, Sep 2015)](https://reader031.vdocuments.site/reader031/viewer/2022022415/5a6d8bee7f8b9ad6418b5a4d/html5/thumbnails/62.jpg)
Thank you