Top Banner
FUNCTIONAL UI
62

Functional UI (Cocoaheads Sydney, Sep 2015)

Jan 28, 2018

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Functional UI  (Cocoaheads Sydney, Sep 2015)

FUNCTIONAL UI

Page 2: Functional UI  (Cocoaheads Sydney, Sep 2015)

RobSmiley!

Page 3: Functional UI  (Cocoaheads Sydney, Sep 2015)

!@rjchatfield

linkedin facebook twitter google+ youtube bitbucket

Page 4: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 5: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 6: Functional UI  (Cocoaheads Sydney, Sep 2015)

The UI is a representation of app state”

Page 7: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> UI

Page 8: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 9: Functional UI  (Cocoaheads Sydney, Sep 2015)

[state] ->

Page 10: Functional UI  (Cocoaheads Sydney, Sep 2015)

[state] ->

Page 11: Functional UI  (Cocoaheads Sydney, Sep 2015)

[state]->

Page 12: Functional UI  (Cocoaheads Sydney, Sep 2015)

[data]->heading subtext

id unread unticked

Page 13: Functional UI  (Cocoaheads Sydney, Sep 2015)

HOW?

Page 14: Functional UI  (Cocoaheads Sydney, Sep 2015)

STORY TIME

Page 15: Functional UI  (Cocoaheads Sydney, Sep 2015)

Making Friends with Value Types

Page 16: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 17: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 18: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> DOM

Page 19: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> UIKit

Page 20: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> <cavas/>

Page 21: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> TV

Page 22: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> TERMINAL

Page 23: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> Android

Page 24: Functional UI  (Cocoaheads Sydney, Sep 2015)

HOW??

Page 25: Functional UI  (Cocoaheads Sydney, Sep 2015)

“Virtual DOM”

Page 26: Functional UI  (Cocoaheads Sydney, Sep 2015)

{state}

View

->

Page 27: Functional UI  (Cocoaheads Sydney, Sep 2015)

{state}

View

-> ->

Page 28: Functional UI  (Cocoaheads Sydney, Sep 2015)

View

->

Page 29: Functional UI  (Cocoaheads Sydney, Sep 2015)

View

Old

Diff

->

Page 30: Functional UI  (Cocoaheads Sydney, Sep 2015)

View

Diff

Old->

Page 31: Functional UI  (Cocoaheads Sydney, Sep 2015)

PatchesDiff

->

Page 32: Functional UI  (Cocoaheads Sydney, Sep 2015)

->Diff

->Patches

Page 33: Functional UI  (Cocoaheads Sydney, Sep 2015)

Patches

->

Page 34: Functional UI  (Cocoaheads Sydney, Sep 2015)

Patches

->

Page 35: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 36: Functional UI  (Cocoaheads Sydney, Sep 2015)

{state} View Diff Patches

Page 37: Functional UI  (Cocoaheads Sydney, Sep 2015)

{state}

ViewDiff Patches

->

Page 38: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 39: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 40: Functional UI  (Cocoaheads Sydney, Sep 2015)

MVC

Page 41: Functional UI  (Cocoaheads Sydney, Sep 2015)

MVVM

Page 42: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 43: Functional UI  (Cocoaheads Sydney, Sep 2015)

MVC

Page 44: Functional UI  (Cocoaheads Sydney, Sep 2015)

Model

Controller

View

Page 45: Functional UI  (Cocoaheads Sydney, Sep 2015)

<-[newData]->

Controller

Model ViewView

Page 46: Functional UI  (Cocoaheads Sydney, Sep 2015)

-><-

Controller

ViewModel

Page 47: Functional UI  (Cocoaheads Sydney, Sep 2015)

->

<-ViewModel

Page 48: Functional UI  (Cocoaheads Sydney, Sep 2015)

Component

ACTION

Store

Page 49: Functional UI  (Cocoaheads Sydney, Sep 2015)
Page 50: Functional UI  (Cocoaheads Sydney, Sep 2015)

Component

ACTION

Store

Page 51: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> UI

Component

Page 52: Functional UI  (Cocoaheads Sydney, Sep 2015)

(trigger) -> update

Action

Page 53: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state, update) -> state

Store

fold

Page 54: Functional UI  (Cocoaheads Sydney, Sep 2015)

(state) -> UI

Component

Page 55: Functional UI  (Cocoaheads Sydney, Sep 2015)

Component

ACTION

Store

Page 56: Functional UI  (Cocoaheads Sydney, Sep 2015)

Model

Controller

View

State “as” Data

Communicating Events

Components “as” Functions

Page 57: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 58: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 59: Functional UI  (Cocoaheads Sydney, Sep 2015)

1. FUNCTIONAL UI2. ARCHITECTURE3. DEMO

Page 60: Functional UI  (Cocoaheads Sydney, Sep 2015)

Questions?

@rjchatfield

Page 61: Functional UI  (Cocoaheads Sydney, Sep 2015)

!@rjchatfield

linkedin facebook twitter google+ youtube bitbucket

Page 62: Functional UI  (Cocoaheads Sydney, Sep 2015)

Thank you