29092012 javascript Spine
クライアントサイドフレームワークbrunchでアプリを作ってみたが面白かったので、Spine.jsで書いてみた。
jQueryUIをslug.jsonに含めるとjQueryが定義されてないというエラーになるので、application.jsを実行した後に読み込んでいる。
resizeイベントにバインドすると固まるのでデモではサイズの状態が保存されないようにしているが、ドキュメント見てたらresizeStopにバインドすればいいような気がしてきた。というわけでjQueryUIとの連携のさせ方もわかった。
ほかにCSSまわりのTipsも勉強になった。cursorプロパティ初めてなのとinline-blockの使いどころとか。もっとCSS覚えなきゃならないことも理解した。
27092012 javascript Spine
Spineを使いそうな案件が増えそうなので、ちょっと復習でもしておくかなと前にやったサンプルを動かしてみたらなぜか動かなかった。
結構な時間を費やしたのち、slug.jsonのjquery.tmplを消せば良いと気づいたのだけど、hem serverはエラーを吐かずに動き続けるので気付かなかったのだけど、おもむろにhem buildをしたところ、エラーが出てきたので解決したのだけど、ココらへんはちょっと不親切かもと思った。
spineはまだまだドキュメントも少ないしサンプルも少ないので試行錯誤を強いられるけど、コードの見通しは良いと思う。僕はCoffeeScript好きなので。
Spineはサンプルとかドキュメントがまだまだ少ないので苦労することが多い。sofにも質問が70位しか投稿されてないしね。
Backbone-HangmanっていうSinatra+Backbone.jsで書かれたよさげなサンプルがあったので、これをSpine+Flaskで書きなおしてみた。Flaskのほうはさくっと終わったんだけど、Spineで書きなおすのに1週間以上かかってしまった。
今思うと、Spineがわかっていないというよりは、イベントドリブンなコードの読み方がちゃんとわかっていなかったんだろうと。モジュールごとに読んでも混乱するだけで、イベントごとにちょっとづつ組み立てていかなきゃあかんわなと。そういえば、backbone.jsのチュートリアルもそんな感じだったし。
spine.appはディレクトリが存在するとappオプションで作成できないので適当なディレクトリでスケルトンを作成して中身をmvした。それからFlaskのstaticにbuildされるようにslug.jsonにpublicを追加
"public": "./static", "dependencies": [ "es5-shimify", "json2ify", ...
放置したものはテストのやり方。モデルはまぁ分かるんだけどコントローラーのテストは一度やっておく必要がある。console.logのデバッグは疲れる。
15042012 Python javascript Flask Spine
SpineのtodoサンプルをSpine.appを使って書いてみた。これはBrunch(Backbone.js)みたいに、モデル、ビュー、コントローラーをバラバラに開発してbuildすると一つのjsファイル(cssも)にアセンブルしてくれるツールですね。テンプレートはecoを使っています。
index.coffeeの役割がわかりづらかったので理解するのにちょっと時間がかかった。
hem model task
とかやるといっしょにテストのひな形が作られるのとlocalhost:9294/testにアクセスすればjasmineのテストが走るようになっているので使いやすそう。
そして以下の素晴らしい三部作を読んでSinon.jsの便利さに目覚めたので積極的に使っていこうと感じた。
Spine.Model.AjaxつまりRESTのAPIはFlaskを使おうと思っているんだが、Flask-Restlessを利用するのが手っ取り早くていいかなぁと。
ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理