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

JavaScript Functional Programming

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. 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
  2. Pure functions init : InitalValue -> (Model, SideEffect) update :

    Action -> Model -> (Model, SideEffect) view : EventsChannel -> Model -> Html
  3. Side effects as data function init( topic = “funny cats”

    ) { const model = { topic, url: “assets/waiting.gif” } const effect = getRandomGifWithTopic( topic ) return [ model, effect ] }
  4. Composable function parentInit( ) { return childInit() } function parentUpdate(

    ) { return childUpdate() } function parentView( ) { return childView() }
  5. 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.
  6. x = y var addA = Adder() var addB =

    Adder() is addA = addB ? addA(1) -> 1 addA(2) -> 2 addB(3) -> 3
  7. x = y var addA = Adder() var addB =

    Adder() is addA = addB ? addA(1) -> 1 addA(2) -> 2 addB(3) -> 3 addA(3) -> 3
  8. x = y function Adder( sum = 0 ) {

    return function( quantity ) { return sum + quantity } }
  9. 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.
  10. x ≠ y function Adder( sum = 0 ) {

    return function( quantity ) { sum = sum + quantity return sum } } KABOOM!
  11. x ≠ y var addA = Adder() var addB =

    Adder() is addA = addB ? addA(2) -> 2 addA(2) -> 4 addB(2) -> 2 ACCUMULATED EFFECT IDENTITY STATE
  12. 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
  13. 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.
  14. 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
  15. x ≠ y var addA = Adder() var addB =

    Adder() is addA = addB ? addA(2) -> 2 addA(2) -> 4 addB(2) -> 2 ACCUMULATED EFFECT IDENTITY STATE
  16. But we can still emulate state with mathematical functions for

    the most part and kind of hide the imperative chunks
  17. 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).
  18. Modeling state with signals Signals (or Observables) are just streams

    where the producer (not the consumer) is the one in charge. link to gist
  19. 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.
  20. Olmo we use signals (through RxJS library) other people are

    doing the same (although not necessarily with RxJS) elm cycle angular2 ?