Oh Composable World!

.values()
.flatten()
.sortBy((b) =>
b.CoreRelease.dataValue
.reverse()
.value()

const dotChainy = str =>
str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.filter(x => x.length > 3)
.join('')

const doin_Thangs = str =>
_(str)
.words()
.groupBy(s => s.length)
.orderBy(x => x.length)
.take(2)
.flatten()
.value()

const reactiveUpInHere = el =>
fromEvent(el, 'keyup')
.map(e => e.target.value)
.filter(text => text.length > 2)
.throttle(500)
.distinctUntilChanged()

player
.unitWithinRange(2)
.where(UnitIs.Enemy)
.where(UnitIs.Tank)
.DoDamage(5)

str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.join('')
Chain Dot Com '

str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.join('')
‘chain dot com '

str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.join('')
['chain', 'dot', 'com ']

str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.join('')
['chain', 'dot', 'com']

str
.toLowerCase()
.split(' ')
.map(c => c.trim())
.reverse()
.join('')
['com', 'dot', 'chain']

const dotChainy = str => {
const lower = str.toLowerCase()
const words = lower.split(' ')
words.reverse()
for(let i in words) {
words[i] = words[i].trim()
}
let keepers = []
for(let i in words) {
if(words[i].length > 3) {
keepers.push(words[i])
}
}
return keepers.join('')
}

class AppMailer {
constructor() {
this.emailer = new Emailer()
}
removeInvalidAddresses() {
for(let i in this.addresses) {
if(!this.addresses[i].match(/@/)) {
this.addresses.splice(i, 1)
}
}
}
sendEmail({from, to}) {
this.addresses = to
this.emailer.setSender(from)
this.removeInvalidAddresses()
this.emailer.setRecipients(this.addresses)
this.emailer.send()
}

“the 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 system.”
Out of the Tar Pit 2006
-Ben Moseley & Peter Marks

try {
return f(x)
} catch(e) {
console.error(e)
}

if(x) {
return f()
} else {
return y
}

for(let thing in things) {
if(thing.amount > 100) keepers.push(thing.name)
}
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
while (i < 10) {
text += "The number is " + i;
i++;
}

let stuff = [1,2,3]
stuff = [1,2]

stuff.splice(0, 2)
stuff.pop()

Assignment
Loops
Callbacks
Side Effects
Branching
Errors

str.toUpperCase().trim()
trim(toUpperCase(str))

a
F(a)
b
f
F(f)
c
g
F(b)
F(g)
F(c)

const contrivedEx1 = str => {
const trimmed = str.trim()
const number = parseInt(trimmed)
const nextNumber = number + 1
return String.fromCharCode(nextNumber)
}
contrivedEx1(' 64 ')
// 'A'

const contrivedEx1 = str =>
[str.trim()]
.map(trimmed => parseInt(trimmed))
.map(number => number + 1)
.map(nextNumber =>
String.fromCharCode(nextNumber))
}
// [‘A’]

[str.trim()]
.map(trimmed => new Number(trimmed))
.map(nextNumber =>
}
// [‘A’]

Box(str.trim())
.map(nextNumber =>
// Box(‘A’)
const Box = x =>
({
map: f => Box(f(x))
})

Box(str.trim())
.fold(nextNumber =>
// ‘A’
const Box = x =>
({
map: f => Box(f(x)),
fold: f => f(x)
})

Unified call syntax
Minimized state
Captured Assignment
Forced Control Flow

const range = (i, count) =>
unfold(x => if(x <= count) [x, x+1], i)
range(5,10)
// [ 5, 6, 7, 8, 9, 10 ]

const alphabet = () =>
unfold(x => if(x < 26) [String.fromCharCode(x+65), x+1], 0)
alphabet()
// [A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z]

Promise(6).then(six => six / 2)
// Promise(3)
Promise(6).then(six => Promise(six / 2))
// Promise(3)
Promise(6).map(six => six / 2)
// Promise(3)
Promise(6).chain(six => Promise(six / 2))
// Promise(3)

const contrivedEx2 = () =>
fs.readFile('cfg.json', 'utf-8', (err, contents) => {
if(err) throw err
const newContents = contents.replace(/8/g, '6')
fs.writeFile('cfg1.json', newContents, (err, _) => {
if(err) throw err
console.log('success!')
})
})

const readFile = futurize(fs.readFile)
const writeFile = futurize(fs.writeFile)
readFile('cfg.json', 'utf-8')
.map(contents => contents.replace(/8/g, '6'))
.chain(replaced => writeFile('cfg1.json', replaced))

fs.readFile('cfg.json', 'utf-8', (err, contents) => {
if(err) throw err
const newContents = contents.replace(/8/g, '6')
fs.writeFile('cfg1.json', newContents, (err, _) => {
if(err) throw err
console.log('success!')
})
})

contrivedEx2().fork(e => console.error(e),
r => console.log('success!'))

const lib = username =>
getTweets(username)
.map(ts => truncateTo130(ts))
.chain(ts => writeFile('tweets.json', ts))
lib(‘@drboolean’)

getTweets(username)
.chain(f => saveToS3(f))

getTweets(username)
.chain(f => saveToS3(f))
.fork(e => console.error(e),
r => console.log(r))

Left('no ducks :(').fold(e => `we had an error: ${e}`,
s => s.toUpperCase())
// we had an error: no ducks :(
Right('ducks').fold(e => `we had an error: ${e}`,
//"DUCKS"

leftOrRight.fold(e => `we had an error: ${e}`,

Right({hair: 'brown'})
.map(obj => obj.hair)
.map(brown => brown.length)
.chain(five => Right(five * 2))
// Right(10)

Left('ignored')
.map(obj => obj.hair)
.map(brown => brown.length)
.chain(five => Left(five * 2))
// Left('ignored')

const getConfig = () => {
try {
return fs.readFileSync('cfg.json')
} catch(e) {
return null
}
}
const contrivedEx3 = () => {
const cfg = getConfig()
if(cfg) {
const parsed = JSON.parse(cfg)
return parsed.port
} else {
return 3000
}
}

const getConfig = () =>
Either.try(fs.readFileSync)('cfg.json')
getConfig()
.map(JSON.parse)
.fold(e => 3000, c => c.port)

const getConfig = () =>
Either.try(fs.readFileSync)('cfg.json')
getConfig()
.map(JSON.parse)
.fold(e => 3000, c => c.port)
const getConfig = () => {
try {
return fs.readFileSync('cfg.json')
} catch(e) {
return null
}
}
const contrivedEx3 = () => {
const cfg = getConfig()
if(cfg) {
const parsed = JSON.parse(cfg)
return parsed.port
} else {
return 3000
}
}

const contrivedEx4 = user => {
const address = user.address
if(address) {
const zip = address.match(/(d{5})$/i)
if(zip) {
const city = cityByZip(zip)
if(city) {
return city
} else {
return "can't find city"
}
}
}
}

const contrivedEx4 = user =>
fromNullable(user.address)
.chain(a => fromNullable(a.match(/(d{5})$/i)))
.chain(zip => fromNullable(cityByZip(zip)))
.fold(() => "can't find city", city => city)

const contrivedEx4 = user => {
const address = user.address
if(address) {
const zip = address.match(/(d{5})$/i)
if(zip) {
const city = cityByZip(zip)
if(city) {
return city
} else {
}
}
}
}
const contrivedEx4 = user =>
fromNullable(user.address)
.chain(a => fromNullable(a.match(/(d{5})$/i)))
.chain(zip => fromNullable(cityByZip(zip)))
.fold(() => "can't find city", city => city)

const depObjs = b =>
List(b.deps).flatMap(next =>
findDependencyByProject(next.Project.name, b.previous.deps)
.fold(x => x,
found => makeArgs(next, found)))
const mapBuildsAndDepsForDiffQueue = (builds) =>
List(builds)
.filter(b => b.previous)
.flatMap(b => makeArgs(b, b.previous).concat(depObjs(b)))
.filter(b => b)
.toJS()
const filterExistingDiffs = (items) =>
List(items).traverse(Task.of, (i) =>
find(Diff, { BuildId: i.buildId, DiffId: i.prevId, type: i.method })
.map(e => e.swap().getOrElse(null))
.map(bs => bs.filter(x => x).toJS())

const buildProject = ({branch, sha}) =>
queueUnzipWwwOnS3(sha)
.chain(() => isReleaseOrMainBranch(branch))
.fold(() => _.noop,
() =>
generateReport(sha)
.chain(queueDiffsForTileBuildsAndDeps)
.chain(() =>
getHeadCommit(sha)
.fold(() => Task.of(null),
head =>
makeVrtDeployment(head, sha)
.chain(() => createPrApp(head, sha))))
.fork(console.error,
console.log))

const vrtReport = ({sha, email, platforms}) =>
rejectFinishedPlatformOptions(platforms)
.chain(plats => plats.map(gatherScreenshots))
.chain(shots =>
fromNullable(sha)
.fold(() => findLastRef(),
() => findBuild({sha}))
.chain(ref =>
renderReport(shots, ref, email)))
.fork(e => e, r => r)

const ProfileLink = user =>
<a href={`/users/${u.id}`}>{u.name}</a>
const Header = str =>
<h1>Now Viewing {str}</h1>

const Comp = g =>
({
fold: g,
contramap: f =>
Comp(x => g(f(x)))
})

const Comp = g =>
({
fold: g,
contramap: f =>
Comp(x => g(f(x)))
})
const Heading = str =>
const Title = Comp(Heading).contramap(s => s.pageName)

const Title = Comp(Heading).contramap(s => s.pageName)
Title.fold({ pageName: ‘Home',
currentUser: { id: 2, name: 'Chris Harrison’ } })
// <h1>Now Viewing Home</h1>
const Comp = g =>
({
fold: g,
contramap: f =>
Comp(x => g(f(x)))
})

const Comp = g =>
({
fold: g,
contramap: f =>
Comp(x => g(f(x))),
concat: other =>
Comp(x => <div>{g(x)} {other.fold(x)}</div>)
})

<a href={`/users/${u.id}`}>{u.name}</a>)
const Heading = Comp(Title).contramap(s => s.pageName)
const Link = Comp(ProfileLink).contramap(s => s.currentUser)
const App = Heading.concat(Link)

<a href={`/users/${u.id}`}>{u.name}</a>)
const Heading = Comp(Title).contramap(s => s.pageName)
const Link = Comp(ProfileLink).contramap(s => s.currentUser)
const App = Heading.concat(Link)
App.fold({ pageName: ‘Home',
currentUser: { name: 'Chris Harrison’ } })
// <div>
// <h1>Now Viewing Home</h1>
// <a href="/users/22">Chris Harrison</a>
// </div>

const Reducer = g =>
({
fold: g,
contramap: f =>
Reducer((acc, x) => g(acc, f(x))),
map: f =>
Reducer((acc, x) => f(g(acc, x)))
})

const r = Reducer((acc, x) => acc.concat(x))
.contramap(x => `The number is ${x}`)
.map(x => x + '! ')
[1,2,3].reduce(r.fold, '')
// The number is 1! The number is 2! The number is 3!
({
fold: g,
contramap: f =>
map: f =>
Reducer((acc, x) => f(g(acc, x)))
})

({
fold: g,
contramap: f =>
map: f =>
Reducer((acc, x) => f(g(acc, x))),
concat: o =>
Reducer((acc, x) => o.fold(g(acc, x), x))
})

const appReducer = Reducer((state, action) => {
switch (action.type) {
case 'set_visibility_filter':
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
})

const todoReducer = Reducer((state, action) => {
switch (action.type) {
case 'new_todo':
const t = { id: 0, title: action.payload.title }
return Object.assign({}, state, {
todos: state.todos.concat(t)
})
default:
return state
}
})

const todoApp =
appReducer
.concat(todoReducer)
.contramap(action => Object.assign({filter: 'all'}, action))
.map(s => Object.assign({}, s, {lastUpdated: Date()}))

const todoApp =
appReducer
todoApp.fold({visibilityFilter: ‘complete'},
{type: ‘set_visibility_filter'})
// { visibilityFilter: 'all',
// lastUpdated: 'Sun Aug 21 2016 11:04:48 GMT-0700 (PDT)' }

const Hoc = g =>
({
fold: g,
concat: other =>
Hoc(x => g(other.fold(x)))
})

const hoc = Hoc(withReducer(‘state', 'dispatch', todoApp.fold, {todos: []}))
const Todos = hoc.fold(({ state, dispatch }) =>
<div>
<span>Filter: {state.visibilityFilter}</span>
<ul>
{ state.todos.map(t => <li>{t.title}</li>) }
</ul>
<button onClick={() =>
dispatch({ type: 'new_todo', payload: {title: 'New todo'}})}>
Add Todo
</button>
<button onClick={() =>
dispatch({ type: 'set_visibility_filter' })}>
Set Visibility
</button>
</div>
)

const App = Heading.contramap(s => s.pageName)
.concat(TodoComp)
.concat(Link.contramap(s => s.currentUser))
.fold({ pageName: 'Home',
currentUser: {id: 2, name: 'Boris' } })
ReactDOM.render(App, document.getElementById('body'))
const TodoComp = Component(classToFn(Todos))
const Heading = Component(s => <h1>Now Viewing {s}</h1>)
const Link = Component(u => <a href={`/users/${u.id}`}>{u.name}</a>)

https://jsfiddle.net/cnsn8yk2/9/

map =
compose =
program construction

// Functor
Box.of(20).map(x => x / 2)
// Box(10)
// Monad
Box.of(true).chain(x => Box.of(!x))
// Box(false)
// Monoid
Box.of('small').concat(Box.of('pox'))
// Box('smallpox')
// Applicative
Box.of(x => x + 1).ap(2)
// Box(3)
// Traversable
Box.of(3).traverse(Either.of, x => fromNullable(x))
// Right(Box(3))
// Natural transformation
eitherToBox(fromNullable(null))
// Box(null)

Professor Frisby’s Composable JavaScript

Oh Composable World!

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (6)

Similar to Oh Composable World!

Similar to Oh Composable World! (20)

Recently uploaded

Recently uploaded (20)

Oh Composable World!