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

Functional Reactive Programming

Functional Reactive Programming

Slides for a talk by Wilkes Joiner at Nashville Code Co-op Talk Day.

Jason Orendorff

March 30, 2013
Tweet

More Decks by Jason Orendorff

Other Decks in Programming

Transcript

  1. Functional
    Reactive
    Programming

    View full-size slide

  2. “Everything flows,
    nothing stands still.”
    Heraclitus

    View full-size slide

  3. Streams of Events

    View full-size slide

  4. Streams of Events
    • Fire and forget events are relatively easy to
    create.

    View full-size slide

  5. Streams of Events
    • Fire and forget events are relatively easy to
    create.
    • UIs

    View full-size slide

  6. Streams of Events
    • Fire and forget events are relatively easy to
    create.
    • UIs
    • Ajax posts

    View full-size slide

  7. Streams of Events
    • Fire and forget events are relatively easy to
    create.
    • UIs
    • Ajax posts
    • Messaging queues

    View full-size slide

  8. Processing Events

    View full-size slide

  9. Processing Events
    • A little trickier

    View full-size slide

  10. Processing Events
    • A little trickier
    • difficult to compose

    View full-size slide

  11. Processing Events
    • A little trickier
    • difficult to compose
    • lots of plumbing

    View full-size slide

  12. Processing Events
    • A little trickier
    • difficult to compose
    • lots of plumbing
    • Callback Hell

    View full-size slide

  13. “We’re going to need a
    bigger boat.”

    View full-size slide

  14. FRP
    • A model for values that vary over time
    • Originates from Haskell Community
    • Several different implementation styles
    • We are focusing on Microsoft’s
    ReactiveExtenions style

    View full-size slide

  15. Observable
    • A marriage of Iterables and the Observer Pattern

    View full-size slide

  16. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take

    View full-size slide

  17. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take
    • Subscribe/OnNext

    View full-size slide

  18. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take
    • Subscribe/OnNext
    • Error Handling

    View full-size slide

  19. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take
    • Subscribe/OnNext
    • Error Handling
    • Timing function - Delay

    View full-size slide

  20. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take
    • Subscribe/OnNext
    • Error Handling
    • Timing function - Delay
    • Buffering - Last N events

    View full-size slide

  21. Observable
    • A marriage of Iterables and the Observer Pattern
    • Typical Sequence functions - Map, Filter, Reduce,
    Take
    • Subscribe/OnNext
    • Error Handling
    • Timing function - Delay
    • Buffering - Last N events
    • Composable - SelectMany/FlatMap

    View full-size slide

  22. Marble Diagrams

    View full-size slide

  23. A
    Marble Diagrams

    View full-size slide

  24. A
    Marble Diagrams

    View full-size slide

  25. A
    B
    Marble Diagrams

    View full-size slide

  26. A
    B
    Marble Diagrams

    View full-size slide

  27. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  28. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  29. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  30. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  31. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  32. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  33. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  34. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  35. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  36. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  37. A
    B
    A.merge(B
    Marble Diagrams

    View full-size slide

  38. Autocomplete
    • On Keyup
    • Get the value of the field
    • Only values of length 3 or more
    • Make remote call
    • Filter out bad response
    • Display results

    View full-size slide

  39. Autocomplete in reality
    • On Keyup
    • Get the value of the field
    • Throttle to 500ms
    • Only values of length 3 or more
    • Skip duplicates
    • Make remote call
    • Filter out bad response
    • Display results

    View full-size slide

  40. Demo
    Source code: https://github.com/Cicayda/yolk-examples

    View full-size slide