Functional Reactive Programming

1. FRP
Functional Reactive Programming
Hyunje Jun @ LINE UIT
@noraesae

2. Self introduction
@noraesae

3. Self introduction
• 전현제, Hyunje Jun, 全賢濟, ジョン ヒョンジェ
@noraesae

4. Self introduction
• 전현제, Hyunje Jun, 全賢濟, ジョン ヒョンジェ
• @noraesae on Twitter and GitHub
@noraesae

5. Self introduction
• 전현제, Hyunje Jun, 全賢濟, ジョン ヒョンジェ
• @noraesae on Twitter and GitHub
• Frontend
@noraesae

6. Self introduction
• 전현제, Hyunje Jun, 全賢濟, ジョン ヒョンジェ
• @noraesae on Twitter and GitHub
• Frontend
• Programming language
@noraesae

7. Self introduction
• 전현제, Hyunje Jun, 全賢濟, ジョン ヒョンジェ
• @noraesae on Twitter and GitHub
• Frontend
• Programming language
• FP, mainly Haskell
@noraesae

8. Agenda
@noraesae

9. Agenda
• What FRP is
@noraesae

10. Agenda
• What FRP is
• History of FRP
@noraesae

11. Agenda
• What FRP is
• History of FRP
• Why FRP matters
@noraesae

12. What is FRP?
@noraesae

13. What is NOT FRP?
@noraesae

14. What FRP isn’t
• Reactive Programming is not FRP
• ReactiveX(RxJS, RxSwift, etc), ReactiveCocoa
ReactiveX may be functional, and it may be reactive, but
“functional reactive programming” is a different animal.
On ReactiveX - Intro
@noraesae

15. What FRP isn’t
• Neither of this kind of graphs
Staltz, A. (2014). “The introduction to Reactive Programming you’ve been missing.”
• Stream, Observable, etc...
@noraesae

16. Again, what is FRP?
@noraesae

17. Declarativity
@noraesae

18. FRP is about being, not doing!
Elliott, C. (2015). “The Essence and Origins of Functional Reactive Programming.”
In Lambda Jam ’15.
@noraesae

19. FRP: declarativity
• How things are being at a moment
@noraesae

20. FRP: declarativity
• How things are being at a moment
• Elegantly
@noraesae

21. FRP: declarativity
• How things are being at a moment
• Elegantly
• Lazily
@noraesae

22. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
@noraesae

23. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Behaviour a
@noraesae

24. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Behaviour a
• Time-varying data
@noraesae

25. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Behaviour a
• Time-varying data
@noraesae

26. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Behaviour a
• Time-varying data
• red :: Behaviour Color
@noraesae

27. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Behaviour a
• Time-varying data
• red :: Behaviour Color
• view :: Behaviour Html
@noraesae

28. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Event a
@noraesae

29. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Event a
• Time-specific data
@noraesae

30. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Event a
• Time-specific data
@noraesae

31. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Event a
• Time-specific data
• everySecond :: Event Int
@noraesae

32. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Event a
• Time-specific data
• everySecond :: Event Int
• click :: Event Mouse
@noraesae

33. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Utility functions
• until :: Behaviour a ->
Event (Behaviour a) ->
Behaviour a
• andThen :: Event x ->
Behaviour a ->
Event (Behaviour a)
@noraesae

34. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
• Utility functions
• until :: Behaviour a ->
Event (Behaviour a) ->
Behaviour a
• andThen :: Event x ->
Behaviour a ->
Event (Behaviour a)
@noraesae

35. “Functional Reactive Animation.”
Elliott, C, Hudak, P. (1997). In ICFP ’97.
colorCycle =
red ‘until‘ click ‘andThen‘
blue ‘until‘ click ‘andThen‘
green ‘until‘ click ‘andThen‘
red
@noraesae

36. Looks good!
@noraesae

37. Looks good!
• It’s an intuitive and elegant way to describe GUI
@noraesae

38. Looks good!
• It’s an intuitive and elegant way to describe GUI
• It’s also a continuous and lazy way
• red ‘until‘ click
@noraesae

39. Surprisingly, I have a demo!
https://github.com/noraesae/purescript-behaviors
@noraesae

