Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Functional Programming

1b2f9c4aa25da5f953aab945c20803e0?s=47 Anler
April 30, 2016

JavaScript Functional Programming

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



April 30, 2016

More Decks by Anler

Other Decks in Programming


  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

  4. None
  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

  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

  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

  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

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  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

  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. we can’t escape time

  64. None
  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?