Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Re frame

3,393 views

Published on

Functional Reactive UI Programming

Published in: Technology

Re frame

  1. 1. re-frame Functional Reactive UI Programming
  2. 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. 3. Reactive Programming control flow data flow propagation of changeorder of statements
  4. 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. 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. 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. 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. 8. Reactive Programming 1 2 3 ● ● ● 1 2 3 ● ● ● 수행 수행 수행 ● ● ● statement - imperative
  9. 9. Reactive Programming 1 2 3 ● ● ● 1 = ( 1 ) 2 = ( 2 ) 3 = ( 3 ) ● ● ● definition - reactive = ( )
  10. 10. Reactive Programming data flow = ( ) data flow
  11. 11. Reactive Programming signal data flow signal signal
  12. 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. 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. 14. Reactive Programming signal signal 데이타를 만드는 함수 관계를 만드는 함수
  15. 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. 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. 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. 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. 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. 20. re-frame D V signal signal Reagent React Component Virtual DOM Browser DOM Browser Rendering D signal Reagent Component
  21. 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. 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. 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. 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. 25. re-frame DEMO 1 Clojure Atom vs. Reagent Atom
  26. 26. re-frame Reagent component ● 화면을 구성한다는 것은 곧 데이타를 구성한다는 것 ● 데이타 조작만으로 화면을 구성할 수 있다! D V signal signal D signal Ratom
  27. 27. re-frame DEMO 2 Two circles with ratom
  28. 28. re-frame Reagent component D V signal signal D signal Ratom Reagent component D V signal signal D signal Ratom 2 Ratom 사이에 관계가 없다.
  29. 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. 30. re-frame Reagent component D V signal signal D signal Ratom Reagent component D V signal signal D signal Ratom 그러나 Ratom에는 이런 기능이 없다. ╳
  31. 31. re-frame Reagent component D V signal signal D signal Ratom Reagent component D V signal signal D signal Reaction Reaction이 그 역할을 할 수 있다. Reaction
  32. 32. re-frame DEMO 3 Reaction
  33. 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. 34. re-frame DEMO 4 Two circles with reaction
  35. 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. 36. re-frame DEMO 5 Circle rotates circle
  37. 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. 38. re-frame DEMO 6 Propagation of Parts
  39. 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. 40. re-frame D V app-db Ratom D VD One Big Ratom app-db D V D VD
  41. 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. 42. re-frame app-db components Hiccup Reagent VDOM React DOM f1 f2 f3 unidirectional, dynamic, async, discrete FRP data flow
  43. 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. 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. 45. re-frame Subscription app-db Component query reaction
  46. 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. 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. 48. re-frame DEMO 7 Subscriptions
  49. 49. re-frame app-db components Hiccup Reagent VDOM React DOM f1 f2 f3 Dispatch events eventhandler
  50. 50. 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를 변경하는 모든 코드는 핸들러 함수들 안에 존재하게 된다. ○ 따라서 어느 지점에서 어떤 변경이 있는지를 쉽게 확인할 수 있다.
  51. 51. 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에 대한 지식을 안다. 구체적인 변경을 수행한다.
  52. 52. re-frame DEMO 8 Dispatch events
  53. 53. END QnA

×