Flight入門
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Flight入門

on

  • 2,822 views

 

Statistics

Views

Total Views
2,822
Views on SlideShare
2,807
Embed Views
15

Actions

Likes
4
Downloads
7
Comments
0

2 Embeds 15

https://twitter.com 14
http://www.mefeedia.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flight入門 Presentation 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. 質疑応答