Functional UI (Cocoaheads Sydney, Sep 2015)
62
FUNCTIONAL UI
-
Upload
robert-j-chatfield -
Category
Technology
-
view
347 -
download
0
Transcript of Functional UI (Cocoaheads Sydney, Sep 2015)
FUNCTIONAL UI
RobSmiley!
!@rjchatfield
linkedin facebook twitter google+ youtube bitbucket
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
The UI is a representation of app state”
“
(state) -> UI
[state] ->
[state] ->
[state]->
[data]->heading subtext
id unread unticked
HOW?
STORY TIME
Making Friends with Value Types
(state) -> DOM
(state) -> UIKit
(state) -> <cavas/>
(state) -> TV
(state) -> TERMINAL
(state) -> Android
HOW??
“Virtual DOM”
{state}
View
->
{state}
View
-> ->
View
->
View
Old
Diff
->
View
Diff
Old->
PatchesDiff
->
->Diff
->Patches
Patches
->
Patches
->
{state} View Diff Patches
{state}
ViewDiff Patches
->
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
MVC
MVVM
MVC
Model
Controller
View
<-[newData]->
Controller
Model ViewView
-><-
Controller
ViewModel
->
<-ViewModel
Component
ACTION
Store
Component
ACTION
Store
(state) -> UI
Component
(trigger) -> update
Action
(state, update) -> state
Store
fold
(state) -> UI
Component
Component
ACTION
Store
Model
Controller
View
State “as” Data
Communicating Events
Components “as” Functions
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO
Questions?
@rjchatfield
!@rjchatfield
linkedin facebook twitter google+ youtube bitbucket
Thank you
