비동기와�이벤트�기반�프로그램을�작성하는�데�필요한�Observable�시퀀스�처리�라이브러리
Rx
2005 현재
2007,��Volta
2009,��RX.NET
2010,��RXJS
2012,��오픈소스�공개
2013�RxJava
“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�
목차
1.�Rx를�지탱하는�세�가지�키워드�2.�요즘�들어�왜�자주�보일까?�
3.�함수형�리액티브�프로그래밍�
4.�웹�프론트엔드,�그리고�RxJS
#1�
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�inputs�
-�On�the�development�of�reactive�systems,�1985�-�
http://dl.acm.org/citation.cfm?id=101990
자극은�밖에서�안으로�흐름�자극이�있어야만�반응하는�수동성
반응
Iterator Datanext()
Observer Datasubscribe()
어떤�체계�간에�존재하는�다음과�같은�논리적�성질.�각각�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용어사전,�한국정보통신기술협회)�
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,�…)를�쌍대�명제라�한
다.�전기�회로에서는�표와�같이�대응할�
때마다�쌍대성이�존재하여�중요하다.
eventIterable�(pull)
Observable�(push)
데이터�가져오기 T�next() next(T)
에러�처리 throws�Exception error(Exception)
완료 !hasNext() complete()
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; //Method syntax: IEnumerable<int> numQuery2 = numbers .Where(num => num % 2 == 0) .OrderBy(n => n);
//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);
Your�Mouse�is��a�DataBase=�Observable�+�LINQ
Mouse�Move�Event
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); });
Mouse�Move�Event
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); });
Subscribe
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); });
Scheduler비동기(멀티스레드)�환경에서��
오퍼레이터�실행�시점�제어
#2�
요즘�들어,�왜�자주�보일까?Rx만�잘난�것도�아닌데�
왜�굳이�Rx?�
https://medium.com/reactive-programming/what-is-reactive-programming-bc9fa7f4a7fc#.ddo2ci9wx
Reactive�Manifesto�http://www.reactivemanifesto.org/
Responsive
Elastic Resilient
Reactive�Manifesto�http://www.reactivemanifesto.org/
Responsive
Resilient
Message-Driven
Elastic
callback�promise�generator�async/await�…
(Compositionality)
구성성
춘향은�잠에서�퍼뜩�깼다
춘향�/�은�/�잠�/�에서�/�퍼뜩�/�깼다
춘향�/�은�/�자-/�ㅁ�/�에서�/�퍼뜩�/�깨-�/�었-�/�다
1
2
3
http://labs.bench.co/blog/2014/12/10/microservices-at-bench-intro
https://www.kirupa.com/react/components.htm
Functional�+�Rx
복잡�->�분리�->�결합
동시성 구성성
sum�=�a�+�b
sum�=�a�+�b
a와�b의�합을�sum에�할당?
sum�=�a�+�b
정체성,�관계�정의
a
b
sum
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
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
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
#3�
함수형��리액티브��프로그래밍(FRP)함수형�리액티브�프로그래밍(FRP)을��
둘러싼�혼란과�진실
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�
Functional��Reactive��AnimatioNby�Conal�Elliott�and�Paul�Hudak,�1997�
인터랙티브�3D�그래픽�처리�
표현과�모델링의�분리�
시간에�따라�변하는�값을�표현(Behavior)�
함수형�리액티브�프로그래밍(FRP)의�시작
http://images.slideplayer.com/26/8448601/slides/slide_4.jpg
wiggle�=�sin(pi�*�time)
wiggle�=�sin(pi�*�time)
Behavior
moveXY(x,�y,�image)
moveXY�wiggle�0�image
charlotte�=�importBitmap�"../Media/charlotte.bmp"�moveXY�wiggle�0�charlotte
http://conal.net/fran/tutorial.htm
leftRightCharlotte�=�moveXY�wiggle�0�charlotte�upDownPat�=�moveXY�0�waggle�pat�
charlottePatDance�=�leftRightCharlotte�`over`�upDownPat
https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/
"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
const result$ = Rx.Observable .combineLatest(a$, b$) .map(values => { values.reduce((acc, cur) => acc + cur) });
불연속�값(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
Rx�=�반응성�-�시간Rx는�동시성을�매개변수화하여�
쌍대성을�이용하여�현실적인�대안을�제시
http://csl.stanford.edu/~christos/pldi2010.fit/meijer.duality.pdf
eventIterable�(pull)
Observable�(push)
데이터�가져오기 T�next() next(T)
에러�처리 throws�Exception error(Exception)
완료 !hasNext() complete()
None�BlockingBlocking
#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
주변을�둘러�보시라Elm에서�영감을�얻은�redux,�cycle.js�
다른�진영�또는�클래식한�기술에서�새로운�통찰�획득�
Rx는�좋은�자극제
정리비동기�해법으로�탄생�
Observable�+�LINQ�+�Scheduler�
RP�and�Functional,�But�Not�FRP�
복잡도�증가�->�분리�->�결합�
핵심은�구성성(Compositionality)�
새로운�패러다임이�주는�자극
감사합니다
Top Related