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.
MS는
ReactiveX를
왜만들었을까? (feat. RxJS)
@RT:FM NapuCon 2016
김훈민, NAVER Corp
http://huns.me
비동기와 이벤트 기반 프로그램을 작성하는 데 필요한
Observable 시퀀스 처리 라이브러리
Rx
목차
1. Rx, 어디에서 왔을까?
2. Rx를 지탱하는 키워드 셋
3. RP와 FRP의 경계에서
4. 웹 프론트엔드 그리고 RxJS
#1
Rx는
어디에서 왔을까?
Rx를 둘러싼 혼란함을 정리하는 시작점
2007. 12
Live Labs Volta
다양한 기술을 하나의 플랫폼에서 실행
GWT와 유사
Many to Many
2005 현재
2007,
Volta
Volta는 갔으나
Reactive Framework는 남아서
ReactiveX가 되었도다
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 b...
2009. 11. 17
Rx.NET 릴리즈
Reactive Extensions For .NET
MS의 자사 제품에 들어갈 라이브러리
2005 현재
2007,
Volta
2009,
RX.NET
2010. 03. 17
RxJS 릴리즈
HTML5, AJAX UI
비동기 비중 증가
Promise/A+ 보다 빠른 등장
2005 현재
2007,
Volta
2009,
RX.NET
2010,
RXJS
2012. 11. 06
Rx 오픈소스 공개
Rx.NET
RxJS
Rx++
2005 현재
2007,
Volta
2009,
RX.NET
2010,
RXJS
2012,
오픈소스 공개
2013. 02. 05
RxJava 릴리즈
by Netflix on github
Rx에 적극적인 기업 중 하나
2005 현재
2007,
Volta
2009,
RX.NET
2010,
RXJS
2012,
오픈소스 공개
201...
Reactive Manifesto
http://www.reactivemanifesto.org/
Responsive
Reactive Manifesto
http://www.reactivemanifesto.org/
Responsive
Elastic Resilient
Reactive Manifesto
http://www.reactivemanifesto.org/
Responsive
Resilient
Message-Driven
Elastic
#2
Rx를 지탱하는,
키워드 세가지
Reactive Programming
LINQ to Events
Scheduler
Reactive
Programming
데이터 플로우와 상태 변경을 전파한다는
생각에 근간을 둔 프로그래밍 패러다임
Reactive Programming in Wikipedia, The Free Encyclopedia
Reactive systems […] are repeatedly
prompted by the outside world
and their role is
to continusouly respond
external input...
자극은 밖에서 안으로 흐름
자극이 있어야만 반응하는 수동성
반응
Iterator Data
next()
Observable Data
next()
어떤 체계 간에 존재하는 다음과 같은 논리적 성질. 각각 1:1로
대응하는 개념 xi와 yi(i=1, 2, …)로 이루어진 체계 S1={x1,
x2, …}, S2={y1, y2, …} 등이 있다고 하자. 여기서 S1과 ...
A와 B의 본질이 같다
(약간의 정신 승리)
어떤 체계 간에 존재하는 다음과 같은
논리적 성질. 각각 1:1로 대응하는 개
념 xi와 yi(i=1, 2, …)로 이루어진
체계 S1={x1, x2, …}, S2={y1,
...
event
Iterable
(pull)
Observable
(push)
데이터 가져오기 T next() next(T)
에러 처리 throws Exception error(Exception)
완료 !hasNext() co...
LINQ to Events
이벤트와 LINQ의 개념을 결합한
오퍼레이터(Operator) 제공
Language
INtergrated
Query
에릭 마이어가 만든 통합 질의 언어
C# 3.0부터 등장
데이터 질의 문법 설탕
//Query syntax:

IEnumerable<int> numQuery1 =

from num in numbers

where num % 2 == 0

orderby num

select num;



//Meth...
//Query syntax:

IEnumerable<int> numQuery1 =

from num in numbers

where num % 2 == 0

orderby num

select num;



//Meth...
Your Mouse is
a DataBase
= Observable + LINQ
Mouse Move
Event
const targetElement = document.getElementById('dragElement');

const drag$ = Rx.Observable

.fromEvent(targetElement, 'mou...
Mouse Move
Event
const targetElement = document.getElementById('dragElement');

const drag$ = Rx.Observable

.fromEvent(targetElement, 'mou...
Subscribe
const targetElement = document.getElementById('dragElement');

const drag$ = Rx.Observable

.fromEvent(targetElement, 'mou...
Scheduler
비동기(멀티스레드) 환경에서
오퍼레이터 실행 시점 제어
#3
RP와 FRP의
경계에서
함수형 리액티브 프로그래밍(FRP)을 둘러싼
혼란은 어디에서 오는 걸까?
It is sometimes called functional
reactive programming but this is a
misnomer. ReactiveX may be
functional, and it may be ...
Functional
Reactive
AnimatioN
by Conal Elliott and Paul Hudak, 1997
인터랙티브 3D 그래픽 처리
표현과 모델링의 분리
시간에 따라 변하는 값을 표현(Behavior)...
https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/
https://medium.com/@andrestaltz/why-i-cannot-say-frp-but-i-just-did-d5ffaa23973b#.xtc4pmnco
"Original FRP" refers to
denotational and
continuous-time
functional programming
using behaviors
and events.
https://githu...
개념적인 FRAN,
실질적인 Rx
불연속 값(descret value) 처리
스트림 결합시 일관성 없는 동시 이벤트 처리 발생
개념적인 FRAN,
실질적인 Rx
불연속 값(descret value) 처리
스트림 결합시 일관성 없는 동시 이벤트 처리 발생
구성성(compositionality) 결여
ones 1 2
hundreds 200
sum 101 202
시간
100
ones 1 2
hundreds 200
sum 101 202
시간
100
ones 1 2
hundreds 200
sum 101 202
시간
102
순간 불일치(glitch)
100
https://wiki.haskell.org/Reactive-banana
#4
웹 프론트엔드,
그리고 RxJS
웹 프론트엔드에서 RxJS는
어떤 의미가 있을까?
도메인 모델, OOP 설계
KVO(Key-Value Observing)
양방향 데이터 바인딩
풍부한 디렉티브
가상 DOM을 이용한 렌더링
순수 함수와 같은 컴포넌트
순수 함수 조합
단뱡향 데이터 플로우
신뢰할 수 있는 단일 출처
불변 상태
MVI(Model-View-Intent)
순환 스트림 설계
함수형 프로그래밍
+ Reactive
+ Functional
OOP FP
Angular2…?
OOP FP
2
But,
with RxJS or Redux
OOP FP
2
Rx는 FE 개발자에게
좋은 자극제
Elm에서 영감을 얻은 Redux, Cycle.js
다른 진영 또는 클래식한 기술에서 새로운 통찰을 경험
그래서 Rx는,
비동기 처리 해법으로 탄생
Observable + LINQ + Scheduler
RP and Functional, But Not FRP
비동기, 데이터 동기화의 중요성과 함께 부각
웹 프론트엔드 개발자의...
감사합니다
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민
Upcoming SlideShare
Loading in …5
×

track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민

395 views

Published on

행사 사진 : https://goo.gl/LB6eEp

Published in: Engineering
  • Be the first to comment

track2 04. MS는 Rx를 왜 만들었을까? feat. RxJS/ 네이버, 김훈민

  1. 1. MS는 ReactiveX를 왜만들었을까? (feat. RxJS) @RT:FM NapuCon 2016 김훈민, NAVER Corp http://huns.me
  2. 2. 비동기와 이벤트 기반 프로그램을 작성하는 데 필요한 Observable 시퀀스 처리 라이브러리 Rx
  3. 3. 목차 1. Rx, 어디에서 왔을까? 2. Rx를 지탱하는 키워드 셋 3. RP와 FRP의 경계에서 4. 웹 프론트엔드 그리고 RxJS
  4. 4. #1 Rx는 어디에서 왔을까? Rx를 둘러싼 혼란함을 정리하는 시작점
  5. 5. 2007. 12 Live Labs Volta 다양한 기술을 하나의 플랫폼에서 실행 GWT와 유사 Many to Many 2005 현재 2007, Volta
  6. 6. Volta는 갔으나 Reactive Framework는 남아서 ReactiveX가 되었도다
  7. 7. 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
  8. 8. 2009. 11. 17 Rx.NET 릴리즈 Reactive Extensions For .NET MS의 자사 제품에 들어갈 라이브러리 2005 현재 2007, Volta 2009, RX.NET
  9. 9. 2010. 03. 17 RxJS 릴리즈 HTML5, AJAX UI 비동기 비중 증가 Promise/A+ 보다 빠른 등장 2005 현재 2007, Volta 2009, RX.NET 2010, RXJS
  10. 10. 2012. 11. 06 Rx 오픈소스 공개 Rx.NET RxJS Rx++ 2005 현재 2007, Volta 2009, RX.NET 2010, RXJS 2012, 오픈소스 공개
  11. 11. 2013. 02. 05 RxJava 릴리즈 by Netflix on github Rx에 적극적인 기업 중 하나 2005 현재 2007, Volta 2009, RX.NET 2010, RXJS 2012, 오픈소스 공개 2013 RxJava
  12. 12. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive
  13. 13. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive Elastic Resilient
  14. 14. Reactive Manifesto http://www.reactivemanifesto.org/ Responsive Resilient Message-Driven Elastic
  15. 15. #2 Rx를 지탱하는, 키워드 세가지 Reactive Programming LINQ to Events Scheduler
  16. 16. Reactive Programming 데이터 플로우와 상태 변경을 전파한다는 생각에 근간을 둔 프로그래밍 패러다임 Reactive Programming in Wikipedia, The Free Encyclopedia
  17. 17. 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
  18. 18. 자극은 밖에서 안으로 흐름 자극이 있어야만 반응하는 수동성 반응
  19. 19. Iterator Data next()
  20. 20. Observable Data next()
  21. 21. 어떤 체계 간에 존재하는 다음과 같은 논리적 성질. 각각 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용어사전, 한국정보통신기술협회)
  22. 22. 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, …)를 쌍대 명제 라 한다. 전기 회로에서는 표와 같이 대응할 때마다 쌍대성이 존재하여 중 요하다.
  23. 23. event Iterable (pull) Observable (push) 데이터 가져오기 T next() next(T) 에러 처리 throws Exception error(Exception) 완료 !hasNext() complete()
  24. 24. LINQ to Events 이벤트와 LINQ의 개념을 결합한 오퍼레이터(Operator) 제공
  25. 25. Language INtergrated Query 에릭 마이어가 만든 통합 질의 언어 C# 3.0부터 등장 데이터 질의 문법 설탕
  26. 26. //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);
  27. 27. //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);
  28. 28. Your Mouse is a DataBase = Observable + LINQ
  29. 29. Mouse Move Event
  30. 30. 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);
 });
  31. 31. Mouse Move Event
  32. 32. 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);
 });
  33. 33. Subscribe
  34. 34. 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);
 });
  35. 35. Scheduler 비동기(멀티스레드) 환경에서 오퍼레이터 실행 시점 제어
  36. 36. #3 RP와 FRP의 경계에서 함수형 리액티브 프로그래밍(FRP)을 둘러싼 혼란은 어디에서 오는 걸까?
  37. 37. 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
  38. 38. Functional Reactive AnimatioN by Conal Elliott and Paul Hudak, 1997 인터랙티브 3D 그래픽 처리 표현과 모델링의 분리 시간에 따라 변하는 값을 표현(Behavior) 함수형 리액티브 프로그래밍(FRP)의 시작
  39. 39. https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/
  40. 40. https://medium.com/@andrestaltz/why-i-cannot-say-frp-but-i-just-did-d5ffaa23973b#.xtc4pmnco
  41. 41. "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
  42. 42. 개념적인 FRAN, 실질적인 Rx 불연속 값(descret value) 처리 스트림 결합시 일관성 없는 동시 이벤트 처리 발생
  43. 43. 개념적인 FRAN, 실질적인 Rx 불연속 값(descret value) 처리 스트림 결합시 일관성 없는 동시 이벤트 처리 발생 구성성(compositionality) 결여
  44. 44. ones 1 2 hundreds 200 sum 101 202 시간 100
  45. 45. ones 1 2 hundreds 200 sum 101 202 시간 100
  46. 46. ones 1 2 hundreds 200 sum 101 202 시간 102 순간 불일치(glitch) 100
  47. 47. https://wiki.haskell.org/Reactive-banana
  48. 48. #4 웹 프론트엔드, 그리고 RxJS 웹 프론트엔드에서 RxJS는 어떤 의미가 있을까?
  49. 49. 도메인 모델, OOP 설계 KVO(Key-Value Observing)
  50. 50. 양방향 데이터 바인딩 풍부한 디렉티브
  51. 51. 가상 DOM을 이용한 렌더링 순수 함수와 같은 컴포넌트
  52. 52. 순수 함수 조합 단뱡향 데이터 플로우 신뢰할 수 있는 단일 출처 불변 상태
  53. 53. MVI(Model-View-Intent) 순환 스트림 설계 함수형 프로그래밍
  54. 54. + Reactive + Functional OOP FP
  55. 55. Angular2…? OOP FP 2
  56. 56. But, with RxJS or Redux OOP FP 2
  57. 57. Rx는 FE 개발자에게 좋은 자극제 Elm에서 영감을 얻은 Redux, Cycle.js 다른 진영 또는 클래식한 기술에서 새로운 통찰을 경험
  58. 58. 그래서 Rx는, 비동기 처리 해법으로 탄생 Observable + LINQ + Scheduler RP and Functional, But Not FRP 비동기, 데이터 동기화의 중요성과 함께 부각 웹 프론트엔드 개발자의 사고 확장에 도움
  59. 59. 감사합니다

×