Your SlideShare is downloading. ×
Flight入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Flight入門

2,138
views

Published on


0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Flight入門株式会社ブリリアントサービス 八木 俊広 2013年3月1日
  • 2. 自己紹介 所属:品川事業所カスタマー開発部 名前:八木俊広 Twitter: @sys1yagi 最近:  mrubyちょいやっている流れでMobiRubyをちょ いやってる。キャー@masuidriveさ~ん。  Node.jsで人工無脳作ってる  わかめに言われてFlightに入門中
  • 3. アジェンダ Flightってなに? Flightの特徴 デモアプリ Flightの導入 Flightの使い方 まとめ
  • 4. 対象読者 @vvakame
  • 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  bootstraphttps://github.com/sys1yagi/flight_sample
  • 18. 構造 大体以下の様に構成を分けてる Flight様 データ操作、通信周りのコンポーネント 画面のDOMのアタッチ等を行う UI操作用のコンポーネント
  • 19. Flightの導入 まずBower component.jsonを書く bower install 必要なscriptを読み込ませる
  • 20. Bower?
  • 21. component.jsoncomponent.jsonに書いたdependenciesをインストールしてくれる
  • 22. 必要なjsを読み込む※↑はjadeの構文です。普通に<script>とかでももちろんおっけー
  • 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. triggertodo_list_controller.js 登録load_list.js 実行
  • 28. mixin module作ってがっちゃんこ
  • 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する処理を書く
  • 32. 続きはWebで!https://github.com/sys1yagi/flight_sample
  • 33. 質疑応答