A Case Study on Event-Driven Web             Applications and View Modularization             Christopher Rogers          ...
紹介                   Naver Japan 統合検索のフロント開発                        検索結果取得、HTML出力                        主に Java (たまに C/C+...
ケース1             検索結果の読み込みFriday, July 23, 2010
検索結果の読み込み                   問題                        多くのリソースからデータを読み込む必要がある。                        統合検索ページは現在 38ヶ所からデータを...
ひとつの解決策:同期読込             dataSource1.load(); // 終わるまで待機             // データ処理/HTML 出力                                      ...
問題点                   依存性がなくても他の読み込みを待機させる。                        一部データソースの障害発生時、それ以降の読み込みを遅ら                        せること...
イベント駆動(非同期読み込み)             dataSource1.fetch();             dataSource2.fetch();             dataSource1.wait();         ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+”定義指向”                   <chain>                       <invoke refid=”dataSource1”/>                       <chain> ...
イベント駆動+“定義指向”                   長所                        「関心の分離」(http://ja.wikipedia.org/wiki/関心の分離)                     ...
ケース2             HTML 出力 (View Layer)Friday, July 23, 2010
ビュー                   一般的には...                        テストしにくい                        リファクタリングは難しい                        再...
ビュー                   JSP                   直感的でわかりやすい                   短所                        データ共有(変数とスコープ管理が困難)    ...
ビュー                   目標                        コード重複の削減                        再利用できるコンポーネントを作る                        コー...
Wicket                   ビュー部分を抽出して統合検索のフレームワークに導入。                   長所                        HTML とビューのロジックが分離されている。   ...
Wicket                   短所                        Java の面倒なところ                         文字列結合                         無名イン...
<div id=”header”>                        <wicket:container wicket:id=”searchPanel”/>                        <wicket:contai...
<div id=”header”>                        <wicket:container wicket:id=”searchPanel”/>                        <wicket:contai...
Template Method パターン                   @Override protected void onBeforeRender() {                       add(newSearchPane...
Friday, July 23, 2010
Upcoming SlideShare
Loading in...5
×

A Case Study On Event Driven Web Applications And View Modularization

2,056

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,056
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "A Case Study On Event Driven Web Applications And View Modularization"

  1. 1. A Case Study on Event-Driven Web Applications and View Modularization Christopher Rogers Naver Japan Search Service DevelopmentFriday, July 23, 2010
  2. 2. 紹介 Naver Japan 統合検索のフロント開発 検索結果取得、HTML出力 主に Java (たまに C/C++)Friday, July 23, 2010
  3. 3. ケース1 検索結果の読み込みFriday, July 23, 2010
  4. 4. 検索結果の読み込み 問題 多くのリソースからデータを読み込む必要がある。 統合検索ページは現在 38ヶ所からデータを読み込んでいる 依存性もある(並行で読み込めないデータ)Friday, July 23, 2010
  5. 5. ひとつの解決策:同期読込 dataSource1.load(); // 終わるまで待機 // データ処理/HTML 出力 依存性 dataSource2.load(); // ... dataSource3.load(dataSource1.isNews); // ...Friday, July 23, 2010
  6. 6. 問題点 依存性がなくても他の読み込みを待機させる。 一部データソースの障害発生時、それ以降の読み込みを遅ら せることになる。 全般的にページのロード時間が遅くなる。 接続が増えるほど管理性が低下。Friday, July 23, 2010
  7. 7. イベント駆動(非同期読み込み) dataSource1.fetch(); dataSource2.fetch(); dataSource1.wait(); dataSource3.fetch(dataSource1.isNews); // dataSource1 のデータを処理... dataSource2.wait(); // ...Friday, July 23, 2010
  8. 8. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  9. 9. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  10. 10. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  11. 11. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  12. 12. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  13. 13. イベント駆動+”定義指向” <chain> <invoke refid=”dataSource1”/> <chain> <invoke refid=”dataSource3”/> </chain> </chain> <chain> <invoke refid=”dataSource2”/> </chain>Friday, July 23, 2010
  14. 14. イベント駆動+“定義指向” 長所 「関心の分離」(http://ja.wikipedia.org/wiki/関心の分離) 同期コードとビジネス ロジックの分離 一目で依存関係がわかる 管理性Friday, July 23, 2010
  15. 15. ケース2 HTML 出力 (View Layer)Friday, July 23, 2010
  16. 16. ビュー 一般的には... テストしにくい リファクタリングは難しい 再利用しにくいFriday, July 23, 2010
  17. 17. ビュー JSP 直感的でわかりやすい 短所 データ共有(変数とスコープ管理が困難) 複雑なロジックはコードに災害を起こす カスタムタグでは限界があるFriday, July 23, 2010
  18. 18. ビュー 目標 コード重複の削減 再利用できるコンポーネントを作る コード可読性の向上Friday, July 23, 2010
  19. 19. Wicket ビュー部分を抽出して統合検索のフレームワークに導入。 長所 HTML とビューのロジックが分離されている。 Pure Java™ とソフトウェアデザインパターンが使えて、主に Template Method と Abstract Factory を実用化。 HTML パーサーまでいろいろ拡張できる。Friday, July 23, 2010
  20. 20. Wicket 短所 Java の面倒なところ 文字列結合 無名インナークラスが冗長Friday, July 23, 2010
  21. 21. <div id=”header”> <wicket:container wicket:id=”searchPanel”/> <wicket:container wicket:id=”tabs”/> </div> <div id=”contents”> <wicket:child/> </div> <wicket:container wicket:id=”footer”/>Friday, July 23, 2010
  22. 22. <div id=”header”> <wicket:container wicket:id=”searchPanel”/> <wicket:container wicket:id=”tabs”/> </div> <div id=”contents”> <wicket:child/> </div> <wicket:container wicket:id=”footer”/>Friday, July 23, 2010
  23. 23. Template Method パターン @Override protected void onBeforeRender() { add(newSearchPanel(“searchPanel”)); add(newTabPanel(“tabs”)); add(newFooter(“footer”)); } protected Component newSearchPanel(String id) { return new SearchPanel(id); } protected abstract Component newFooter(String id); protected Component newTabPanel(String id) { return new TabPanel(id); } /* subclass */ @Override protected Component newTabPanel(String id) { return new SpecialTabPanel(id).showOptions().hideSearchBox(); }Friday, July 23, 2010
  24. 24. Friday, July 23, 2010

×