読者です 読者をやめる 読者になる 読者になる
月 の 上

React/fluxで動画サンプラー書いてみた

Reactでビデオサンプラー作ってみた

http://gmork.in/RVD/

fand/RVD · GitHub

使い方は↓


RVD tutorial - YouTube

16進数4文字で一小節のパターン指定する。
4小節までできる。

  • 四つ打ち: 0x8888
  • 16分連打: 0xFFFF
  • BAD APPLE!のイントロ: 0x888F888A 0x888F8888

Reactの感想

ReactはDOMをJSXで書くんだけど、書きたくないじゃん?
平易なJSで書くために、react-kupなどのラッパーがある。
今回は、もっと楽がしたかったので、自分でspacepenっぽいラッパー書こうとしたけど無理そうだった。
結局、JSX、一人で書く分にはそんなに悪く無いと思い始め、JSXで書いた。

パフォーマンスなどは知らん。
もっとDOMをたくさん生成するフィードリーダーとかじゃないとわからないと思う。

イベントの書き方とか決めてくれるので、書くのは楽。

flux

ReactはMVCのV相当だけど、Reactを主軸に据えた設計パターンとしてfluxってのがある。 今回はfluxのtutorialやって、それ見ながら実装した。

http://facebook.github.io/flux/

Action, Store, Dispathcher, Componentって単位で実装していく。

  • Action: eventを発行する方法
  • Store: BackboneでいうModel, Collectionの役割 実際Controllerっぽい事もする
  • Dispatcher: イベントがどこ由来なのかを管理

という感じ。 イベントの管理にはEventEmitterを使ってる。

globalなイベントをどこからでも発行できると大変なので、fluxではActionでイベントのインターフェイス??的なものを決めて、他の所ではActionを呼ぶ。 たとえばTodoのViewから他のTodoになんかしたいとき、Todo -> Action -> (Dispatcher) -> Store -> Todo という事になる。 コード量は割と増える。

flux、どこみても「MVCを誤解してる」とか叩かれてるし、お通夜感ある。
Reactだけ普及できればいいけど、DOMをJSファイルに書かないといけないReactがどこまで普及するか分からない。
Reactみたいな仮想DOMを使うアプローチ、ElmとかMercuryで使ってるらしい。
Mercuryよさそう、普及してほしい。
(参考: http://efcl.info/2014/08/28/mercury/)

成果物について

  • 既存の何かをReactに移行するのはめっちゃダルそう
  • videoタグ重いのか、setTimeoutでパカパカ動かすのは厳しいことがわかった
  • videoパカパカするのoFとかじゃないとだめか…