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 Slide

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

    View Slide

  3. Streams of Events

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Processing Events

    View Slide

  9. Processing Events
    • A little trickier

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  15. Observable

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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

    View 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

    View Slide

  22. 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 Slide

  23. Marble Diagrams

    View Slide

  24. A
    Marble Diagrams

    View Slide

  25. A
    Marble Diagrams

    View Slide

  26. A
    B
    Marble Diagrams

    View Slide

  27. A
    B
    Marble Diagrams

    View Slide

  28. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  29. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  30. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  31. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  32. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  33. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  34. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  35. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  36. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  37. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  38. A
    B
    A.merge(B
    Marble Diagrams

    View Slide

  39. 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 Slide

  40. 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 Slide

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

    View Slide