??? ???????????? ????????? ????? ?????? Rx ??????
?
71 likes?10,808 views
1. Rx? ???? ? ?? ??? 2. ?? ?? ? ?? ???? 3. ??? ???? ????? 4. ? ?????, ??? RxJS
![＾Of all the work I¨ve done in my career so far, this is
the most exciting. [´] I know it¨s a bold statement,
but I really believe that the problem of
asynchronous programming events has been
solved.￣
https://campustechnology.com/articles/2009/08/10/microsofts-new-.net-rx-
framework-tackles-challenges-of-asynchronous-programming.aspx](https://image.slidesharecdn.com/rx-161216085719/85/Rx-4-320.jpg)
![Reactive systems [´] are repeatedly prompted
by the outside world and their role is to
continusouly respond
external inputs
- On the development of reactive systems, 1985 -
http://dl.acm.org/citation.cfm?id=101990](https://image.slidesharecdn.com/rx-161216085719/85/Rx-8-320.jpg)
![?? ?? ?? ???? ??? ?? ??? ??. ?? 1:1? ?
??? ?? xi? yi(i1, 2, ´)? ???? ?? S1{x1,
x2, ´}, S2{y1, y2, ´} ?? ??? ??. ??? S1? S2? ?
???? ?? ???? ???. S1? ??? ?? r(x1, x2, ´,
xn)? ??? ? ? ??? ??? ? xi? ???? yi? ???
?? P(y1, y2, ´, yn)? S2? ??? ????. S1, S2 ?? ??
?? ?? ?? ??? ??? ????? ?? xi, yi? ??? ?
? r(x1, x2, ´), P(y1, y2, ´)? ?? ??? ??. ?? ????
? ?? ?? ??? ??? ???? ???? ????.
[??? ????] ??? [duality] (IT????, ??????????)](https://image.slidesharecdn.com/rx-161216085719/85/Rx-13-320.jpg)
??? ???????????? ????????? ????? ?????? Rx ??????
- 1. ? ????? ???? ?? ?? Rx ??? ???, NAVER ?????? 3.0 http://huns.me
- 2. ???? ??? ?? ????? ???? ? ??? Observable ??? ?? ????? Rx
- 4. ＾Of all the work I¨ve done in my career so far, this is the most exciting. [´] I know it¨s a bold statement, but I really believe that the problem of asynchronous programming events has been solved.￣ https://campustechnology.com/articles/2009/08/10/microsofts-new-.net-rx- framework-tackles-challenges-of-asynchronous-programming.aspx
- 5. ?? 1. Rx? ???? ? ?? ??? 2. ?? ?? ? ?? ???? 3. ??? ???? ????? 4. ? ?????, ??? RxJS
- 6. #1 Rx? ???? ? ?? ??? Reactive Programming LINQ to Events Scheduler
- 7. Reactive Programming ??? ???? ?? ??? ????? ??? ??? ? ????? ???? Reactive Programming in Wikipedia, The Free Encyclopedia
- 8. Reactive systems [´] are repeatedly prompted by the outside world and their role is to continusouly respond external inputs - On the development of reactive systems, 1985 - http://dl.acm.org/citation.cfm?id=101990
- 9. ??? ??? ??? ?? ??? ???? ???? ??? ??
- 13. ?? ?? ?? ???? ??? ?? ??? ??. ?? 1:1? ? ??? ?? xi? yi(i1, 2, ´)? ???? ?? S1{x1, x2, ´}, S2{y1, y2, ´} ?? ??? ??. ??? S1? S2? ? ???? ?? ???? ???. S1? ??? ?? r(x1, x2, ´, xn)? ??? ? ? ??? ??? ? xi? ???? yi? ??? ?? P(y1, y2, ´, yn)? S2? ??? ????. S1, S2 ?? ?? ?? ?? ?? ??? ??? ????? ?? xi, yi? ??? ? ? r(x1, x2, ´), P(y1, y2, ´)? ?? ??? ??. ?? ???? ? ?? ?? ??? ??? ???? ???? ????. [??? ????] ??? [duality] (IT????, ??????????)
- 15. A? B? ??? ?? (??? ?? ??) ?? ?? ?? ???? ??? ?? ??? ??. ?? 1:1? ???? ? ? xi? yi(i1, 2, ´)? ???? ?? S1{x1, x2, ´}, S2{y1, y2, ´} ? ? ??? ??. ??? S1? S2? ? ???? ?? ???? ???. S1? ??? ?? r(x1, x2, ´, xn)? ??? ? ? ??? ??? ? xi? ???? yi? ??? ?? P(y1, y2, ´, yn)? S2 ? ??? ????. S1, S2 ?? ?? ?? ?? ?? ??? ??? ??? ?? ?? xi, yi? ??? ?? r(x1, x2, ´), P(y1, y2, ´)? ?? ??? ? ?. ?? ????? ?? ?? ??? ??? ???? ???? ????.
- 16. event Iterable (pull) Observable (push) ??? ???? T next() next(T) ?? ?? throws Exception error(Exception) ?? !hasNext() complete()
- 17. LINQ to Events ???? LINQ? ??? ??? ?????(Operator) ??
- 18. Language INtergrated Query ?? ???? ?? ?? ?? ?? C# 3.0?? ?? ??? ?? ?? ??
- 19. //Query syntax:? IEnumerable<int> numQuery1 =? from num in numbers? where num % 2 == 0? orderby num? select num;? ? //Method syntax:? IEnumerable<int> numQuery2 = numbers? .Where(num => num % 2 == 0)? .OrderBy(n => n);
- 20. //Query syntax:? IEnumerable<int> numQuery1 =? from num in numbers? where num % 2 == 0? orderby num? select num;? ? //Method syntax:? IEnumerable<int> numQuery2 = numbers? .Where(num => num % 2 == 0)? .OrderBy(n => n);
- 21. Your Mouse is a DataBase = Observable + LINQ
- 23. Mouse Move Event
- 24. const targetElement = document.getElementById('dragElement');? const drag$ = Rx.Observable? .fromEvent(targetElement, 'mouseup');? ? drag$? .flatMap(ev => ({? startX: ev.pageX,? startY: ev.pageY? }));? ? drag$.subscribe(pos => {? console.log(pos);? });
- 25. Mouse Move Event
- 26. const targetElement = document.getElementById('dragElement');? const drag$ = Rx.Observable? .fromEvent(targetElement, 'mouseup');? ? drag$? .flatMap(ev => ({? startX: ev.pageX,? startY: ev.pageY? }));? ? drag$.subscribe(pos => {? console.log(pos);? });
- 27. Subscribe
- 28. const targetElement = document.getElementById('dragElement');? const drag$ = Rx.Observable? .fromEvent(targetElement, 'mouseup');? ? drag$? .flatMap(ev => ({? startX: ev.pageX,? startY: ev.pageY? }));? ? drag$.subscribe(pos => {? console.log(pos);? });
- 29. Scheduler ???(?????) ???? ????? ?? ?? ??
- 31. #2 ?? ??, ? ?? ???? Rx? ?? ?? ??? ? ?? Rx?
- 37. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive Resilient Message-Driven Elastic
- 40. ??? ??? ?? ??
- 41. ?? / ? / ? / ?? / ?? / ??
- 42. ?? / ? / ?-/ ? / ?? / ?? / ?- / ?- / ?
- 47. 1 2 3
- 50. Functional + Rx ?? -> ?? -> ?? ??? ???
- 52. sum = a + b
- 53. sum = a + b a? b? ?? sum? ???
- 54. sum = a + b ???, ?? ??
- 55. a b sum
- 56. const a = document.getElementById('a');? const a$ = Rx.Observable? .fromEvent(a, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(a.value, 10));? const b = document.getElementById('b');? const b$ = Rx.Observable? .fromEvent(b, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(b.value, 10));? ? const result$ = Rx.Observable? .combineLatest(a$, b$)? .map(values => values.reduce((acc, cur) => acc + cur));? ? result$.subscribe(res => document.getElementById('result').value = res); a
- 57. const a = document.getElementById('a');? const a$ = Rx.Observable? .fromEvent(a, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(a.value, 10));? const b = document.getElementById('b');? const b$ = Rx.Observable? .fromEvent(b, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(b.value, 10)); ? ? const result$ = Rx.Observable? .combineLatest(a$, b$)? .map(values => values.reduce((acc, cur) => acc + cur));? ? result$.subscribe(res => document.getElementById('result').value = res); a b
- 58. const a = document.getElementById('a');? const a$ = Rx.Observable? .fromEvent(a, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(a.value, 10)); const b = document.getElementById('b');? const b$ = Rx.Observable? .fromEvent(b, 'keyup')? .map(e => parseInt(e.target.value || 0, 10))? .startWith(parseInt(b.value, 10)); const sum$ = Rx.Observable? .combineLatest(a$, b$)? .map(values => values.reduce((acc, cur) => acc + cur));? ? sum$.subscribe(res => document.getElementById('result').value = res); a b sum
- 60. It is sometimes called ＾functional reactive programming￣ but this is a misnomer. ReactiveX may be functional, and it may be reactive, but ＾functional reactive programming￣ is a different animal. http://reactivex.io/intro.html
- 62. Functional Reactive AnimatioN by Conal Elliott and Paul Hudak, 1997 ????? 3D ??? ?? ??? ???? ?? ??? ?? ??? ?? ??(Behavior) ??? ???? ?????(FRP)? ??
- 65. wiggle = sin(pi * time)
- 66. wiggle = sin(pi * time) Behavior
- 68. moveXY wiggle 0 image
- 69. charlotte = importBitmap "../Media/charlotte.bmp" moveXY wiggle 0 charlotte http://conal.net/fran/tutorial.htm
- 70. leftRightCharlotte = moveXY wiggle 0 charlotte upDownPat = moveXY 0 waggle pat charlottePatDance = leftRightCharlotte `over` upDownPat
- 72. "Original FRP" refers to denotational and continuous-time functional programming using behaviors and events. https://github.com/conal/talk-2015-essence-and-origins-of-frp https://medium.com/@andrestaltz/why-i-cannot-say-frp-but-i-just-did-d5ffaa23973b#.xtc4pmnco
- 73. const result$ = Rx.Observable? .combineLatest(a$, b$)? .map(values => { values.reduce((acc, cur) => acc + cur) });
- 74. ??? ?(descret value) ??! ??? ??? ??? ??? ??! ???(compositionality) ??!
- 75. ones 1 2 hundreds 200 sum 101 202 ?? 100
- 76. ones 1 2 hundreds 200 sum 101 202 ?? 100
- 77. ones 1 2 hundreds 200 sum 101 202 ?? 102 ?? ???(glitch) 100
- 79. Rx = ??? - ?? Rx? ???? ??????? ???? ???? ???? ??? ?? http://csl.stanford.edu/~christos/pldi2010.fit/meijer.duality.pdf
- 80. event Iterable (pull) Observable (push) ??? ???? T next() next(T) ?? ?? throws Exception error(Exception) ?? !hasNext() complete() None BlockingBlocking
- 81. #4 ? ?????, ??? RxJS ? ??????? RxJS? ?? ??? ????
- 82. ??? ??, OOP ?? KVO(Key-Value Observing)
- 83. ??? ??? ??? ??? ????
- 84. ?? DOM? ??? ??? ?? ??? ?? ????
- 85. ?? ?? ?? ??? ??? ??? ??? ? ?? ?? ?? ?? ??
- 86. MVI(Model-View-Intent) ?? ??? ?? ??? ?????
- 87. + Reactive + Functional OOP FP
- 89. But, with RxJS or Redux OOP FP 2
- 90. ??? ?? ??? Elm?? ??? ?? redux, cycle.js ?? ?? ?? ???? ???? ??? ?? ?? Rx? ?? ???
- 91. ?? ??? ???? ?? Observable + LINQ + Scheduler RP and Functional, But Not FRP ??? ?? -> ?? -> ?? ??? ???(Compositionality) ??? ????? ?? ??
- 92. ?????