Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flight入門

2,849 views

Published on

  • Be the first to comment

Flight入門

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

×