oh composable world!

143

Upload: brian-lonsdorf

Post on 14-Apr-2017

1.026 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Oh Composable World!
>

Norma Act I - Casta Diva

Vincenzo Bellini

Various Artists

2009-10-15T070000Z

66 Most Beautiful Opera Arias

2009 Menuetto Classics

Rome Lyric Opera Orchestra amp Chorus Alberico Vitalini amp ML Barducci

const sortReleasesOut = (releases) =gt _(releases)groupBy(lsquoid)values()flatten()sortBy((b) =gtbCoreReleasedataValuesreleaseDate)reverse()value()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const doin_Thangs = str =gt _(str) words() groupBy(s =gt slength) orderBy(x =gt xlength) take(2) flatten() value()

const reactiveUpInHere = el =gt fromEvent(el keyup) map(e =gt etargetvalue) filter(text =gt textlength gt 2) throttle(500) distinctUntilChanged()

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 2: Oh Composable World!

const sortReleasesOut = (releases) =gt _(releases)groupBy(lsquoid)values()flatten()sortBy((b) =gtbCoreReleasedataValuesreleaseDate)reverse()value()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const doin_Thangs = str =gt _(str) words() groupBy(s =gt slength) orderBy(x =gt xlength) take(2) flatten() value()

const reactiveUpInHere = el =gt fromEvent(el keyup) map(e =gt etargetvalue) filter(text =gt textlength gt 2) throttle(500) distinctUntilChanged()

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 3: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const doin_Thangs = str =gt _(str) words() groupBy(s =gt slength) orderBy(x =gt xlength) take(2) flatten() value()

const reactiveUpInHere = el =gt fromEvent(el keyup) map(e =gt etargetvalue) filter(text =gt textlength gt 2) throttle(500) distinctUntilChanged()

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 4: Oh Composable World!

const doin_Thangs = str =gt _(str) words() groupBy(s =gt slength) orderBy(x =gt xlength) take(2) flatten() value()

const reactiveUpInHere = el =gt fromEvent(el keyup) map(e =gt etargetvalue) filter(text =gt textlength gt 2) throttle(500) distinctUntilChanged()

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 5: Oh Composable World!

const reactiveUpInHere = el =gt fromEvent(el keyup) map(e =gt etargetvalue) filter(text =gt textlength gt 2) throttle(500) distinctUntilChanged()

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 6: Oh Composable World!

playerunitWithinRange(2)where(UnitIsEnemy)where(UnitIsTank)DoDamage(5)

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 7: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 8: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 9: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() Chain Dot Com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 10: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() lsquochain dot com

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 11: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com ]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 12: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join() [chain dot com]

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 13: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

[com dot chain]

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 14: Oh Composable World!

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 15: Oh Composable World!

const dotChainy = str =gt const lower = strtoLowerCase() const words = lowersplit( )

wordsreverse()

for(let i in words) words[i] = words[i]trim()

let keepers = []

for(let i in words) if(words[i]length gt 3) keeperspush(words[i])

return keepersjoin()

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 16: Oh Composable World!

class AppMailer

constructor() thisemailer = new Emailer()

removeInvalidAddresses() for(let i in thisaddresses) if(thisaddresses[i]match()) thisaddressessplice(i 1)

sendEmail(from to) thisaddresses = to thisemailersetSender(from) thisremoveInvalidAddresses() thisemailersetRecipients(thisaddresses) thisemailersend()

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 17: Oh Composable World!

ldquothe major contributor to this complexity in many systems is the handling of state and the burden that this adds when trying to analyse and reason about the systemrdquo

Out of the Tar Pit 2006-Ben Moseley amp Peter Marks

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 18: Oh Composable World!

const dotChainy = str =gt str toLowerCase() split( ) map(c =gt ctrim()) reverse() filter(x =gt xlength gt 3) join()

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 19: Oh Composable World!

WHAT IF I TOLD YOUhellip

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 20: Oh Composable World!

WHAT IF I TOLD YOUhellip

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 21: Oh Composable World!

Programming == Math

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 22: Oh Composable World!

