第一回太一にモダンJSを教える会 - 設計と実装の狭間で。

と言う会が品川某所で、2011/10/05にヒッソリと開催されました。
お客様は主催者たる僕のみで、それ以外の参加者は基本的に講師という大変贅沢な会です。
それなりに話はあっちこっちしていたし、
話題に上がった重要そうな部分で、僕が覚えている事を補足しながらメモ書き。

妥当でない部分があったので、変更。

スケールするUI(by @monjudoh)

イベントを遅延ディスパッチする。ドラッグ＆ドロップは実装が難しいかも。

イベントリスナは、より広い範囲で受ける。
例えば、一覧データなら、カラム内で受けるより、行で受ける方が良いし、それよりもテーブルで受ける方が良い。
これにはいくつか理由がある。
- 動的にデータが変更される中でイベントリスナの配置漏れによって適切に動作しない様なケースを避ける。
- ~~イベントリスナのオブジェクトのインスタンス数を減らす。~~
- イベントリスナは登録処理が重いのでその回数を減らす。*1
- イベントの発火は巨大なforループなので、イベントの伝搬処理のコストを落とす。

Pjaxを使う場合、同じ結果になるテンプレート処理をクライアントとサーバでそれぞれ用意する必要がある。
mustache を使えば同じテンプレートをクライアントとサーバで共有出来る。極めて多くの言語で実装がある。
但しロジックをテンプレート内に記述出来無いので使い辛いかもしれない。
http://mustache.github.com/

Closure Templatesもまたクライアントとサーバでテンプレートを共有出来る。
但し、サーバはJavaかJSに限定される。
http://code.google.com/intl/ja/closure/templates/

DOMの構築をJSでどこまでやるのかをある程度きちんと決める事が大事。
要は、bodyタグの中にどれだけDOMエレメントを記述するのか？
Jsが動いていないcssとhtmlだけの状態で、どれだけの情報を人間が読み取る事が出来る状態にするのか？と言う事。
例えば、Ext.jsを使うとdivタグ一つだけになったりする。JSが動いていなければ、最悪画面には何も表示されない。
Closure Libraryの場合、どちらでも出来る。decorateするなら元のDOMを生かしつつ振る舞いだけ足す事が出来る。
jQueryはDOMスクリプティングする為のDSLと捉え、全てをjQuery上で賄うと考えない方が幸せになれる。
Closure LibraryのDOMをクエリする部分や属性を変更する部分だけjQueryを使う等と考えてはどうか？(要検証)