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
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
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)
관계의 재형성
관계의 지속
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
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”
변경하
면
자동으로
호출된다
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에
전파되어야...
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
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
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으로 모델링할 수 있다.
●
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을 반환한다.
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에 대한 지식을
안다.
구체적인 변경을 수행한다.