try return f(x) catch(e) consoleerror(e)

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 23: Oh Composable World!

if(x) return f() else return y

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 24: Oh Composable World!

for(let thing in things) if(thingamount gt 100) keeperspush(thingname)

for (i = 0 i lt carslength i++) text += cars[i] + ltbrgt

while (i lt 10) text += The number is + i i++

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 25: Oh Composable World!

let stuff = [123]

stuff = [12]

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 26: Oh Composable World!

stuffsplice(0 2)

stuffpop()

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 27: Oh Composable World!

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 28: Oh Composable World!

Programming == Math

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 29: Oh Composable World!

Programming = Math

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 30: Oh Composable World!

f g

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 31: Oh Composable World!

f g

dot

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 32: Oh Composable World!

f g = x =gt f(g(x))

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 33: Oh Composable World!

strtoUpperCase()trim()

trim(toUpperCase(str))

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 34: Oh Composable World!

Category theory

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 35: Oh Composable World!

fn fn

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 36: Oh Composable World!

fnfn

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 37: Oh Composable World!

a bf

cg

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 38: Oh Composable World!

ag

cf

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 39: Oh Composable World!

a

F(a)

bf

F(f)

cg

F(b) F(g)F(c)

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 40: Oh Composable World!

a

F(a)

g

F(gf)

cf

F(c)

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 41: Oh Composable World!

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) A

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 42: Oh Composable World!

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt parseInt(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 43: Oh Composable World!

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 44: Oh Composable World!

const contrivedEx1 = str =gt [strtrim()] map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

const contrivedEx1 = str =gt const trimmed = strtrim() const number = parseInt(trimmed) const nextNumber = number + 1 return StringfromCharCode(nextNumber)

contrivedEx1( 64 ) [lsquoArsquo]

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 45: Oh Composable World!

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 46: Oh Composable World!

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) map(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) Box(lsquoArsquo)

const Box = x =gt( map f =gt Box(f(x)))

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 47: Oh Composable World!

const contrivedEx1 = str =gt Box(strtrim()) map(trimmed =gt new Number(trimmed)) map(number =gt number + 1) fold(nextNumber =gt StringfromCharCode(nextNumber))

contrivedEx1( 64 ) lsquoArsquo

const Box = x =gt( map f =gt Box(f(x)) fold f =gt f(x))

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 48: Oh Composable World!

Unified call syntaxMinimized state

Captured AssignmentForced Control Flow

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 49: Oh Composable World!

AssignmentLoops

CallbacksSide EffectsBranching

Errors

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 50: Oh Composable World!

Loops

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 51: Oh Composable World!

mapfilter

reduce

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 52: Oh Composable World!

const range = (i count) =gt unfold(x =gt if(x lt= count) [x x+1] i)

range(510) [ 5 6 7 8 9 10 ]

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 53: Oh Composable World!

const alphabet = () =gt unfold(x =gt if(x lt 26) [StringfromCharCode(x+65) x+1] 0)

alphabet() [ABCDEFGHIJKLMNOPQRSTUVWXYZ]

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 54: Oh Composable World!

AssignmentLoops

CallbacksSide EffectsBranching

Errors

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 55: Oh Composable World!

CallbacksSide Effects

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 56: Oh Composable World!

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 57: Oh Composable World!

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 58: Oh Composable World!

Promise(6)then(six =gt six 2) Promise(3)

Promise(6)then(six =gt Promise(six 2)) Promise(3)

Promise(6)map(six =gt six 2) Promise(3)

Promise(6)chain(six =gt Promise(six 2)) Promise(3)

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 59: Oh Composable World!

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 60: Oh Composable World!

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 61: Oh Composable World!

const contrivedEx2 = () =gt fsreadFile(cfgjson utf-8 (err contents) =gt if(err) throw err const newContents = contentsreplace(8g 6) fswriteFile(cfg1json newContents (err _) =gt if(err) throw err consolelog(success) ) )

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 62: Oh Composable World!

const readFile = futurize(fsreadFile)const writeFile = futurize(fswriteFile)

