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.

웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기

7,477 views

Published on

1. Rx를 지탱하는 세 가지 키워드
2. 요즘 들어 왜 자주 보일까?
3. 함수형 리액티브 프로그래밍
4. 웹 프론트엔드, 그리고 RxJS

Published in: Software
  • @Woojin Joe 코멘트를 이제야 밨네요!. 네, map이 맞습니다. flatMap은 여러 개의 observable stream를 하나의 observable로 결합할 때 쓰는 오퍼레이터인데, 본래 예제를 제가 짧게 축약하는 과정에서 실수를 했네요 ㅠ. 리뷰 감사합니다!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 안녕하세요~ ^나프다 발표때부터 강연너무 잘 들었습니다~ 질문 차원에서 댓글 남겼습니다~ 26페이지 장표 보면 RxJs에서 MouseMoveEvent를 마우스 포지션으로 변경하는 부분의 코드가 Observable로 감싸서 반환한 것이 아니라서 flatMap이 아니라 map일 것 같은데 혹 제가 잘못 알고 있는 건가해서 댓글 남겼습니다 ^^
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기

  1. 1. 웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기 김훈민, NAVER 스마트에디터 3.0 http://huns.me
  2. 2. 비동기와 이벤트 기반 프로그램을 작성하는 데 필요한 Observable 시퀀스 처리 라이브러리 Rx
  3. 3. 2005 현재 2007, Volta 2009, RX.NET 2010, RXJS 2012, 오픈소스 공개 2013 RxJava
  4. 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. 5. 목차 1. Rx를 지탱하는 세 가지 키워드 2. 요즘 들어 왜 자주 보일까? 3. 함수형 리액티브 프로그래밍 4. 웹 프론트엔드, 그리고 RxJS
  6. 6. #1 Rx를 지탱하는 세 가지 키워드 Reactive Programming LINQ to Events Scheduler
  7. 7. Reactive Programming 데이터 플로우와 상태 변경을 전파한다는 생각에 근간을 둔 프로그래밍 패러다임 Reactive Programming in Wikipedia, The Free Encyclopedia
  8. 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. 9. 자극은 밖에서 안으로 흐름 자극이 있어야만 반응하는 수동성 반응
  10. 10. Iterator Data next()
  11. 11. Observer Data subscribe()
  12. 12. 어떤 체계 간에 존재하는 다음과 같은 논리적 성질. 각각 1:1로 대 응하는 개념 xi와 yi(i=1, 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용어사전, 한국정보통신기술협회)
  13. 13. A와 B의 본질이 같다 (약간의 정신 승리) 어떤 체계 간에 존재하는 다음과 같은 논리적 성질. 각각 1:1로 대응하는 개 념 xi와 yi(i=1, 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, …)를 쌍대 명제라 한 다. 전기 회로에서는 표와 같이 대응할 때마다 쌍대성이 존재하여 중요하다.
  14. 14. event Iterable (pull) Observable (push) 데이터 가져오기 T next() next(T) 에러 처리 throws Exception error(Exception) 완료 !hasNext() complete()
  15. 15. LINQ to Events 이벤트와 LINQ의 개념을 결합한 오퍼레이터(Operator) 제공
  16. 16. Language INtergrated Query 에릭 마이어가 만든 통합 질의 언어 C# 3.0부터 등장 데이터 질의 문법 설탕
  17. 17. //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);
  18. 18. //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);
  19. 19. Your Mouse is a DataBase = Observable + LINQ
  20. 20. Mouse Move Event
  21. 21. 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);
 });
  22. 22. Mouse Move Event
  23. 23. 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);
 });
  24. 24. Subscribe
  25. 25. 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);
 });
  26. 26. Scheduler 비동기(멀티스레드) 환경에서 오퍼레이터 실행 시점 제어
  27. 27. #2 요즘 들어, 왜 자주 보일까? Rx만 잘난 것도 아닌데 왜 굳이 Rx?
  28. 28. https://medium.com/reactive-programming/what-is-reactive-programming-bc9fa7f4a7fc#.ddo2ci9wx
  29. 29. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive
  30. 30. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive Elastic Resilient
  31. 31. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive Resilient Message-Driven Elastic
  32. 32. callback promise generator async/await …
  33. 33. (Compositionality) 구성성
  34. 34. 춘향은 잠에서 퍼뜩 깼다
  35. 35. 춘향 / 은 / 잠 / 에서 / 퍼뜩 / 깼다
  36. 36. 춘향 / 은 / 자-/ ㅁ / 에서 / 퍼뜩 / 깨- / 었- / 다
  37. 37. 1 2 3
  38. 38. http://labs.bench.co/blog/2014/12/10/microservices-at-bench-intro
  39. 39. https://www.kirupa.com/react/components.htm
  40. 40. Functional + Rx 복잡 -> 분리 -> 결합 동시성 구성성
  41. 41. sum = a + b
  42. 42. sum = a + b a와 b의 합을 sum에 할당?
  43. 43. sum = a + b 정체성, 관계 정의
  44. 44. a b sum
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. #3 함수형 리액티브 프로그래밍(FRP) 함수형 리액티브 프로그래밍(FRP)을 둘러싼 혼란과 진실
  49. 49. 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
  50. 50. Functional Reactive AnimatioN by Conal Elliott and Paul Hudak, 1997 인터랙티브 3D 그래픽 처리 표현과 모델링의 분리 시간에 따라 변하는 값을 표현(Behavior) 함수형 리액티브 프로그래밍(FRP)의 시작
  51. 51. http://images.slideplayer.com/26/8448601/slides/slide_4.jpg
  52. 52. wiggle = sin(pi * time)
  53. 53. wiggle = sin(pi * time) Behavior
  54. 54. moveXY(x, y, image)
  55. 55. moveXY wiggle 0 image
  56. 56. charlotte = importBitmap "../Media/charlotte.bmp" moveXY wiggle 0 charlotte http://conal.net/fran/tutorial.htm
  57. 57. leftRightCharlotte = moveXY wiggle 0 charlotte upDownPat = moveXY 0 waggle pat charlottePatDance = leftRightCharlotte `over` upDownPat
  58. 58. https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/
  59. 59. "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
  60. 60. const result$ = Rx.Observable
 .combineLatest(a$, b$)
 .map(values => { values.reduce((acc, cur) => acc + cur) });
  61. 61. 불연속 값(descret value) 처리! 스트림 결합시 사이드 이펙트 발생! 구성성(compositionality) 결여!
  62. 62. ones 1 2 hundreds 200 sum 101 202 시간 100
  63. 63. ones 1 2 hundreds 200 sum 101 202 시간 100
  64. 64. ones 1 2 hundreds 200 sum 101 202 시간 102 순간 불일치(glitch) 100
  65. 65. Rx = 반응성 - 시간 Rx는 동시성을 매개변수화하여 쌍대성을 이용하여 현실적인 대안을 제시 http://csl.stanford.edu/~christos/pldi2010.fit/meijer.duality.pdf
  66. 66. event Iterable (pull) Observable (push) 데이터 가져오기 T next() next(T) 에러 처리 throws Exception error(Exception) 완료 !hasNext() complete() None BlockingBlocking
  67. 67. #4 웹 프론트엔드, 그리고 RxJS 웹 프론트엔드에서 RxJS는 어떤 의미가 있을까?
  68. 68. 도메인 모델, OOP 설계 KVO(Key-Value Observing)
  69. 69. 양방향 데이터 바인딩 풍부한 디렉티브
  70. 70. 가상 DOM을 이용한 렌더링 순수 함수와 같은 컴포넌트
  71. 71. 순수 함수 조합 단방향 데이터 플로우 신뢰할 수 있는 단일 출처 불변 상태
  72. 72. MVI(Model-View-Intent) 순환 스트림 설계 함수형 프로그래밍
  73. 73. + Reactive + Functional OOP FP
  74. 74. Angular2…? OOP FP 2
  75. 75. But, with RxJS or Redux OOP FP 2
  76. 76. 주변을 둘러 보시라 Elm에서 영감을 얻은 redux, cycle.js 다른 진영 또는 클래식한 기술에서 새로운 통찰 획득 Rx는 좋은 자극제
  77. 77. 정리 비동기 해법으로 탄생 Observable + LINQ + Scheduler RP and Functional, But Not FRP 복잡도 증가 -> 분리 -> 결합 핵심은 구성성(Compositionality) 새로운 패러다임이 주는 자극
  78. 78. 감사합니다

×