spectrum learns to dig

http://reactivex.io/rxjs/manual/tutorial.html  글을 대충 번역해서 쓰는 글입니다. jsbin/codepen 같은 곳에서 RxJS 라이브러리를 추가한 후 연습해봅시다. 현재 가장 최근 버전은  https://cdnjs.com/libraries/rxjs/5.0.0-rc.1  에서 확인하세요. Observable 로 변환하기 하나 혹은 n 개의 값으로부터 Rx.Observable.of('foo', 'bar'); =>foo =>bar 배열로부터 Rx.Observable.from([1,2,3]); =>1 =>2 =>3 이벤트로부터 Rx.Observable.fromEvent(document.querySelector('button'), 'click'); =>button을 누를 때 마다 event로 변환 Promise로부터 Rx.Observable.fromPromise(fetch('/users')); =>/user 주소의 내용을 fetch한 것을 변환 마지막 인자가 콜백인 경우 콜백으로부터 /* node.js */ var exists = Rx.Observable.bindCallback(fs.exists); exists('file.txt').subscribe(exists => console.log('Does file exist?', exists)); var rename = Rx.Observable.bindNodeCallback(fs.rename); rename('file.txt', 'else.txt').subscribe(() => console.log('Renamed!')); Observable 만들기 외부로부터 새로운 이벤트를 생성한다. var myObservable = Rx.Subject.create(); myObserv...

http://jsbin.com/geqige/edit?js,console,output 선 소스. ( 조금 더 자세한 구현 :  http://jsbin.com/ziraga/edit?html,js,output ) 먼저 Drag and Drop이라는게 어떤 절차인지 생각해보면 이동하고자 하는 대상에 MouseDown 이동하고자 하는 지점까지 MouseMove 이동하고자 하는 지점에서 MouseUp 하는 세개의 동작을 순서대로 실행하는 것이라 할 수 있겠다. 100,100 위치에 있는 A라는 대상을 200,200까지 Drag and Drop을 하는 과정을 표로 옮기면 시간(seq) 행동 좌표 1 mousedown (150,150) 2 mousemove (150,150) 3 mousemove (160,160) 4 mousemove (170,170) 5 mousemove (..., ...) (n-1)th mousemove (250, 250) (n)th mouseup (250, 250) 과 같은 과정을 수행할 것이다. 눈치챘을지도 모르겠지만 mousemove 구간이 바로 Stream이다! Rx 기준으로 그러면 다시 Drag and Drop을 재정의하면 mousedown 이후 시점으로부터 mouseup이 되기전까지 mousemove 를 Observe 하는 것 인것이다. 그러면 재료를 모아보자. mousedown mouseup mousemove 이 세 개를 Observable 로 만들자.   const down$ = Rx.Observable.fromEvent(box, 'mousedown');   const...

RxJS, BaconJS, Highland, 등등 정말 Stream 전성시대. FRP( Functional Reactive Programming )가 흥하는 시대를 살고 있는 느낌이다. 기존의 Array에 람다 함수들에 시간 개념이 들어간 정도인데 그렇다면 데이터가 이렇게 흘러가고 있다면 어떻게 상태가 변할때 마다 표현할지 고민하는데 그걸 State Store 라는 걸 사용해서 상태의 변화를 Reduce (Rx에선 scan) 하여 반영한다. 가령 기존의 Control Flow 기반 프로그래밍에선 1. 상태 변수를 생성한다. 2. 이벤트가 발생한다. 3. 이벤트 콜백을 실행하여 상태 변수를 갱신한다. 4. 상태 변수를 UI에 반영한다. 였다면 RxJS같은 Data Flow 기반 프로그래밍에선 1. 이벤트를 발행한다. 2. 이벤트를 상태 변화로 변환(map)한다. 3. 2를 reduce 한 스트림을 구독한다. 4. 3의 스트림이 발생할 때마다 UI에 반영한다. 정도의 차이라고 볼 수 있겠다. 그러니까 오늘의 나는 태어날 때의 나부터 어제의 나까지를 리듀스 한 것이라고 (.....) ... 같은 건 없다. (출처: twitter ) http://jsbin.com/bowumar  에 클릭 카운터를 구현해보았다. let $=(e=>document.querySelector(e)); let approach1=()=>{   let clickStream=new Rx.BehaviorSubject(0);   $("#inc").addEventListener('click',e=>clickStream.next(1));   $("#dec").addEventListener('click',e=>clickStream.next(-1));   clickStream.scan((x,y)=>x+y).subscribe(o=>$("#count...

Rx를 하다보니 fiber/future도 새롭게 보인다. 가령 비동기 구간을 setTimeout -> ..... , 1000 으로 하는 구현을 해보자. Rx.Observable.create (observable)->   # callback block   setTimeout ->     observable.onNext "<결과값>"   , 1000 .subscribe (res)->   console.log res 요건 Promise로 풀면 new Promise (resolve, reject)->   # callback block   setTimeout ->     resolve "<결과값>"   , 1000 .then (res)->   console.log res 거의 같은 모양을 하고 있다. 그 fiber/future로 풀면 doSomeAsync = ->   future = new Future()   setTimeout ->     future.return "<결과값>"   ,1000   future.wait() console.log doAsync() 핵심은 동기에서 return 에 들어갈 부분이 대체되고 그걸 외부에서 받는 부분이랑 한 쌍을 구성한다는 점인데 future는 c coroutine library 인 libcoro( https://github.com/ramonza/libcoro )를 사용하고 있다.  사실 coroutine만 해도 c에서 구현만 http://www.chiark.greenend.org.uk/~sgtatham/coroutines.html  이렇게 다양한데. ECMA6 (coffeescript 1.10.0)...