• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Case Study On Event Driven Web Applications And View Modularization
 

A Case Study On Event Driven Web Applications And View Modularization

on

  • 1,877 views

 

Statistics

Views

Total Views
1,877
Views on SlideShare
1,647
Embed Views
230

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 230

http://naverland.naver.jp 227
http://webcache.googleusercontent.com 2
http://dev-web6.navercorp.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

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

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