웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

웹 프론트엔드 개발자의
얕고 넓은 Rx 이야기
김훈민, NAVER 스마트에디터 3.0
http://huns.me

비동기와 이벤트 기반 프로그램을 작성하는 데 필요한
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 ...

목차
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 input...

자극은 밖에서 안으로 흐름
자극이 있어야만 반응하는 수동성
반응

Iterator Data
next()

Observer Data
subscribe()

어떤 체계 간에 존재하는 다음과 같은 논리적 성질. 각각 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
비동기(멀티스레드) 환경에서
오퍼레이터 실행 시점 제어

#2
요즘 들어,
왜 자주 보일까?
Rx만 잘난 것도 아닌데
왜 굳이 Rx?

https://medium.com/reactive-programming/what-is-reactive-programming-bc9fa7f4a7fc#.ddo2ci9wx

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

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.val...

const a = document.getElementById('a'); 
const a$ = Rx.Observable 
.fromEvent(a, 'keyup') 
.map(e => parseInt(e.target.val...

const a = document.getElementById('a'); 
const a$ = Rx.Observable 
.fromEvent(a, 'keyup') 
.map(e => parseInt(e.target.val...

#3
함수형
리액티브
프로그래밍(FRP)
함수형 리액티브 프로그래밍(FRP)을
둘러싼 혼란과 진실

It is sometimes called “functional reactive
programming” but this is a misnomer.
ReactiveX may be functional, and it may b...

Functional
Reactive
AnimatioN
by Conal Elliott and Paul Hudak, 1997
인터랙티브 3D 그래픽 처리
표현과 모델링의 분리
시간에 따라 변하는 값을 표현(Behavior)...

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 `ove...

https://prezi.com/rfgd0rzyiqp_/controlling-time-and-space/

"Original FRP" refers to
denotational and
continuous-time
functional programming
using behaviors
and events.
https://githu...

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

event
Iterable
(pull)
Observable
(push)
데이터 가져오기 T next() next(T)
에러 처리 throws Exception error(Exception)
완료 !hasNext() co...

#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)
새...

감사합니다

YouTube videos are no longer supported on Slideshare

View original on YouTube