40. Further studies on FRP
• Real-time FRP
• Arrowized FRP
• Event-driven FRP
@noraesae

41. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
@noraesae

42. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• They found interesting fact
@noraesae

43. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• They found interesting fact
@noraesae

44. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• They found interesting fact
• Event a = Behaviour (Maybe a)
@noraesae

45. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• They found interesting fact
• Event a = Behaviour (Maybe a)
• Now Behaviour and Event are the same!
@noraesae

46. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• They found interesting fact
• Event a = Behaviour (Maybe a)
• Now Behaviour and Event are the same!
• Rename Behaviour to Signal
@noraesae

47. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• Simplify the semantic
@noraesae

48. Real-time FRP
Wan, Z, Taha, W, Hudak, P. (2001). “Real-time frp.” In ICFP ’01.
• Simplify the semantic
• Focus on manageability
@noraesae

49. Arrowized FRP
Nilson, H, Courtney, A, Peterson, J. (2002).
“Functional reactive programming, continued.” In Haskell ’02.
@noraesae

50. Arrowized FRP
Nilson, H, Courtney, A, Peterson, J. (2002).
“Functional reactive programming, continued.” In Haskell ’02.
• Define Signal Function: SF a b
• a function accepting a signal, and returning a signal
• SF a b = Signal a -> Signal b
@noraesae

51. Arrowized FRP
Nilson, H, Courtney, A, Peterson, J. (2002).
“Functional reactive programming, continued.” In Haskell ’02.
• Expose signal functions, but not the signal itself
• render :: SF State View
@noraesae

52. Arrowized FRP
Nilson, H, Courtney, A, Peterson, J. (2002).
“Functional reactive programming, continued.” In Haskell ’02.
• Expose signal functions, but not the signal itself
• render :: SF State View
• Hide internals of Signal
@noraesae

53. Arrowized FRP
Nilson, H, Courtney, A, Peterson, J. (2002).
“Functional reactive programming, continued.” In Haskell ’02.
• Expose signal functions, but not the signal itself
• render :: SF State View
• Hide internals of Signal
• Focus on data manipulation itself
@noraesae

54. Event-driven FRP
Wan, Z, Taha, W, Hudak, P. (2002). “Event-driven frp.‘’ In PADL ’02.
@noraesae

55. Event-driven FRP
Wan, Z, Taha, W, Hudak, P. (2002). “Event-driven frp.‘’ In PADL ’02.
• Assume Signal is discrete
@noraesae

56. Event-driven FRP
Wan, Z, Taha, W, Hudak, P. (2002). “Event-driven frp.‘’ In PADL ’02.
• Assume Signal is discrete
• Signal changes only when an event occurs
@noraesae

57. Event-driven FRP
Wan, Z, Taha, W, Hudak, P. (2002). “Event-driven frp.‘’ In PADL ’02.
• Assume Signal is discrete
• Signal changes only when an event occurs
• Prevent unnecessary behaviour updates
@noraesae

58. Case Study: Elm
@noraesae

59. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
• “A delightful language for reliable webapps”
@noraesae

60. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
• “A delightful language for reliable webapps”
• Elm = Event-driven FRP + Arrowized FRP + Concurrent FRP
@noraesae

61. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
• “A delightful language for reliable webapps”
• Elm = Event-driven FRP + Arrowized FRP + Concurrent FRP
• Discrete signal
@noraesae

62. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
• “A delightful language for reliable webapps”
• Elm = Event-driven FRP + Arrowized FRP + Concurrent FRP
• Discrete signal
• Signal functions
@noraesae

63. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
• “A delightful language for reliable webapps”
• Elm = Event-driven FRP + Arrowized FRP + Concurrent FRP
• Discrete signal
• Signal functions
• Global event dispatcher
@noraesae

64. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
update : Event -> Color -> Color
update event color =
case event of
ColorCycle ->
case color of
Red -> Blue
Blue -> Green
Green -> Red
@noraesae

65. Elm
Czaplicki, E. (2012). “Elm: Concurrent FRP for Functional GUIs.”
view : Color -> Html Event
view color =
div [ onClick ColorCycle
, style [("background-color", color)]
]
[ ]
@noraesae

