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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flight入門

2,228

Published on

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

No Downloads
Views
Total Views
2,228
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. 質疑応答

×