Functional Reactive UI Programming

1. re-frame
Functional Reactive UI Programming

2. Reactive Programming
Wikipedia 의 첫 구절에 잘 표현되어 있다.
● data flow (<-> control flow)
○ graph of data
● propagation of change
● express static or dynamic data flows with ease in the programming
languages used
● the underlying execution model will automatically propagate changes
through the data flow

3. Reactive Programming
control flow data flow
propagation of changeorder of statements

4. Reactive Programming
Hard Disk
Sector
File
Memory
Data,Time
Data Flow
Abstraction is important
Conceptial Layer
Implementation Layer
Physical Layer
Reactive
Programming
Imperative
Programming
Abstraction

5. Reactive Programming
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 11
● y = x + 1
● print y
; => 21
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 21
imperative reactive

6. Reactive Programming
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 11
● y = x + 1
● print y
; => 21
imperative
propagation of change
명시적,
수동적
암묵적,
자동적
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 21
reactive

7. Reactive Programming
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 11
● y = x + 1
● print y
; => 21
● x = 10
● y = x + 1
● print y
; => 11
● x = 20
● print y
; => 21
imperative reactive
statement definition

8. Reactive Programming
1
2
3
●
●
●
1
2
3
●
●
●
수행
수행
수행
●
●
●
statement - imperative

9. Reactive Programming
1
2
3
●
●
●
1
= ( 1
)
2
= ( 2
)
3
= ( 3
)
●
●
●
definition - reactive
= ( )

10. Reactive Programming
data flow
= ( )
data flow

11. Reactive Programming
signal
data flow
signal signal

12. Reactive Programming
Wikipedia 의 첫 구절에 잘 표현되어 있다.
● data flow (<-> control flow)
○ graph of data
● propagation of change
● express static or dynamic data flows with ease in the programming
languages used
● the underlying execution model will automatically propagate changes
through the data flow
관계(relation)
관계의 재형성
관계의 지속

13. Reactive Programming
Hard Disk
Sector
File
Memory
Data,Time
Data Flow
Abstraction is important
Conceptial Layer
Implementation Layer
Physical Layer
Reactive
Programming
Imperative
Programming
Abstraction
관계

14. Reactive Programming
signal signal
데이타를 만드는 함수
관계를 만드는 함수

15. Reactive Programming
Wikipedia 의 첫 구절에 잘 표현되어 있다.
● data flow (<-> control flow)
○ graph of data
● propagation of change
● express static or dynamic data flows with ease in the programming
languages used
● the underlying execution model will automatically propagate changes
through the data flow

16. Reactive Programming
Wikipedia 의 첫 구절에 잘 표현되어 있다.
● data flow (<-> control flow)
○ graph of data
● propagation of change
● express static or dynamic data flows with ease in the programming
languages used
● the underlying execution model will automatically propagate changes
through the data flow
FP, Monad

17. Reactive Programming
Wikipedia 의 첫 구절에 잘 표현되어 있다.
● data flow (<-> control flow)
○ graph of data
● propagation of change
● express static or dynamic data flows with ease in the programming
languages used
● the underlying execution model will automatically propagate changes
through the data flow
FP, Macro

18. re-frame
● Clojure FRP UI 라이브러리
● SPA
● Motivated
○ Elm, Flux, Pedestal, Hoplon, Om, Om.Next, Cycle.js
● Unidirectional Data Flow
● FB react를 랩핑한 reagent에 기반.
● MVC 아키텍쳐.
○ 그러나 당신이 알고 있던 그 MVC는 아니다.
○ 차라리 re-frame 아키텍쳐
● Data > Function > Macro
○ Data의 구조를 잘 만드는 것이 Function를 잘 만드는 것보다 중요하다.
○ Function을 잘 만드는 것이 Macro를 잘 만드는 것보다 중요하다.

19. re-frame
D V
signal signal
FB React
React
Component
Virtual
DOM
Browser
DOM
Browser
Rendering
● No Observation
● No Monad
● No Event
● No model dirty checking!
● No Data Binding!
● Diffing Algorithm
● Re-render the whole app on every
update
● One Way

20. re-frame
D V
signal signal
Reagent
React
Component
Virtual
DOM
Browser
DOM
Browser
Rendering
D
signal
Reagent
Component

