Your SlideShare is downloading. ×
A Case Study On Event Driven Web Applications And View Modularization
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

A Case Study On Event Driven Web Applications And View Modularization

1,999

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

×