Functional Reactive Programming

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

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