1.
You will see
• Lots of functional JavaScript code
• Benefits and drawbacks
• Functional Optimizations
• Lots of unexplained type signatures

2.
You won’t see
• Detailed explanations of the code
• Definitions for functional constructs
• Extensive performance analysis

3.
59 // src :: FlickrItem -> URL
60 var src = compose(_.get('m'), _.get('media'));
61
62 // srcs :: FlickrSearch -> [URL]
63 var srcs = compose(map(src), _.get('items'));
64
65 // images :: FlickrSearch -> [DOM]
66 var images = compose(map(imageTag), srcs);
67
68 // tags :: FlickrSearch -> [DOM]
69 var tags = compose(toP, _.countBy(_.id), _.filter(_.isEmpty), chain(split(‘ ‘)));
70
71 // imagesAndTags :: Tuple [DOM] [DOM]
72 var imagesAndTags = liftA2(Tuple, images, tags);
73
74 // widget :: String -> PictureBox
75 var widget = compose(PictureBox, map(imagesAndTags), getJSON, url);
76
77 ///////////////////////////////////////////////////////////////////////////////////
78
79 mconcat([widget('cats'), widget('dogs')]).fork(log, function(x){
80 compose(setHtml($('#flickr')), _.first)(x)
81 compose(setHtml($(‘#tag_cloud')), _.last)(x)
82 });
83 });

4.
style provides benefits. You should do it whenever it is convenient, and

5.
Questions
• Why might one do this?
• What problems are there?
• Is it performant?
• Is it “production ready?”

6.
Pointfree

7.
We can curry
var replace = curry(function(regex, x, replaceable) {
return replaceable.replace(regex, x);
});
var squish = replace(/s+/g, '');
squish("I like to move it move it"); // Iliketomoveitmoveit

8.
We can compose
var wackyText = compose(capitalize, reverse, squish)
wackyText(“turtle power") // Rewopeltrut

9.
Pointfree
var clientApp = compose(render, doThings, httpGet(‘/posts'))
var serverApp = compose(sendJSON, doThings, Db.all(‘posts’))
var shellApp = compose(display, doThings, prompt("what's up?"))

10.
Pointfree
httpGet('/post/2', function(json){
renderPost(json);
});

11.
Pointfree
httpGet('/post/2', function(json, err){
renderPost(json, err);
});

12.
Pointfree
httpGet(‘/post/2’, renderPost)

13.
Pointfree
httpGet(‘/post/2’, renderPost)
GOOD

14.
Pointfree
var goodArticles = function(articles) {
return _.filter(articles, function(article){
return _.isDefined(article);
})
}

15.
Pointfree
var goodArticles = function(articles) {
return _.filter(articles, function(article){
return _.isDefined(article);
})
}
var goodArticles = filter(isDefined)

16.
Pointfree
var goodArticles = function(articles) {
return _.filter(articles, function(article){
return _.isDefined(article);
})
}
var goodArticles = filter(isDefined)

17.
Pointfree
var goodArticles = function(articles) {
return _.filter(articles, function(article){
return _.isDefined(article);
})
}
var goodArticles = filter(isDefined)
GOOD

18.
Pointfree
var getChildren = function(el) {
return el.childNodes;
}
var getAllChildren = function(els) {
return _.map(els, function(el) {
return getChildren(el);
});
}

19.
Pointfree
var getChildren = function(el) {
return el.childNodes;
}
var getAllChildren = function(els) {
return _.map(els, function(el) {
return getChildren(el);
});
}
var getChildren = get('childNodes')
var getAllChildren = map(getChildren)

20.
Pointfree
var getChildren = function(el) {
return el.childNodes;
}
var getAllChildren = function(els) {
return _.map(els, function(el) {
return getChildren(el);
});
}
var getChildren = get('childNodes')
var getAllChildren = map(getChildren)

21.
Pointfree
var getChildren = function(el) {
return el.childNodes;
}
var getAllChildren = function(els) {
return _.map(els, function(el) {
return getChildren(el);
});
}
var getChildren = get('childNodes')
var getAllChildren = map(getChildren)
GOOD

22.
Pointfree
var grandChildren = function(selector) {
var el = document.querySelector(selector);
var children = getChildren(el);
return map(getChildren, children);
}
var grandChildren = compose( map(getChildren)
, getChildren
, document.querySelector
)

23.
Pointfree
var grandChildren = function(selector) {
var el = document.querySelector(selector);
var children = getChildren(el);
return map(getChildren, children);
}
var grandChildren = compose( map(getChildren)
, getChildren
, document.querySelector
)
GOOD

24.
Pointfree
var video = { src: 'http://youtube.com?v=23423'
, description: 'family matters ep1'
, screenshots: [ { url: 'i.ytimg.com/OrIxGlo.webp', size: ‘120x120' }
, { url: 'i.ytimg.com/3rAxRdb.webp', size: ‘1020x764' }
]
}
var thumb = compose(_.first, _.get(‘screenshots'))
var thumbUrl = compose(_.get('url'), thumb)
var thumbWithHost = compose(concat('http://youtube.com'), thumbUrl)
thumbWithHost(video)
// http://youtube.com/i.ytimg.com/OrIxaBJ9Glo.webp

25.
Pointfree
var video = { src: 'http://youtube.com?v=23423'
, description: 'family matters ep1'
, screenshots: [ { url: 'i.ytimg.com/OrIxGlo.webp', size: ‘120x120' }
, { url: 'i.ytimg.com/3rAxRdb.webp', size: ‘1020x764' }
]
}
var thumbUrl = compose(_.get('url'), thumb)
var thumb = compose(_.first, _.get(‘screenshots'))
var thumbWithHost = compose(concat('http://youtube.com'), thumbUrl)
thumbWithHost(video)
// TypeError

26.
Pointfree
var video = { src: 'http://youtube.com?v=23423'
, description: 'family matters ep1'
, screenshots: [ { url: 'i.ytimg.com/OrIxGlo.webp', size: ‘120x120' }
, { url: 'i.ytimg.com/3rAxRdb.webp', size: ‘1020x764' }
]
}
var thumbUrl = compose(_.get('url'), thumb)
var thumb = compose(_.first, _.get(‘screenshots'))
var thumbWithHost = compose(concat('http://youtube.com'), thumbUrl)
thumbWithHost(video)
// TypeError
Meh

27.
First Class?
["10", "50", "20"].map(function(x){ return parseInt(x); });
// [10, 50, 20]
["10", "50", "20"].map(parseInt);
// [10, NaN, NaN]

28.
First Class?
["10", "50", "20"].map(function(x){ return parseInt(x); });
// [10, 50, 20]
["10", "50", "20"].map(parseInt);
// [10, NaN, NaN]
// "The Madness of King JavaScript" by Reg Braithwaite (raganwald)
BAD

29.
First Class?
var phone = {
dial: function(x){ console.log("DIALING: ", this.format(x)); },
format: function(n) { return n.replace(/-/g, '') }
};
var numbers = ["234-3535-2342", “1-653-124-8321"];
numbers.map(function(x){ return phone.dial(x); });
// DIALING: 23435352342
// DIALING: 16531248321

30.
First Class?
var phone = {
dial: function(x){ console.log("DIALING: ", this.format(x)); },
format: function(n) { return n.replace(/-/g, '') }
};
var numbers = ["234-3535-2342", “1-653-124-8321"];
numbers.map(function(x){ return phone.dial(x); });
// DIALING: 23435352342
// DIALING: 16531248321
numbers.map(phone.dial);

31.
First Class?
var phone = {
dial: function(x){ console.log("DIALING: ", this.format(x)); },
format: function(n) { return n.replace(/-/g, '') }
};
var numbers = ["234-3535-2342", “1-653-124-8321"];
numbers.map(function(x){ return phone.dial(x); });
// DIALING: 23435352342
// DIALING: 16531248321
numbers.map(phone.dial);
// TypeError: Object #<Object> has no method 'format'

32.
First Class?
var phone = {
dial: function(x){ console.log("DIALING: ", this.format(x)); },
format: function(n) { return n.replace(/-/g, '') }
};
var numbers = ["234-3535-2342", “1-653-124-8321"];
numbers.map(function(x){ return phone.dial(x); });
// DIALING: 23435352342
// DIALING: 16531248321
numbers.map(phone.dial.bind(phone));
// DIALING: 23435352342
// DIALING: 16531248321

33.
First Class?
var phone = {
dial: function(x){ console.log("DIALING: ", this.format(x)); },
format: function(n) { return n.replace(/-/g, '') }
};
var numbers = ["234-3535-2342", “1-653-124-8321"];
numbers.map(function(x){ return phone.dial(x); });
// DIALING: 23435352342
// DIALING: 16531248321
numbers.map(phone.dial.bind(phone));
// DIALING: 23435352342
// DIALING: 16531248321
BAD

34.
//+ render :: [Tag] -> DOM
var render = compose($(‘#tag-cloud').html, tagView, addFontSizes)
//+ tagCloud :: Params -> Future(DOM)
var tagCloud = compose(map(render), httpGet('/tags'))

35.
//+ setHtml :: String -> Html -> IO(DOM)
var setHtml = curry(function(selector, h) {
return IO(function() { return $(selector).html(h); });
});
//+ render :: [Tag] -> IO(DOM)
var render = compose(setHtml(‘#tag-cloud'), tagView, addFontSizes)
//+ tagCloud :: Params -> Future(IO(DOM))
var tagCloud = compose(map(render), httpGet('/tags'))

36.
Pointfree
• Removes unnecessary code
• High level declarative apps
• Encourages generic code
• Encourages purity

37.
Pointfree
• Order of definition matters
• Weird interop with imperative community (impure,
swiss army fn’s, & ‘this’)

38.
Demos

39.
Typeclass

40.
Typeclass
promise.then(function(x){ return x + 1 }); // Promise(2)
[1].map(function(x) { return x + 1 }); // [2]
event_stream.subscribe(function(x) { return x + 1 }) // EventStream(2)

41.
Typeclass
var Container = function(val) {
this.val = val;
}
Container.prototype.of = function(x) {
return new Container(x);
}
Container.prototype.chain = function(f) {
return f(this.val);
};

42.
Typeclass
We can map over them
(a -> b) -> M(a) -> M(b)

43.
Typeclass
We can map over them
(a -> b) -> M(a) -> M(b)
promise.map(function(x){ return x + 1 }); // Promise(2)
[1].map(function(x) { return x + 1 }); // [2]
event_stream.map(function(x) { return x + 1 }) // EventStream(2)
Just(1).map(function(x) { return x + 1 }) // Just(2)
Nothing.map(function(x) { return x + 1 }) // Nothing
IO(1).map(function(x) { return x + 1 }) // IO(2)

44.
Typeclass
We can flatten/un-nest them
M(M(a)) -> M(a)

45.
Typeclass
We can flatten/un-nest them
M(M(a)) -> M(a)
[['hello']] -> ['hello']
Just(Just(true)) -> Just(true)

46.
Typeclass
We can apply functions within them
M(a -> b) -> M(a) -> M(b)

47.
Typeclass
We can apply functions within them
M(a -> b) -> M(a) -> M(b)
var finished = curry(function(click, anim) { alert(“Finished!"); });
EventStream.of(finished).ap(button_clicks).ap(animation_done);

48.
Typeclass
We can combine them
M(a) -> M(a) -> M(a)

49.
Typeclass
We can combine them
M(a) -> M(a) -> M(a)
Api.get(‘/unstarred’).concat(Api.get('/starred'))
// Future([Item])

50.
Typeclass
We can compose them
M(N(a)) -> MN(a)

51.
Typeclass
We can compose them
M(N(a)) -> MN(a)
//+ askQuestion :: IO(Maybe(String))
compose(map(map(storeResponse)), askQuestion)
//+ askQuestion :: Compose(IO(Maybe(String)))
compose(map(storeResponse), Compose, askQuestion)

52.
Typeclass
We can commute them
M(N(a)) -> N(M(a))

53.
Typeclass
We can commute them
M(N(a)) -> N(M(a))
compose(sequenceA, map(readFile))
// Future([String])

54.
Typeclass
We can derive lots of this!
derive(MyType, [Functor, Applicative, Foldable])
*https://github.com/fantasyland/fantasy-land/pull/66

55.
Typeclass
//+ validate :: UserAttrs -> Either([Error], UserAttrs)
//+ saveUser :: UserAttrs -> Future(User)
//+ emailPassword :: User -> Future(Email)
//+ saveThenEmail :: UserAttrs -> Future(Email)
var saveThenEmail = compose(chain(emailPassword), saveUser)
//+ createUser :: UserAttrs -> Either([Error], Future(Email))
var createUser = compose(map(saveThenEmail), validate)

56.
Typeclass
//+ validate :: UserAttrs -> Either([Error], UserAttrs)
//+ saveUser :: UserAttrs -> Future(User)
//+ emailPassword :: User -> Future(Email)
//+ saveThenEmail :: UserAttrs -> Future(Email)
var saveThenEmail = compose(chain(emailPassword), saveUser)
//+ createUser :: UserAttrs -> Either([Error], Future(Email))
var createUser = compose(map(saveThenEmail), validate)
GOOD

57.
GOOD

58.
Typeclass
//+ lookup :: String -> {String: a} -> a|null
var lookup = curry(function(x, obj) {
return obj[x];
})
var upperName = compose(toUpperCase, lookup(‘name'))
upperName({name: “Tori Amos"}) // “TORI AMOS”
upperName({first_name: "Tori", last_name: “Spelling"}) // BOOM!

59.
Typeclass
//+ safeLookup :: String -> {String: a} -> Maybe(a)
var safeLookup = curry(function(x, obj) {
return Maybe.fromNullable(obj[x]);
});
var upperName = compose(map(toUpperCase), safeLookup(‘name'))
upperName({name: “Tori Amos”})
// Just(“TORI AMOS”)
upperName({first_name: "Tori", last_name: “Spelling”})
// Nothing

60.
Typeclass
//+ safeLookup :: String -> {String: a} -> Maybe(a)
var safeLookup = curry(function(x, obj) {
return Maybe.fromNullable(obj[x]);
});
var upperName = compose(map(toUpperCase), safeLookup(‘name'))
upperName({name: “Tori Amos”})
// Just(“TORI AMOS”)
upperName({first_name: "Tori", last_name: “Spelling”})
// Nothing
GOOD

61.
GOOD

62.
Typeclass
//+ readFile :: Future(Maybe(String))
//+ lipogram :: String -> Future(Maybe(String))
var lipogram = compose(map(map(replace(/e/ig))), readFile);

63.
Typeclass
//+ readFile :: String -> Compose(Future(Maybe(String)))
var readFile = compose(Compose, _readFile)
//+ lipogram :: String -> Compose(Future(Maybe(String)))
var lipogram = compose(map(replace(/e/ig)), readFile);

64.
Typeclass
var WebApp = ReaderT(StateT(Future))

65.
Typeclass
Meh
var WebApp = ReaderT(StateT(Future))

66.
Typeclass
do
a <- Just 3
b <- Just 1
return a + b
Just(3).chain(function(a) {
return Just(1).chain(function(b) {
return Maybe.of(a + b);
});
};
Haskell
JavaScript

67.
Typeclass
do
a <- Just 3
b <- Just 1
return a + b
Haskell
JavaScript liftM2(add, Just(3), Just(1))

68.
Typeclass
do
post_id <- param "id"
post <- lift $ findPost post_id
return (toJSON post)
Haskell
(lift . (fmap toJSON) . findPost) =<< param "id"
JavaScript
chain(compose(lift, map(toJSON), findPost), param(‘id'))

69.
Typeclass
do
post_id <- param "id"
post <- lift $ findPost post_id
return (toJSON post)
Haskell
(lift . (fmap toJSON) . findPost) =<< param "id"
JavaScript
chain(compose(lift, map(toJSON), findPost), param(‘id'))
Meh

70.
Typeclass
do
post_id <- param "id"
post <- lift $ findPost post_id
return (toJSON post)
Haskell
(lift . (fmap toJSON) . findPost) =<< param "id"
JavaScript
chain(compose(lift, map(toJSON) findPost), param(‘id'))

71.
Typeclass
do
post_id <- param "id"
post <- lift $ findPost post_id
return (toJSON post)
Haskell
(lift . (fmap toJSON) . findPost) =<< param "id"
JavaScript
chain(compose(WebApp.lift, map(toJSON) findPost), param(‘id'))

72.
Typeclass
//+ savePhotos :: [Path] -> Future([Photo])
var savePhotos = compose(traverse(uploadPhoto), map(toBlob))
//+ gift :: Future(User) -> Maybe(Future(Card))
var gift = compose(traverse(sendCard, Maybe.of), map(_.get("birthday"))

73.
Typeclass
//+ savePhotos :: [Path] -> Future([Photo])
var savePhotos = compose(traverse(uploadPhoto), map(toBlob))
//+ gift :: Future(User) -> Maybe(Future(Card))
var gift = compose(traverse(sendCard, Maybe.of), map(_.get("birthday"))
BAD

74.
Typeclass
• Universal interface (across languages)
• Generic programs/libraries
• Safer programs
• Theory backed
• Intuition

75.
Typeclass
• Missing polymorphic “point”
• Working ‘blind’ with stacked containers
• No syntactic sugar

76.
Demos

77.
Shortcut Fusion
// g :: forall b. (t -> b -> b) -> b -> b
reduce(c, n, build(g)) = g(c, n)

78.
Shortcut Fusion
//build :: (forall b. (a -> b -> b) -> b -> b) -> [a]
var build = function(g){
return g(concat, []);
}
//+ map :: (a -> b) -> [a] -> [b]
var map = curry(function(f, xs){
return build(function(c, n){
return reduce(function(acc, x){ return c(f(x), acc); }, n, xs);
});
});

79.
Shortcut Fusion
var sum = reduce(add, 0);
var sqr = function(x) {return x * x }
var sumSqs = compose(sum, map(sqr))
// reduce(function(acc, x){ return add(sqr(x), acc) }, 0);

80.
Compile while you
compose
//+ doorman :: [User] -> User
var doorman = compose(first, filter(gte(21)), map(_.get('age')));

81.
var addTwenty = memoize(function(x) {
return x + 20;
})
Memoization

82.
Memoization
var addTwenty = memoize(function(x) {
return x + 20;
})
addTwenty(10) // 30
addTwenty(10) // 30 (didn't run)
addTwenty(11) // 31

83.
Memoization
var getPosts = memoize(function(id) {
return new Future(function(rej, res) {
$.getJSON('/posts/'+id, res);
});
});

84.
Memoization
var getPosts = memoize(function(id) {
return new Future(function(rej, res) {
$.getJSON('/posts/'+id, res);
});
});
getPosts(2) // Future
getPosts(2) // Future (didn't run)
getPosts(3) // Future

85.
Memoization
var pQuery = $.toIO()
pQuery(".troll") // IO(function(){ return $(".troll") })
pQuery.runIO() // [Dom, Dom]
pQuery.runIO() // [Dom, Dom, Dom]

86.
Parallel code
foldMap(Sum, [2, 3, 5])

87.
Parallel code
liftA3(fn, A1, A2, A3)

88.
Parallel code
var longCalc // Int -> Future(Int)
var collectResults = curry(function(rslt1, rslt2, rslt3){})
liftA3(collectResults, longCalc(20), longCalc(30), longCalc(10))

89.
Parallel code
var hasName // Attrs -> Validation
liftA3(save, hasName, hasEmail, hasPhone)

90.
THANKS!
@drboolean