ライトノベル「ヒッチコックの憂鬱」
Androidのアップグレード問題に関してひとこと

SNBinderと「混ざり物のないコンソメスープ」と

先日オープンソース化したSNBinder(参照)、たくさんの人たちから色々なフィードバッックをいただけてとても感謝している。ブログの記事として書かれたものは私が知る限り以下の三つ。

当初は、最新のjQueryと動かないというバグがあったり、READMEにタイポがあったりとご迷惑をおかけしてしまったが、こうやってフィードバックをいただくことによって、励みになったり改良したり、というのがオープンソースの醍醐味である。とてもありがたい。

ちなみに、SNBinderは原型のようなものは1年前以上前からあったのだが、ViewとControllerの切り分けに部分がなかなかすっきりせず、公開を控えていた。今年になって、fruence.comを実装している時に「named template(名前付きテンプレート)」の手法を思いつき、いざ実装してみると「なんでこんな自明の答えにもっと前にたどりつかなかったんだ?」と思えるぐらいのシンプルさ。スティーブン・キングが小説を書く際に大切にしているのは「(自分が書きはじめ設定した)キャラクター自身にあるがままの行動や発言を決めさせること」と書いていたが、プログラミングに関しても同じことが言える。

上の3番目のブログ・エントリー「SNBinderに目からウロコ...」の作者にはそのあたりが伝わったようで、こんなコメントをいただいている。

NSBinderは、DOM要素ごとに、テンプレートファイルから部品を取り出し完全にJSのコントロール下でHTMLパーツを配置していきます。例えていうと、パレットから必要な色を取り出しキャンバスを彩る油絵の如く、テンプレートファイル内から必要な部品を取り出し必要な場所に出したり消したりして画面を構築します。

JS内にテンプレート(HTML)要素が混ざることもないし、テンプレート(HTML)内にJS(ロジック)が混ざることもない。銀座かわむらのコンソメスープのごとく一切混ざり物なしでソースをクリーンな状態に保つことが出来そう。

(中略)

SNBinderでもっとも関心したところのtemplate.html。このファイルには、ページ内の要素をプリミティブな要素まで分解した一つずつがバラバラに記載されている。そして、JS側で表示させたいDOMに対してbindメソッドでプリミティブな要素を呼び出し突っ込んでレンダリングする。

このテンプレートを含めJSも全てクライアントサイドで動くことになるので、サーバー上のフレームワークで毎週のように言われている「どのテンプレートエンジンが速いのか?」といった話題に全く影響を受ける事がない。さらに、HTMLコードと何をレンダリングすべきか考えるコントロールのJSが、綺麗に分割されている。コレがまた気持ち良い。

このエントリー一つ書いていただけだだけで、SNBinderをオープンソースにした価値があるというもの。こんな風に、設計思想の部分まで理解して使っていただけるというのは本当にうれしい。

ちなみに、世の中にはテンプレート・エンジンはたくさんあり、その中にはテンプレートの中に条件分岐が書けたり、スクリプトを埋め込めるという高機能なものまでがある。しかし、私には本末転倒だと思えるのだが、そんなことを思うのは私だけだろうか。複雑なロジックの実行はすべてスクリプト側(つまりController側)で行い、テンプレートはあくまで見た目(View)を記述するだけ、というのがあるべき姿(つまり、混ざり物のないコンソメスープ)だと思うのだがいかがだろうか?

 

Comments

Kokorohamoe

おそらく 英語で考えられて 日本語に和訳するときの翻訳ミスか意図的だと思われますが
コンソメは複雑な混ぜ物であるので 混ざり物のないコンソメは製法上つくることが難しいと思われます。
 
おそらく、枕詞は 透き通った だと思われます。

LONGROOF

まずはとにかく触ってみます!
@Kokorohamoe さんは3つ目のエントリー「a2c.get.diary: SNBinderに目からウロコ 小さなMVCが今現実に」をせめて一読されてから。
銀座かわむらのコンソメスープが透き通ったものか混ざり物のないものなのかは存じませんが、
少なくとも引用元は"銀座かわむらのコンソメスープのごとく一切混ざり物なし"というjsとhtmlとが混在しないことを表現されたものですね。

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)