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