amok.js 에서 RxJS와 coffeescript 사용하기

amok은 live reload 가 가능해서 개발을 즐겁게 한다. 프로토타이핑할때 아주 좋다.
RxJS 라이브러리를 받고 index.js 도 만들자.

curl https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-beta.12/Rx.min.js > Rx.min.js
touch index.js index.coffee

package.json 을 만들어 놓으면 편하다.
npm init 을 해서 엔터 연타하고 script 부분만 수정하자

{
  "name": "rxamok",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "amok --browser chrome --interactive --hot Rx.min.js index.js"  },
  "author": "",
  "license": "ISC"
}

이러면 준비 끝.
amok 에서 coffeescript를 compile 하는 옵션이 deprecated 되었다고 한다.
하지만 걱정할 것 없다.
저장할때마다 자동으로 coffeescript를 컴파일 할 수 있다.

coffee -wco ./ *.coffee

해놓고 편하게 코딩하자.

rate = 1000/60
c = document.createElement 'canvas'
c.style.position = 'absolute'
c.style.top = '0'
c.style.left = '0'
resize = ->
  c.width = window.innerWidth
  c.height = window.innerHeight
resize()
document.body.appendChild c
ctx = c.getContext '2d'
window.addEventListener 'resize', resize
Rx.Observable.interval rate
.subscribe (frame)->
  ctx.fillStyle = '#000000'
  ctx.fillRect 0, 0, c.width, c.height
  ctx.fillStyle = '#ffffff'
  ctx.fillText "frame: #{frame}", 40, c.height-40

테스트용으로 이렇게 입력하고 subscribe 안쪽을 수정해보자.

저장할때마다 브라우저 상태를 유지한 채로 변경사항이 적용되는 것을 볼 수 있다.

# 비디오 필요 #