66. It doesn’t look so elegant!
@noraesae

67. It doesn’t look so elegant!
• Classical FRP
red ‘until‘ click
@noraesae

68. It doesn’t look so elegant!
• Classical FRP
red ‘until‘ click
• Elm
update event color = case event of ...
view color = ...
@noraesae

69. It doesn’t look so elegant!
• Classical FRP
red ‘until‘ click
• Elm
update event color = case event of ...
view color = ...
• Elm is not classical FRP
@noraesae

70. Why not classical FRP?
@noraesae

71. Why not classical FRP?
• Web is discrete
• Classical FRP is based on continuity and laziness
@noraesae

72. Why not classical FRP?
• Web is discrete
• Classical FRP is based on continuity and laziness
• Hard to implement laziness on discrete env
• Timer, Polling, etc...
@noraesae

73. Why not classical FRP?
• Web is discrete
• Classical FRP is based on continuity and laziness
• Hard to implement laziness on discrete env
• Timer, Polling, etc...
• “I might argue that Elm was never about FRP”
Czaplicki, E. (2016). “A Farewell to FRP.” On Elm-lang Blog.
@noraesae

74. However, FRP still matters.
@noraesae

75. Maintainability & Testability
@noraesae

76. Why FRP matters: Maintainability
@noraesae

77. Why FRP matters: Maintainability
• Web app can be represented as function
• SF State View
@noraesae

78. Why FRP matters: Maintainability
• Web app can be represented as function
• SF State View
• State is SSOT(single source of truth)
@noraesae

79. Why FRP matters: Maintainability
• Web app can be represented as function
• SF State View
• State is SSOT(single source of truth)
• Bonus: Time-travel debugging is just a function call
@noraesae

80. Why FRP matters: Maintainability
• Web app can be represented as function
• SF State View
• State is SSOT(single source of truth)
• Bonus: Time-travel debugging is just a function call
• Signal a = Time -> a
@noraesae

81. Why FRP matters: Maintainability
• Web app can be represented as function
• SF State View
• State is SSOT(single source of truth)
• Bonus: Time-travel debugging is just a function call
• Signal a = Time -> a
• Signal View = Time -> View
@noraesae

82. Why FRP matters: Testability
@noraesae

83. Why FRP matters: Testability
• Signal isomorphism
@noraesae

84. Why FRP matters: Testability
• Signal isomorphism
• Signal a = SF RealWorld a
@noraesae

85. Why FRP matters: Testability
• Signal isomorphism
• Signal a = SF RealWorld a
• Replace RealWorld with TestWorld for tests
@noraesae

86. Why FRP matters: Testability
• Signal isomorphism
• Signal a = SF RealWorld a
• Replace RealWorld with TestWorld for tests
• Replace RealWorld with ServerWorld for free SSR(!)
@noraesae

87. Conclusion
@noraesae

88. Conclusion
• What FRP is
• Represent how a thing is being, in elegant and lazy way
@noraesae

89. Conclusion
• What FRP is
• Represent how a thing is being, in elegant and lazy way
• History of FRP
• FRP has firm backgrounds
@noraesae

90. Conclusion
• What FRP is
• Represent how a thing is being, in elegant and lazy way
• History of FRP
• FRP has firm backgrounds
• Why FRP matters
• Maintainability
• Testability
@noraesae

91. References I
Conal Elliott and Paul Hudak. “Functional Reactive Animation”. In:
ICFP ’97 (1997).
Evan Czaplicki. “Elm: Concurrent FRP for Functional GUIs”. In:
(2012).
Conal Elliott. “The Essence and Origins of Functional Reactive
Programming”. In: Lambda Jam. 2015.
Evan Czaplicki. A Farewell to FRP. 2016. url:
http://elm-lang.org/blog/farewell-to-frp.
@noraesae

92. References II
Redux - Read Me. url: http://redux.js.org.
ReactiveX - Intro. url: http://reactivex.io/intro.html.
@noraesae

93. FRP
Functional Reactive Programming
Hyunje Jun @ LINE UIT
@noraesae