Twitter製フレームワーク「Flight」
そのコンポーネントとは?

Twitter製フレームワーク「Flight」<br />そのコンポーネントとは?

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

目次

  1. 学習目標
  2. Flightについて
  3. コンポーネントについて
  4. ライブコーディング
  5. まとめ

学習目標

  • Flightってこんな感じなんだ。
  • なるほどコンポーネントってそういう事ね。
  • Flightちょっと試してみよっかな。

Flightについて

  • “軽量”なフレームワークです。
  • “振る舞い”をDOMノードにマッピングする仕組みを持ちます。
  • “イベント”によってコミュニケーションを行います。
  • “コンポーネント”ベースです。

コンポーネントについて

  • RequireJSを利用した“モジュールです”。
  • “AMD”フォーマットで記述します。
  • ノードに付与したい振る舞いが実装されます。

コンポーネントについて

define(
    [
        'components/flight/lib/component' // コンポーネントモジュール
    ],
    
    function (defineComponent) {
        return defineComponent(myComponent);
        function myComponent() { // コンポーネントコンストラクタ
            this.defaultAttrs({
                // デフォルト属性値
            });
            this.after('initialize', function () {
                // 初期化処理
            });
        }
    }
);

ライブコーディング

Counterコンポーネントを作成してみます。

必要なライブラリは

  • flight
  • jquery
  • es5-shim
  • requirejs

まとめ

  • Flightの核となるのは“コンポーネント”
  • “コンポーネント”はAMDフォーマットで記述
  • “attachTo()”でコンポーネントをノードへ付与
  • “trigger()”“on()”でイベントにより通信