const contrivedEx2 = () =gt readFile(cfgjson utf-8) map(contents =gt contentsreplace(8g 6)) chain(replaced =gt writeFile(cfg1json replaced))

contrivedEx2()fork(e =gt consoleerror(e) r =gt consolelog(success))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 63: Oh Composable World!

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 64: Oh Composable World!

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 65: Oh Composable World!

const lib = username =gt getTweets(username) map(ts =gt truncateTo130(ts)) chain(ts =gt writeFile(tweetsjson ts))

lib(lsquodrbooleanrsquo)chain(f =gt saveToS3(f))fork(e =gt consoleerror(e)

r =gt consolelog(r))

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 66: Oh Composable World!

AssignmentLoops

CallbacksSide EffectsBranching

Errors

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 67: Oh Composable World!

BranchingErrors

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 68: Oh Composable World!

EitherOr

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 69: Oh Composable World!

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 70: Oh Composable World!

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 71: Oh Composable World!

Left(no ducks ()fold(e =gt `we had an error $e` s =gt stoUpperCase()) we had an error no ducks (

Right(ducks)fold(e =gt `we had an error $e` s =gt stoUpperCase())DUCKS

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 72: Oh Composable World!

leftOrRightfold(e =gt `we had an error $e` s =gt stoUpperCase())

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 73: Oh Composable World!

Right(hair brown) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Right(five 2))

Right(10)

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 74: Oh Composable World!

Left(ignored) map(obj =gt objhair) map(brown =gt brownlength) chain(five =gt Left(five 2))

Left(ignored)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 75: Oh Composable World!

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 76: Oh Composable World!

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 77: Oh Composable World!

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

const getConfig = () =gt try return fsreadFileSync(cfgjson) catch(e) return null const contrivedEx3 = () =gt const cfg = getConfig() if(cfg) const parsed = JSONparse(cfg) return parsedport else return 3000

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 78: Oh Composable World!

Claim

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 79: Oh Composable World!

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 80: Oh Composable World!

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 81: Oh Composable World!

const contrivedEx4 = user =gt const address = useraddress if(address) const zip = addressmatch((d5)$i) if(zip) const city = cityByZip(zip)

if(city) return city else return cant find city return cant find city

const contrivedEx4 = user =gt fromNullable(useraddress) chain(a =gt fromNullable(amatch((d5)$i))) chain(zip =gt fromNullable(cityByZip(zip))) fold(() =gt cant find city city =gt city)

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 82: Oh Composable World!

AssignmentLoops

CallbacksSide EffectsBranching

Errors

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 83: Oh Composable World!

const depObjs = b =gt List(bdeps)flatMap(next =gt findDependencyByProject(nextProjectname bpreviousdeps) fold(x =gt x found =gt makeArgs(next found)))

const mapBuildsAndDepsForDiffQueue = (builds) =gt List(builds) filter(b =gt bprevious) flatMap(b =gt makeArgs(b bprevious)concat(depObjs(b))) filter(b =gt b) toJS()

const filterExistingDiffs = (items) =gt List(items)traverse(Taskof (i) =gt find(Diff BuildId ibuildId DiffId iprevId type imethod ) map(e =gt eswap()getOrElse(null)) map(bs =gt bsfilter(x =gt x)toJS())

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 84: Oh Composable World!

const buildProject = (branch sha) =gt queueUnzipWwwOnS3(sha) chain(() =gt isReleaseOrMainBranch(branch)) fold(() =gt _noop () =gt generateReport(sha) chain(queueDiffsForTileBuildsAndDeps) chain(() =gt getHeadCommit(sha) fold(() =gt Taskof(null) head =gt makeVrtDeployment(head sha) chain(() =gt createPrApp(head sha)))) fork(consoleerror

consolelog))

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 85: Oh Composable World!

const vrtReport = (sha email platforms) =gt rejectFinishedPlatformOptions(platforms) chain(plats =gt platsmap(gatherScreenshots)) chain(shots =gt fromNullable(sha) fold(() =gt findLastRef() () =gt findBuild(sha)) chain(ref =gt renderReport(shots ref email))) fork(e =gt e r =gt r)

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 86: Oh Composable World!

Harder to hack

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 87: Oh Composable World!

const getConfig = () =gt Eithertry(fsreadFileSync)(cfgjson)

const contrivedEx3 = () =gt getConfig() map(JSONparse) fold(e =gt 3000 c =gt cport)

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 88: Oh Composable World!

Safer

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 89: Oh Composable World!

const ProfileLink = user =gtlta href=`users$

uid`gtunameltagt

const Header = str =gt lth1gtNow Viewing strlth1gt

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 90: Oh Composable World!

Component a -gt JSX

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 91: Oh Composable World!

a JSXf

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 92: Oh Composable World!

a JSXf

bg

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 93: Oh Composable World!

a JSXf

bg

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 94: Oh Composable World!

a JSXf

bg

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 95: Oh Composable World!

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 96: Oh Composable World!

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Title = Comp(Heading)contramap(s =gt spageName)

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 97: Oh Composable World!

const Title = Comp(Heading)contramap(s =gt spageName)

Titlefold( pageName lsquoHome currentUser id 2 name Chris Harrisonrsquo )

lth1gtNow Viewing Homelth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 98: Oh Composable World!

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))))

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 99: Oh Composable World!

