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