flight入門
TRANSCRIPT
Flight入門株式会社ブリリアントサービス八木俊広 2013年3月1日
自己紹介
所属:品川事業所カスタマー開発部
名前:八木俊広
Twitter: @sys1yagi
最近:
mrubyちょいやっている流れでMobiRubyをちょいやってる。ｷｬｰ@masuidriveさ～ん。
Node.jsで人工無脳作ってる
わかめに言われてFlightに入門中
アジェンダ
Flightってなに?
Flightの特徴
デモアプリ
Flightの導入
Flightの使い方
まとめ
対象読者
@vvakame
Flightってなに?
Twitter社が提供しているWebのフロントエンド用フレームワーク
Twitter社で使われているらしい
https://github.com/twitter/flight
Flightの特徴
コンポーネントベースだ
イベントドリブンだ
何がおいしいか
こういう時はつらそう
コンポーネントベースだ
DOM Component
DOM
DOM Component
attach
attach
attach
Module
mixin
HTML界 JS界
コンポーネントベースだ
DOM Component
DOM
DOM Component
attach
attach
attach
Module
mixin
HTML界 JS界
互いに疎
イベントドリブンだ
ComponentDOM1 1
DomとComponentは1:1の関係。
ComponentはDomへの参照を持つ
イベントドリブンだ
ComponentDOM1 1
Button
clickblur
Componentでイベントコールバックを登録
イベントの処理を行う
on(“click”, function);on(“blur”, function);
イベントドリブンだ
ComponentDOM1 1
ComponentDOM1 1
Button
clickblur
DIV
超えられない壁
結果を他Componentにも渡したい
イベントドリブンだ
ComponentDOM1 1
ComponentDOM1 1
Button
clickblur
DIV
超えられない壁
trigger(“onChangeData”, data);
on(“onChangeData”, function);
イベントドリブンだ
Component
Component
clickblur
trigger(“onChangeData”, data);
on(“onChangeData”, function);
Component
on(“click”, function);on(“blur”, function);on(“changedSchedule”, function);
trigger(“changedShcedule”, schedule);
Domイベントの他独自にイベント定義が可能。イベントの送受信でComponent間はやりとりを行う。
イベントドリブンだ
Component
Component
clickblur
trigger(“onChangeData”, data);
on(“onChangeData”, function);
Component
on(“click”, function);on(“blur”, function);on(“changedSchedule”, function);
trigger(“changedShcedule”, schedule);
Domイベントの他独自にイベント定義が可能。イベントの送受信でComponent間はやりとりを行う。
互いに疎
何がおいしいか
DomとComponentが互いに疎
機能をコンポーネント単位で設計する。依存関係、責務についての意識高まる
イベント連携で疎結合。テストもしやすそう
実装方法が統一されている。
再利用性!
こういう時つらそう
コンポーネントで定義されているattrやtriggerをドキュメント化とかしてないと大変そう
動的にappendしたElementをコンポーネントにattachするのがめんどい
アプリケーションのコンテキストに依存したコンポーネントを作りがちなので設計がむずい
デモアプリ
Node.js+express+jade+mongoose
MongoDB
Flight
jQuery
requirejs
es5-shim
bootstrap
https://github.com/sys1yagi/flight_sample
構造
大体以下の様に構成を分けてる
Flight様
データ操作、通信周りのコンポーネント
UI操作用のコンポーネント
画面のDOMのアタッチ等を行う
Flightの導入
まずBower
component.jsonを書く
bower install
必要なscriptを読み込ませる
Bower?
component.json
component.jsonに書いたdependenciesをインストールしてくれる
必要なjsを読み込む
※↑はjadeの構文です。普通に<script>とかでももちろんおっけー
Flightの使い方
コンポーネントを作る
attachToでDOMにアタッチ
ね、かんたんでしょ?
trigger
mixin
advice, compose,debbug(まださわってない)
コンポーネントを作る
requirejsのdefineメソッドを使ってコンポーネントを定義します。
依存するモジュール。ここではFlightコンポーネントの定義なのでflight/lib/componentを読みこんでいる
モジュールロード完了のコールバック、コンポーネント定義を初期化して返す。
コンポーネントが持つデフォルト属性。attachToの時渡せる
コンポーネント内のメソッド
イベントを発行してる。他コンポーネントが受け取るかも
DOMのアタッチが終わった後に呼び出される。onClickをthis.setNameで実行する様に登録してる。
set_name.js
attachToでDOMにアタッチ
コンポーネントを読み込む
アタッチ対象のセレクタ
コンポーネントにセットする属性
ね、簡単でしょ?
trigger
todo_list_controller.js
load_list.js
登録
実行
mixin
module作ってがっちゃんこ
mixin
モジュールを読み込む
Mixin!
モジュールのメソッドが使える
blurイベントの処理はui_controller側で勝手に登録してる
advice, compose, debbug
advice
なんか既存メソッドの前後に実行するメソッドを登録出来るらしい
compose
mixin実現の為に内部で使われているモジュール。mixin書き換えとかにも使えるらしい
debbug
triggerとかattachとかのシーケンスをログに出したり、色々
まとめ
Flightいいよ!
疎結合!
再利用性!
Flightの3ステップ
1.コンポーネント作る
2.HTML書く
3.attachToする処理を書く
続きはWebで!
https://github.com/sys1yagi/flight_sample
質疑応答