JavaScript Functional Programming

A perspective from assignment and time. Heavily inspired by SICP lectures.

Transcript

1. pure functional programming in JS
2. hello! inbox@anler.me frontend engineer @AudienseCo website handle email
3. Olmo Or how I stealed Elm’s Architecture
5. Why did I do that? • I wanted an unidirectional architecture for ui • On top of that I wanted treat side-effects as data • I wanted to use as much pure functions as possible • I wanted composable components • I wanted it to be simple
6. Pure functions init : InitalValue -> (Model, SideEffect) update : Action -> Model -> (Model, SideEffect) view : EventsChannel -> Model -> Html
7. Side effects as data function init( topic = “funny cats” ) { const model = { topic, url: “assets/waiting.gif” } const effect = getRandomGifWithTopic( topic ) return [ model, effect ] }
8. Composable function parentInit( ) { return childInit() } function parentUpdate( ) { return childUpdate() } function parentView( ) { return childView() }
9. Simple init update view actions signal
10. Back to the basics
11. Functional Programming What is it?
12. 2 Big Concepts Let’s define them first
13. 1. Equality Let’s say two things are equal or equivalent if they are constructed the same way, so they can be used interchangeably in our program.
14. x = y var addA = Adder() var addB = Adder() is addA = addB ? addA(1) -> 1 addA(2) -> 2 addB(3) -> 3
15. x = y var addA = Adder() var addB = Adder() is addA = addB ? addA(1) -> 1 addA(2) -> 2 addB(3) -> 3 addA(3) -> 3
16. x = y function Adder( sum = 0 ) { return function( quantity ) { return sum + quantity } }
17. 2. Referential Transparency We can generalize equality and say that every expression that can be replaced by another expression that denotes the same value is referentially transparent. With referential transparency there’s no distinction between the name of a thing and the value it denotes, so we benefit of optimizations like: memoization, parallelization, common subexpression elimination, etc.
18. Now let’s send those nice props back to the trash can
19. x ≠ y function Adder( sum = 0 ) { return function( quantity ) { sum = sum + quantity return sum } } KABOOM!
20. x ≠ y var addA = Adder() var addB = Adder() is addA = addB ? addA(2) -> 2 addA(2) -> 4 addB(2) -> 2 ACCUMULATED EFFECT IDENTITY STATE
21. What just happened? • By introducing assignment our objects got identity introducing a new dimension of bugs: side-effect bugs • By introducing assignment is just philosophically harder to define equality • By introducing assignment we brought our time perspective into our programs • By introducing assignment we just make our lives more difficult
22. Functional Programming Is a technique for program construction that forbids the use of assignment.
23. Imperative Programming Is a technique for program construction that uses assignment.
24. Functional Programming is more simple than imperative programming, but imperative programming is easier than functional programming.
25. “ Simple is an objective notion... -- Rich Hickey
26. Simple Less interleaving of things/concepts. Easy Nearer to your current skills.
27. Simplicity is HARD
28. Even worse in JavaScript because it requires discipline which is also hard, however some functional languages use invariants (the type system) which is way less hard.
29. Why do we need assignment? • It gives us encapsulation and better modularity • We can move in all three dimensions of space, yet we are prisoners of the present, that is, we need assignment to work with time because mathematical functions are timeless, static • We could think that our temporal existence is what imposes state on any system
30. x ≠ y var addA = Adder() var addB = Adder() is addA = addB ? addA(2) -> 2 addA(2) -> 4 addB(2) -> 2 ACCUMULATED EFFECT IDENTITY STATE
31. But we can still emulate state with mathematical functions for the most part and kind of hide the imperative chunks
32. Modeling state with streams state = stream( time ) state = head(stream) link to gist
33. Function Cola ahead
53. Things to highlight defer/demand Thanks to those we can model infinite streams that are computed as needed, the downside is that we lose a bit of modularity and some functions depending on what they do might have a version that accepts deferred arguments normal order evaluation One way to avoid that problem would be to automatically deferring all function arguments giving us a language with normal order evaluation, yet it would complicate the cases where our program depends on the order of events Scalability The same interface can be used to solve different problems (sync vs async).
54. Modeling state with signals Signals (or Observables) are just streams where the producer (not the consumer) is the one in charge. link to gist
55. Function Cola ahead
63. we can’t escape time
65. Benefits of signals Time Higher-order view makes time a static quantity which let us benefit from mathematical properties. Modularity It restores back the same encapsulation we had when using assignment but without using it and with better semantics. Combinatorial interface The interface we obtain is highly expressive and very powerful constructs can be made out of simple combinators, it also can be used to solve different domain problems (sync vs async) maintaining almost the same interface.
66. Olmo we use signals (through RxJS library) other people are doing the same (although not necessarily with RxJS) elm cycle angular2 ?
67. thanks! Any questions?