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.

goog.ui.Component のはぐれかた

5,364 views

Published on

  • Dating for everyone is here: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

goog.ui.Component のはぐれかた

  1. 1. goog.ui.Componentのはぐれ方 アリエル・ネットワーク開発部 高村
  2. 2. 私 高村壮一(@stakamur)HTMLとCSSをひたすら書く ↓ jQuery ↓ vimとのであい ↓ Closure Library ↓こないだから Sencha Touch ..開発部UIチームで働いています
  3. 3. github projectspiglovesyou / flickGal (jQuery)piglovesyou / closure-scrollerpiglovesyou / closure-thousandrows
  4. 4. yan-yan-yahuoku.com・・・あとは、Closure Library を使って作ったウェブサービスを、最近公開しました。ヤンヤンヤフオクといって、ヤフオクの大量の商品を、軽い動作で一覧できるのが特徴です。このサービスを作る前に、ひとつ試したいことがありました。それが、
  5. 5. goog.ui.Component インスタンスを 徹底的にツリー化しよう・・ということです。
  6. 6. /** @constructor */ app.ui.Component = function () { goog.base(this); var child = new app.ui.Another(); this.addChild(child); }; ...ツリー構造とは、画面の各構成部分を全てui.Componentで管理させた上での、それらの親子関係のことです。
  7. 7. app child childchild child
  8. 8. ツリー化することは、 とくべつなアイデアではない。むしろ、Closure LibraryにはaddChildなどのメソッドがあることから、奨励していると思う
  9. 9. http://tiny-word.appspot.com伊藤 千光さん が書かれた、Closure 本のデモでも、コンポーネントのツリー化を基礎に設計されています。
  10. 10. ツリー化は、基本。(例外はやまほどあるだろう)
  11. 11. しかし、ツリー構造を作りにくいときも・・ルールがあるところに例外はつきもの。ルールから外れたときこそ、フレームワークの真価が問われる。そこで、今日お話したいのは、・・・
  12. 12. 前半:なぜ、goog.ui.Componentを 後半 ツリー化すべきなのか?
  13. 13. tを 後半:goog.ui.Componentのはぐれかた? ツリー化する上での例外ケース3種類
  14. 14. 前半:なぜ、goog.ui.Componentを ツリー化すべきなのか?
  15. 15. はじめに:goog.ui.Componentの簡単な説明ui.Component は、UIモジュールです。
  16. 16. http://closure-library.googlecode.com/svn/docs/class_goog_ui_Component.htmlクラス関係です。
  17. 17. http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/index.html
  18. 18. インターフェース
  19. 19. var component = new app.ui.Component(); component.render();インターフェースです。どこかのコードで、こう書くと、componentは自分でelementを作り出し、同時にdocument.body 配下にelementをappendします。
  20. 20. var component = new app.ui.Component(); var el = goog.dom.getElement(‘component-wrapper’); component.decorate(el);似た機能で、decorate があります。elementのcreateとappendのコストをはぶけ、パフォーマンスの向上が見込めます。しかし、アプリではelementの動的な生成が基本なので、decorateに関しては今日は触れません。
  21. 21. 実装
  22. 22. app.ui.Component.prototype.createDom = function () { var dh = this.getDomHelper(); this.setElementInternal(dh.createDom(div, null)); }; app.ui.Component.prototype.enterDocument = function () { goog.base(this, ‘enterDocument’); this.getHandler().listen(this.getElement(), ‘click’, function() {(‘handle on click’);}); };createDom では、自分が管理するelementを作り、それをメンバーにセットします。enterDocumentは、elementが必ずあることが前提のコードを書く場所です。
  23. 23. なぜ、element生成とenterDocumentが 分かれているのか
  24. 24. コンストラクタ ↓ createDom ↓ enterDocument ↓ exitDocument ↓ disposeelementがないと、エラーになってしまう処理を、enterDocumentに集めることで、ui.Componentの安全で効率的なライフサイクルを提供できるからです。
  25. 25. コンストラクタ ↓ createDom ↓ • DOM Exception を防ぐ enterDocument • enter したときだけ ↓ listener を持たせられる (exit したら外せる) exitDocument ↓ disposeこのステップを踏むことで、ブラウザJavascriptにありがちなDOM Exception を防ぐことができます。あとは、exitDocumentで、よけいなリスナ関数を除去することで、パフォーマンス、メモリ効率も上げられます。
  26. 26. goog.ui.Componentの簡単な説明 おわり
  27. 27. 前半:なぜ、goog.ui.Componentを ツリー化すべきなのか?あらためまして。
  28. 28. 3つの理由
  29. 29. 逆に、もし大量のインスタンスをツリーで管理しなければ、どうなる?
  30. 30. http://closure-library.googlecode.com/svn/docs/class_goog_ui_Component.htmlまず、スーパークラスであるgoog.Disposable の恩恵を受けられなくなります。
  31. 31. var component = new app.ui.Component(); (‘...’); component.dispose();goog.Disposeは、もっともベーシックな破棄機能を提供します。
  32. 32. var component = new app.ui.Component(); (‘...’); component.dispose(); // 内部オブジェクトの参照の破棄 // element と参照の破棄 // リスナの破棄 // 子インスタンスのdisposedisposeの実装のおかげで、インスタンスは自分に責任のがる他のオブジェクトを確実に破棄することができます。更に、ツリー構造にしておけば、子インスタンスのdisposeも走らせてくれます。
  33. 33. 理由その1:(ツリーにしないと) 関連するインスタンスのdisposeが、 大変になる。もし
  34. 34. http://closure-library.googlecode.com/svn/docs/class_goog_ui_Component.html次に、EventTarget の恩恵も得られなくなります。
  35. 35. var component = new goog.ui.Component(); goog.events.listen(component, shout, function(e) { console.log(shut up!!!); }); component.dispatchEvent(shout);EventTargetは、自身をelementのようなイベントターゲットのターゲットにします。これにより、Observer パターンを提供します。
  36. 36. 大量のインスタンスが、 お互いに通信し合う必要があったら?では、もし大量のインスタンス同士が・・・?大変です。
  37. 37. 参照をみつけだし、ひとつひとつ listenするのは大変・・・ listen listen listenまず、イベントをlistenするために参照を得なければなりません。また、インスタンスの数だけリスナが必要になるでしょう。シングルトンのEventTarget を利用したりもするかも知れない。それはとてもいいことだけど、いつもそれをするとイベントが複雑になりすぎる。
  38. 38. var parent = new goog.ui.Component(); goog.events.listen(parent, shout, function(e) { (shut up!) }); for (var i=0; i<10; i++) { var child = new goog.ui.Component(); child.setParentEventTarget(parent); } child.dispatchEvent(shout);それを解決するのが、EventTarget のメソッドである、setParentEventTargetです。これにより、インスタンス同士の関係を築くことができます。
  39. 39. bubbling parent capture child.dispatchEvent()DOMと同じ。子で発生したイベントは、ルートインスタンスまで通知されます。
  40. 40. listen は1回。 イベントが勝手に飛んでくる。 listen dispatch dispatch dispatchlistenは1回でok。子がdispatchしたイベントは、親のもとに自動的に集められます。子は、親に処理をデリゲートできるので、できることも増えます。
  41. 41. listen DOMイベントと同じ。 Bubbling/Capture が利用可能離れていても同様。DOMイベントと同じく、ルートにあたるインスタンスまでイベントは届きます。
  42. 42. 理由その2:関連するインスタンス同士の 通信が、効率的になる。
  43. 43. 3つめ
  44. 44. 毎回、レンダーツリーに 変更を加えていませんか?3つめの、理由です。
  45. 45. http://jsperf.com/appending-to-render-tree
  46. 46. http://jsperf.com/appending-to-render-tree
  47. 47. for (var i=0; i<10; i++) { var component = new goog.ui.Component(); component.render(); // XXX: Don’t do this! }もしこう書いたら、jsperfの例と同じこと。毎回レンダーツリーにelementをappendしていってしまっています。
  48. 48. 関連するelement(DOMツリー)の appendは、1回で。・・・こう実装すると、確実です。
  49. 49. /** @constructor */ app.ui.Parent = function () { goog.base(this); for (var i=0; i<10; i++) { this.addChild(new app.ui.Child()); } }; (‘...’);まず、親のコンストラクタで、子のインスタンスを生成。
  50. 50. app.ui.Parent.prototype.createDom = function () { (‘...’); this.forEachChild(function(child) { child.createDom(); dh.appendChild( this.getContentElement(), child.getElement()); }, this); };次に、親のcreateDom内で、子も一緒にcreateDomし、そのあとにappend先を決定します。
  51. 51. 親コンポーネント 子コンポーネント コンストラクタ コンストラクタ 手動 ↓ createDom、 createDom 手動 親のelementにappend ↓ enterDocument enterDocument 自動 ↓ exitDocument enterDocument 自動 ↓ dispose dispose 自動new と、createDom のみchildの挙動を指定をすれば、あとはgoog.ui.Componentが親コンポーネントのライフサイクルにそって、子も同じ運命をたどります。
  52. 52. 親コンポーネント 子コ コンストラクタ コン ↓ c parent.render() createDom 親の (bodyに、1度だけ ↓ appendされる) enterDocument en ↓ exitDocument en ↓ parent.dispose() disposeインターフェースから見る処理の流れは、こんな感じ。したがって、子は基本的にrenderメソッドを使わない、といえると思います。(もちろん、使うこともできる)
  53. 53. 理由その3: 親のcreateDom → 子のcreateDom で、 安全にDOMを組み立てられ、 効率よくappendすることができます。その3まとめ。
  54. 54. parent.addChild(child, true); を使えばいい(       ) という方もいるかも知れませんが、 基本形はこの形で考えます
  55. 55. 理由その1:インスタンスのdisposeが、大変になる。 理由その2:インスタンス同士の通信が、効率的になる。 理由その3:1回のappendで済む。 DOM Exception のリスクも減らせる。以上3点が、「なぜツリー化するのか」の理由です。
  56. 56. ツリー化するメリットが理解いただけたかと思います
  57. 57. 前半:なぜ、goog.ui.Componentを 後半: ツリー化すべきなのか?十分理解していただいたところで。
  58. 58. tを 後半:goog.ui.Componentのはぐれかた? ツリー化する上での例外ケース3種類後半は、この基本形からそれなければいけないケースを、3例、紹介したいと思います。
  59. 59. ツリーの基本形からはぐれる、 3つのケースを紹介します
  60. 60. goog.ui.Thousandrows を ちょっとだけ紹介させてくださいまず、1つめを紹介する前に。僕の作った、Thousandrows について紹介させてください。
  61. 61. • 大量の行を、すぐ表示 • つなぎ目なしでスクロール(≠ページング) • 任意の箇所にジャンプ(≠単なる無限スクロール)大量の行を効率よく表示できる、UIコンポーネントです。
  62. 62. http://stakam.net/closure/120722/
  63. 63. Page RowThousandrowsコンポーネントの親子関係を築いているので、rowsのdisposeも効率的にでき、インスタンス間通信もしやすく、Thousandrowsが一体となって機能することができます。
  64. 64. goog.ui.Component ↓ goog.ui.Control ↓ goog.ui.Scroller ↓ goog.ui.ThousandrowsこのThousandrows を作るために、まずScrollerを作りました。継承させています。
  65. 65. Slider ScrollerScrollerは、こういう構造になっています。ですが、Thousandrowsのようなものを作れるように、Sliderはchildrenに加えるわけにはいきません。
  66. 66. ケース1:関連するインスタンスを、 childに加えられないことがある
  67. 67. goog.ui.Componentの children は、 一律で contentElement_ にappendされるべきScroller というからには、childをcontentElement に入れていけるべきです。
  68. 68. contentElement_ Slider Scroller
  69. 69. contentElement_ Slider Scroller Scrollerのchildにできないchild は、ユーザーが加えていけるようにするため、空にしておく必要がありました。
  70. 70. • childたちは、contentElement_ に並ぶようにして おかないと、 addChildAt が動かなくなる。 (child.getElement()のsiblingに挿入してる) • 異質のcomponentインスタンスをchildrenに 混ぜると、this.forEachChild しにくくなるので おすすめできない。Slider を、Scroller のchild にできない理由。
  71. 71. Scroller に関連する Slider コンポーネントを、 child にできない。childにできないことがわかった。こんなときは、どうするか?
  72. 72. childにせず、手動で親の ライフサイクルに追従させればOKchildにせず、手動で親のライフサイクルに追従させるという手があります。
  73. 73. 通常と同じ/** @constructor */goog.ui.Scroller = function () { goog.base(this); (‘...’); this.slider_ = new goog.ui.Slider();};(‘...’);
  74. 74. 通常と同じgoog.ui.Scroller.prototype.createDom = function () { (‘...’); this.slider_.createDom(); this.getElement().appendChild(this.slider_.getElement());};
  75. 75. 通常と違う goog.ui.Scroller.prototype.enterDocument = function () { (‘...’); this.slider_.enterDocument(); // 忘れずに this.getHandler().listen(this.slider_, ‘change’, function(e) { }); //(または、this.slider_.setParentEventTarget(this) してもいいと思う) };child でないので、enterDocument は手動で必要になるので、忘れずに。あとは、イベントのlistenは、slider をターゲットにして行う必要があります。setParentEventTarget することも考えられますが、こうするとイベントがパブリックになります。
  76. 76. 通常と違うgoog.ui.Scroller.prototype.exitDocument = function () { (‘...’); this.slider_.exitDocument();  // なくてもいい};
  77. 77. 通常と違うgoog.ui.Scroller.prototype.disposeInternal = function () { if (this.slider_) { this.slider_.dispose(); this.slider_ = null; } (‘...’);};
  78. 78. ケース1まとめ:childにできない場合、 手動で状態を変えていくことでインスタンスを管理しつづけられる。
  79. 79. ケース2:childを、parnetの contentElement_ 以外に appendしたいとき
  80. 80. 再び、ちょっと紹介させてください
  81. 81. タブ
  82. 82. tabs tab tab tab frameタブのchild は、frameひとつです。でも・・・
  83. 83. tabs tab tab tab childにしたい。。 でもDOM的にとても距離がある frame距離がある。tab のDOMにappend することは、考えられない。
  84. 84. append先だけ、変えればOK.
  85. 85. 通常と同じ /** @constructor */ app.ui.Tab = function () { goog.base(this); this.frame_ = new app.ui.Frame(); }; (‘...’);まず、親のコンストラクタで、子のインスタンスを生成しておきます。
  86. 86. 通常と違う app.ui.Tab.prototype.createDom = function () { (‘...’); this.frame_.createDom(); // 別のDOMに入れても問題ない。 dh.appendChild( App.getInstance().getFrameWrapEl(), this.frame_.getElement()); };次に、親のcreateDom内で、子も一緒に
  87. 87. • childを、遠くのDOMにappendしても、特に問題ない• parentEventTarget として機能、disposeなども• getContentElement は、通ったらだめ。 (addChildAt も)注意点。
  88. 88. ケース2まとめ:DOM的関係性があまりなくても、 親子関係は築ける。
  89. 89. ケース3:ライフサイクルを意図的にずらしたいとき
  90. 90. 先ほどの tab と frame の例は 忘れて頂いて・・・ここ。ちょっと雑です。具体例の使いかたが雑なので注意してください。
  91. 91. タブもういちど出て来ました。さっきの例は忘れてください。
  92. 92. 非選択タブ。frameは、まだレンダリングしてないタブ自身は、初期表示時にすべてレンダリングされますが、非選択のタブのフレームは、まだレンダリングしたくない。
  93. 93. 親が選択されたときに、 子をレンダリングしたい。(意図的にライフサイクルをずらしたい)
  94. 94. 通常と同じ /** @constructor */ app.ui.Tab = function () { goog.base(this); this.frame_ = new app.ui.Frame(); }; (‘...’);まず、親のコンストラクタで、子のインスタンスを生成しておきます。
  95. 95. 通常と違う app.ui.Tab.prototype.createDom = function () { (‘...’); // frame はまだレンダリングしない。appendもされない。 };createDom で、Tabのelement は作る。frame のelement は作らない。まだいらないから。
  96. 96. 通常と違う app.controller.Tab.prototype.processSelected = function () { (‘...’); if (!this.frame_.isInDocument()) { this.frame_.render(wrapEl); } };・・・タブである自分が選択されたタイミングで、初めてframeをレンダリングします。append先は、前述したとおり、自由な場所を指定できます。childにしてあるので、disposeなどは、親と同じときに自動で処理されます。
  97. 97. ケース3まとめ:必要に応じて、ライフサイクルを ずらすことも可能。
  98. 98. • ケース1まとめ: childにできない場合、手動で状態を変えていくことで インスタンスを管理しつづけられる。• ケース2まとめ: DOM的関係性があまりなくても、親子関係は築ける。• ケース3まとめ: 必要に応じて、ライフサイクルをずらすことも可能。
  99. 99. ツリー化のメリットと基本のライフサイクルを理解したうえで、柔軟にClosure Libraryからはぐれましょう!
  100. 100. おわり

×