const Comp = g =gt( fold g contramap f =gt Comp(x =gt g(f(x))) concat other =gt Comp(x =gt ltdivgtg(x) otherfold(x)ltdivgt))

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 100: Oh Composable World!

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName)

const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 101: Oh Composable World!

const ProfileLink = user =gtlta href=`users$uid`gtunameltagt)

const Heading = str =gt lth1gtNow Viewing strlth1gt

const Heading = Comp(Title)contramap(s =gt spageName) const Link = Comp(ProfileLink)contramap(s =gt scurrentUser)

const App = Headingconcat(Link)

Appfold( pageName lsquoHome currentUser name Chris Harrisonrsquo ) ltdivgt lth1gtNow Viewing Homelth1gt lta href=users22gtChris Harrisonltagt ltdivgt

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 102: Oh Composable World!

Reducer (a b) -gt a

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 103: Oh Composable World!

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 104: Oh Composable World!

const r = Reducer((acc x) =gt accconcat(x)) contramap(x =gt `The number is $x`) map(x =gt x + )

[123]reduce(rfold ) The number is 1 The number is 2 The number is 3

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 105: Oh Composable World!

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))))

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 106: Oh Composable World!

const Reducer = g =gt( fold g contramap f =gt Reducer((acc x) =gt g(acc f(x))) map f =gt Reducer((acc x) =gt f(g(acc x))) concat o =gt Reducer((acc x) =gt ofold(g(acc x) x)))

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 107: Oh Composable World!

const appReducer = Reducer((state action) =gt switch (actiontype) case set_visibility_filter return Objectassign( state visibilityFilter actionfilter ) default return state )

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 108: Oh Composable World!

const todoReducer = Reducer((state action) =gt switch (actiontype) case new_todo const t = id 0 title actionpayloadtitle return Objectassign( state todos statetodosconcat(t) ) default return state )

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 109: Oh Composable World!

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all

action))map(s =gt Objectassign( s lastUpdated Date()))

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 110: Oh Composable World!

const todoApp =appReducerconcat(todoReducer)contramap(action =gt Objectassign(filter all action))map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 111: Oh Composable World!

const todoApp =appReducercontramap(action =gt Objectassign(filter all action))concat(todoReducer)map(s =gt Objectassign( s lastUpdated Date()))

todoAppfold(visibilityFilter lsquocomplete type lsquoset_visibility_filter)

visibilityFilter all lastUpdated Sun Aug 21 2016 110448 GMT-0700 (PDT)

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 112: Oh Composable World!

Hoc Component -gt Component

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 113: Oh Composable World!

const Hoc = g =gt( fold g concat other =gt Hoc(x =gt g(otherfold(x))))

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 114: Oh Composable World!

const hoc = Hoc(withReducer(lsquostate dispatch todoAppfold todos []))