21. re-frame
Clojure Vector 자료형
● [1 2 3]
● [“a” “b” “c”]
● [:a :b :c]
● [:a “a” 1]
● [:a {:b 1} {:c 2}]
● [:a #(inc %)]
● [:button “click me”]
[:h1 “hello”] <h1> hello </h1>
[:button
{:type “button”}
“click me”]
<button type=”button”>
click me
</button>
hiccup html
hiccup : Clojure DOM DSL

22. re-frame
Reagent Componet
(defn hello []
[:h1 “hello”]) hello
Reagent Component Browser
● Just a function that returns hiccup.
● Not yet signal
● Need atom
render “hello”
<h1> hello </h1>

23. re-frame
Atom : State for Clojure
● (def x (atom 1))
● @x ;=> 1
● (swap! x inc)
● @x ;=> 2
● (swap! x + 10)
● @x ;=> 12
● (reset! x 1)
● @x ;=> 1
● (def x (atom 1))
● (defn f [] (prn “x = “ @x))
● (f)
;>> “x = 1”
● (swap! x inc)
● (f)
;>> “x = 2”
atom 만으로는
않된다.
명시적으로
호출해줘야...
변경했지
만

24. re-frame
Ratom : State for Reagent
● Clojure의 Atom과 모든 기능을 똑같다.
● Reagent Component의 State로서 동작하도록 기능이 추가되었다.
● reagent가 mount할 때, Ratom을 사용하는 함수는 reagent
component가 등록하게 된다. 이렇게 해서 signal이 된다.
● (def x (r/atom 1))
● @x ;=> 1
● (swap! x inc)
● @x ;=> 2
● (swap! x + 10)
● @x ;=> 12
● (reset! x 1)
● @x ;=> 1
● (def x (r/atom 1))
● (defn f [] (prn “x = “ @x))
● ; reagent mount f as component
● (swap! x inc)
;>> “x = 2”
변경하
면
자동으로
호출된다

25. re-frame
DEMO
1
Clojure Atom vs. Reagent Atom

26. re-frame
Reagent component
● 화면을 구성한다는 것은 곧 데이타를 구성한다는
것
● 데이타 조작만으로 화면을 구성할 수 있다!
D V
signal signal
D
signal
Ratom

27. re-frame
DEMO
2
Two circles with ratom

28. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Ratom
2 Ratom 사이에 관계가
없다.

29. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Ratom
2 Ratom 사이에 관계가 있어야…
즉 한 Ratom의 변화가 다른 Ratom에
전파되어야...

30. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Ratom
그러나 Ratom에는 이런 기능이 없다.
╳

31. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Reaction
Reaction이 그 역할을 할 수 있다.
Reaction

32. re-frame
DEMO
3
Reaction

33. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Reaction
Data Flow Graph !!!
Reaction

34. re-frame
DEMO
4
Two circles with reaction

35. re-frame
Reagent component
D V
signal signalD
signal
Ratom
Reagent component
D V
signal signal
D
signal
Reaction
Reaction은 다수의 시그널을 결합해서 계산을 수행하고 그 결과를 리턴할 수
있다.
D
signal
Ratom
Reaction 의 장점 1

36. re-frame
DEMO
5
Circle rotates circle

37. re-frame
Reagent component
D V
signal signal
D
signal
Ratom
Reagent component
D V
signal signal
D
signal
Reaction
Reaction 의 장점 2
Reaction은 관심있는 부분의 변화만 전파할 수
있다.
part
part

38. re-frame
DEMO
6
Propagation of Parts

39. re-frame
D V
D
D VD
단점: Ratom, Reaction
시스템이 커지면 위 그림처럼 Graph가
복잡해진다.
D V
D
D VD
D V
D
D VD
D V
D
D VD

40. re-frame
D V
app-db
Ratom
D VD
One Big Ratom
app-db
D V
D VD

41. re-frame
app-db
● “Well-formed Data at rest is as close to perfection in programming as it gets.”
— Fogus (@fogus) April 11, 2014
● in-memory database
● OOP와는 극명하게 대치되는 지점
○ Local state is harmful.
○ State considered harmful.
○ Global이냐 Local이냐가 문제가 아니라, State를 최대한 줄이고 잘 다루는 것이
중요하다.
● 장점
○ application state의 동기화가 쉽다.
○ Undo/Redo 구현이 쉽다.
○ application 을 FSM으로 모델링할 수 있다.
●

42. re-frame
app-db components Hiccup Reagent VDOM React DOM
f1 f2 f3
unidirectional, dynamic, async, discrete FRP data flow

43. re-frame
app-db components Hiccup Reagent VDOM React DOM
f1 f2 f3
Browser pixels Monitor photons
f4 f5
unidirectional, dynamic, async, discrete FRP data flow
continued...

44. re-frame
app-db components Hiccup Reagent VDOM React DOM
f1 f2 f3
Browser pixels Monitor photons
f4 f5
unidirectional, dynamic, async, discrete FRP data flow
continued...

45. re-frame
Subscription
app-db Component
query
reaction

46. re-frame
Subscription
● loosely coupling
○ Component는 app-db에 대해 최소한의 정보만 알아야 한다.
○ 선언적 방식으로 reaction을 요청한다.
○ 하나의 Component는 조건에 따라 다른 reaction에 관계.
● pameteryzed query
● app-db는 데이타베이스다.
● re-frame의 subscription은 이 역할을 수행한다.
● register-sub 함수 : 키워드로 Subscription 등록
● subscribe 함수 : 키워드로 지정된 reaction을 리턴한다.

47. re-frame
Subscription
(register-sub :customer-query
(fn []
[db [sid cid]]
(reaction (get-in @db [:path :to :a :map cid])))
(subscribe [:customer-query])
UI 코드에서 사용.
UI 관점에서 필요한 정보를 선언적으로 query를
요청.
app-db에 대한 구체적인 지식이 필요없다.
DB 코드에 존재.
app-db에 대한 지식 정보
필요.
요청된 query를 수행한 후,
reaction을 반환한다.

48. re-frame
DEMO
7
Subscriptions

49. re-frame
app-db components Hiccup Reagent VDOM React DOM
f1 f2 f3
Dispatch events
eventhandler

51. re-frame
Dispatch events
● events is data.
● 2nd flow, reverse flow
● mouse click, ajax
● mutate app-db
○ Component는 app-db에 대해 최소한의 정보만 알아야 한다.
○ 선언적 방식으로 변경을 요청한다.
● register-handler 함수 : 이벤트 핸들러 등록. 핸들러 함수는 app-db를 변경.
● dispatch : 이벤트 발생
● app-db를 변경하는 모든 코드는 핸들러 함수들 안에 존재하게 된다.
○ 따라서 어느 지점에서 어떤 변경이 있는지를 쉽게 확인할 수 있다.

52. re-frame
Dispatch events
(register-handler :delete-item
(fn [app-db [hid item-id]]
(dissoc-in app-db [:some :path item-id]))
(dispatch [:delete-item 42])
UI 쪽 코드에 존재.
변경 요청에 대한
선언.
구체적인 구현과는
무관.
DB 쪽에 존재
app-db에 대한 지식을
안다.
구체적인 변경을 수행한다.

53. re-frame
DEMO
8
Dispatch events

54. END
QnA