Twitter Flightを使ってみました。　〜導入編〜

最近はJavaScriptが凄い事になってます。
ということで、現場でTwitterのFlightを試してみました。
そもそもFlightって何かと言うと、各HTMLの部品をコンポーネント化して動作をJavaScriptとして動かすもののようです。
とにかく文献が殆ど英語で手こずったので、初めての人向きに紹介します。

まず、インストールですが・・・。
bowerと言うパッケージ管理ソフトで簡単に入れれるのですが、、、これを入れる為にはnpmとかを入れなければならないので面倒な方はdemoサイトからソースを取ってきた方が良いです。
（※実際の動作デモはこちら）
僕は業務でガリガリ使うのでしっかりパッケージから入れてgruntとかとも組み合わせて、かなり強化された環境を作りましたが試すだけの方は本当にdemoのソースをダウンロードする程度で十分構築が出来ます。
demoからダウンロードしたフォルダ構成は以下になります。

[app]・・・demoのアプリケーションフォルダになります。
[component]・・・bowerでインストールしたのと同じものがはいります。（これがフレームワークになってるので使うだけで触りません。）
componet.json・・・bowerでインストールするための定義ファイルです。
index.html・・・demoサービスで使用するHTMLです。
requireMain.js・・・JSのrequireを制御します。demoでは使用してません。

大体こんな感じになります。
もし自分のサイトをFlightで構築したい場合は「app」フォルダの中全てと「index.html」を書き換えれば使えるようになります。

ちなみにappフォルダ構成は以下になります。

[boot]・・・ページ呼び出し時に起動させるJSを格納します。
[component_data]・・・データを扱うコンポーネント郡を格納します。
[component_ui]・・・UIを扱うコンポーネント郡を格納します。
[css]・・・cssを格納します。
data.js・・・このデモで使用するメールやアカウント情報を擬似的に保持してます。
templates.js・・・このデモで使用する部分テンプレートが格納されています。

Flightは

<a id="test">test</a>

等のタグをコンポーネントと見立てて、このタグとJSのUIコンポーネントを紐づける事で動作しています。
具体的にデモの中身をみていきます。
デモのTOPにある「index.html」の一番下を見てください。

<script src="components/jquery/jquery.js"></script>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/es5-shim/es5-sham.js"></script>
<script data-main="requireMain.js" src="components/requirejs/require.js"></script>

<script>
require(
 [
  'components/flight/lib/compose',
  'components/flight/lib/registry',
  'components/flight/lib/advice',
  'components/flight/lib/logger',
  'components/flight/tools/debug/debug'
 ],

function(compose, registry, advice, withLogging, debug) {
 debug.enable(true);
 compose.mixin(registry, [advice.withAdvice, withLogging]);
 require(['app/boot/page'], function(initialize) {
  initialize();
 });
}
);
</script>

と言う記述があります。
es5-shim.jsやes5-sham.jsはFlightのJSを呼び出しているものになります。
require.jsはJSの依存関係等を意識してrequireする際に使用してください。
注目すべきは

require(['app/boot/page'], function(initialize) {
  initialize();
});

の部分です。
実は他の書き方ものあるのですが、ここでbootのpageを呼び出しています。Flightの第一歩はここから始まります。

※ここで直接コンポーネントとUIを結びつけてもOKです。
※requireMainに書くと言うの一応ありです。

長くなったので続きは次回に回します。

Twitter Flightを使ってみました。 〜導入編〜

Twitter Flightを使ってみました。　〜導入編〜