const Todos = hocfold(( state dispatch ) =gt ltdivgt ltspangtFilter statevisibilityFilterltspangt ltulgt statetodosmap(t =gt ltligtttitleltligt) ltulgt ltbutton onClick=() =gt dispatch( type new_todo payload title New todo)gt Add Todo ltbuttongt ltbutton onClick=() =gt dispatch( type set_visibility_filter )gt Set Visibility ltbuttongt ltdivgt)

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 115: Oh Composable World!

const App = Headingcontramap(s =gt spageName) concat(TodoComp) concat(Linkcontramap(s =gt scurrentUser)) fold( pageName Home currentUser id 2 name Boris )

ReactDOMrender(App documentgetElementById(body))

const TodoComp = Component(classToFn(Todos))

const Heading = Component(s =gt lth1gtNow Viewing slth1gt)

const Link = Component(u =gt lta href=`users$uid`gtunameltagt)

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 116: Oh Composable World!

httpsjsfiddlenetcnsn8yk29

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 117: Oh Composable World!

map =compose =

program construction

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 118: Oh Composable World!

FunctorBoxof(20)map(x =gt x 2) Box(10)

Monad Boxof(true)chain(x =gt Boxof(x)) Box(false) Monoid Boxof(small)concat(Boxof(pox)) Box(smallpox)

Applicative Boxof(x =gt x + 1)ap(2) Box(3)

Traversable Boxof(3)traverse(Eitherof x =gt fromNullable(x)) Right(Box(3))

Natural transformation eitherToBox(fromNullable(null)) Box(null)

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 119: Oh Composable World!

Professor Frisbyrsquos Composable JavaScript

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 120: Oh Composable World!

drboolean

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143
Page 121: Oh Composable World!

drboolean

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6
  • Slide 7
  • Slide 8
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Slide 17
  • Slide 18
  • Slide 19
  • Slide 20
  • Slide 21
  • Slide 22
  • Slide 23
  • Slide 24
  • Slide 25
  • Slide 26
  • Slide 27
  • Slide 28
  • Slide 29
  • Slide 30
  • Slide 31
  • Slide 32
  • Slide 33
  • Slide 34
  • Slide 35
  • Slide 36
  • Slide 37
  • Slide 38
  • Slide 39
  • Slide 40
  • Slide 41
  • Slide 42
  • Slide 43
  • Slide 44
  • Slide 45
  • Slide 46
  • Slide 47
  • Slide 48
  • Slide 49
  • Slide 50
  • Slide 51
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  • Slide 60
  • Slide 61
  • Slide 62
  • Slide 63
  • Slide 64
  • Slide 65
  • Slide 66
  • Slide 67
  • Slide 68
  • Slide 69
  • Slide 70
  • Slide 71
  • Slide 72
  • Slide 73
  • Slide 74
  • Slide 75
  • Slide 76
  • Slide 77
  • Slide 78
  • Slide 79
  • Slide 80
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Slide 86
  • Slide 87
  • Slide 88
  • Slide 89
  • Slide 90
  • Slide 91
  • Slide 92
  • Slide 93
  • Slide 94
  • Slide 95
  • Slide 96
  • Slide 97
  • Slide 98
  • Slide 99
  • Slide 100
  • Slide 101
  • Slide 102
  • Slide 103
  • Slide 104
  • Slide 105
  • Slide 106
  • Slide 107
  • Slide 108
  • Slide 109
  • Slide 110
  • Slide 111
  • Slide 112
  • Slide 113
  • Slide 114
  • Slide 115
  • Slide 116
  • Slide 117
  • Slide 118
  • Slide 119
  • Slide 120
  • Slide 121
  • Slide 122
  • Slide 123
  • Slide 124
  • Slide 125
  • Slide 126
  • Slide 127
  • Slide 128
  • Slide 129
  • Slide 130
  • Slide 131
  • Slide 132
  • Slide 133
  • Slide 134
  • Slide 135
  • Slide 136
  • Slide 137
  • Slide 138
  • Slide 139
  • Slide 140
  • Slide 141
  • Slide 142
  • Slide 143