Project Silk Chapter 2
最終更新：
shinsuke_oda 2011年11月12日(土) 23:11:02履歴
Project Silk Chapter 2: Architecture
原文：http://msdn.microsoft.com/en-us/library/hh404097.a...
※端折ってるとこもあります。
画像は、本家の見てください
工事中
導入
jQuery Template
Direct Communication
Loose Communication
原文：http://msdn.microsoft.com/en-us/library/hh404097.a...
※端折ってるとこもあります。
画像は、本家の見てください
工事中
導入 
Mileage Stats は、クロスブラウザで、モダンブラウザの機能を活用した ASP.NET MVC のアプリケーションだよ。
Mileage Stats は2つのユーザーエクスペリエンスを提供しているよ。
早い段階で、ブラウザ/バージョンのサポートする範囲を決めよう。
古いバージョンを使うと、技術的な選択肢が制限されユーザーエクスペリエンスにも影響が出るかも！
shim や polyfill といった物を使うと、古いブラウザでも似た様なことが出来るようになるかもよ。詳細は、
"Filling the HTML5 Gaps with Polyfills and Shims" from Rey Bango's MIX11 session:
http://channel9.msdn.com/Events/MIX/MIX11/HTM04
"Making HTML5 and CSS3 work with polyfills and shims" by Rey Bango on .net magazine:
http://www.netmagazine.com/features/making-html5-a...
この章では、Mileage Stats のクライアントサイドのアーキテクチャの図を用意し、5つの項目に分けて解説するよ
Mileage Stats は2つのユーザーエクスペリエンスを提供しているよ。
- 従来通りのエクスペリエンス。ボタンやハイパーリンクがクリックされるたびに、ページのポストとリロードが行われるよ。
- リッチなエクスペリエンス。最初に一度ページを読み込んだら、新しくデータが必要になるかアップロードするときだけ、サーバーにリクエストを投げるよ。ページ全体のリロードが無いので、他のユーザーフレンドリーな機能に加えクライアントサイドの状態変更にアニメーションも使えるよ。
早い段階で、ブラウザ/バージョンのサポートする範囲を決めよう。
古いバージョンを使うと、技術的な選択肢が制限されユーザーエクスペリエンスにも影響が出るかも！
shim や polyfill といった物を使うと、古いブラウザでも似た様なことが出来るようになるかもよ。詳細は、
"Filling the HTML5 Gaps with Polyfills and Shims" from Rey Bango's MIX11 session:
http://channel9.msdn.com/Events/MIX/MIX11/HTM04
"Making HTML5 and CSS3 work with polyfills and shims" by Rey Bango on .net magazine:
http://www.netmagazine.com/features/making-html5-a...
この章では、Mileage Stats のクライアントサイドのアーキテクチャの図を用意し、5つの項目に分けて解説するよ
- Structure
クライアントサイドの HTML の構造や操作。ここからは、Template と表現するよ - Modularity
JavaScript のオブジェクトをきれいに分離しメンテナンスしやすいアプリケーションを作成する方法。ここからは、Widget と表現するよ - Communication
JavaScript のオブジェクトの通信方法を定義。ここからは、pub/sub (パブリッシュ-サブスクライブ 方式) と表現するよ - Navigation
ユーザーのジェスチャを管理して、アニメーションを調整する方法。ここからは、Navigation と Layout Manager と表現するよ - Data
クライアントサイドのデータのリクエストとキャッシュについて。ここからは、Data Manager と表現するよ
Mileage Stats のような Web サイトは、モダンなブラウザーで JavaScript を有効にしていると、魅力的なユーザーエクスペリエンスを提供するよ。
JavaScript が無効な場合や古いブラウザーでもサイトは表示出来るよ。
リッチなのと従来通りのユーザーエクスペリエンスを両方サポートするために Project Silk チームは、最初の HTML はサーバーサイドで生成した後で、 JavaScript を使ってブラウザーの機能を検出し、ブラウザーが対応していたらクライアントサイドで構築した HTML に置き換えてユーザーエクスペリエンスを強化するよ。
HTML 要素の置き換えには、ボタンのアクションや CSS クラスが含まれるよ。
アニメーションの追加やページ遷移、Ajax の機能をクライアントサイドの要素に追加するよ。
このような、サーバーサイドで生成した HTML のクライアントサイドでの強化を progressive enhancement(プログレッシブ エンハンスメント)と呼ぶよ。
Progressive Enhancement とは、ブラウザーの機能に基づいてクライアントサイドの機能を追加することだよ。
サーバーで生成した HTML の機能を強化した後で、クライアントサイドの JavaScript は、ユーザーのジェスチャ、リクエストデータへのレスポンス、UI の変更 をサーバーにポストバックせずに行うよ。
JavaScript が無効な場合や古いブラウザーでもサイトは表示出来るよ。
リッチなのと従来通りのユーザーエクスペリエンスを両方サポートするために Project Silk チームは、最初の HTML はサーバーサイドで生成した後で、 JavaScript を使ってブラウザーの機能を検出し、ブラウザーが対応していたらクライアントサイドで構築した HTML に置き換えてユーザーエクスペリエンスを強化するよ。
HTML 要素の置き換えには、ボタンのアクションや CSS クラスが含まれるよ。
アニメーションの追加やページ遷移、Ajax の機能をクライアントサイドの要素に追加するよ。
このような、サーバーサイドで生成した HTML のクライアントサイドでの強化を progressive enhancement(プログレッシブ エンハンスメント)と呼ぶよ。
Progressive Enhancement とは、ブラウザーの機能に基づいてクライアントサイドの機能を追加することだよ。
サーバーで生成した HTML の機能を強化した後で、クライアントサイドの JavaScript は、ユーザーのジェスチャ、リクエストデータへのレスポンス、UI の変更 をサーバーにポストバックせずに行うよ。
jQuery Template
jQuery Template は、HTML を生成するテンプレートエンジンだよ。
データをテンプレートに適用して、DOM をレンダリングするよ。データは、単一のオブジェクト、または、オブジェクトの配列が使えるよ。
jQuery Template データと構造を分離することで、テストやメンテナンスしやすいアプリケーションを簡単に作れるよ。
ASP.NET MVC か ASP.NET Web Forms を使っている場合、レンダリングエンジンを動的に生成するか、jQuery Template を使ってレンダリング出来るよ。
Mileage Stats では、この機能を使って URL と 属性データをレンダリング時にテンプレートから設定してるよ。
Mileage Stats では、最初のページのロード時に全ての jQuery Template を読み込むよ。
事前に読み込んだテンプレートは、クライアントサイドのアプリケーションを簡素化し、オンデマンドロードよりも高速にレンダリングするよ。
jQuery Template は、Chapter 7:Manipulating Client-Side HTML? で詳しく紹介するよ。
データをテンプレートに適用して、DOM をレンダリングするよ。データは、単一のオブジェクト、または、オブジェクトの配列が使えるよ。
jQuery Template データと構造を分離することで、テストやメンテナンスしやすいアプリケーションを簡単に作れるよ。
ASP.NET MVC か ASP.NET Web Forms を使っている場合、レンダリングエンジンを動的に生成するか、jQuery Template を使ってレンダリング出来るよ。
Mileage Stats では、この機能を使って URL と 属性データをレンダリング時にテンプレートから設定してるよ。
Mileage Stats では、最初のページのロード時に全ての jQuery Template を読み込むよ。
事前に読み込んだテンプレートは、クライアントサイドのアプリケーションを簡素化し、オンデマンドロードよりも高速にレンダリングするよ。
jQuery Template は、Chapter 7:Manipulating Client-Side HTML? で詳しく紹介するよ。
モジュール化されたコードは、
・アプリケーション全体を簡素化
・責務の明確な境界を確立
・懸念を分離
・テストがし易い
・メンテナンスも容易
・再利用が可能
Mileage Stats のクライアントサイドのモジュール化された JavaScript は、jQuery UI Widget と JavaScript オブジェクトによって構成されてるよ。
jQuery Widget は、ページ要素にアタッチされて、生存期間、状態、継承、テーマ、他の Widget や JavaScript オブジェクトとの通信の管理する機能を提供するよ。
・アプリケーション全体を簡素化
・責務の明確な境界を確立
・懸念を分離
・テストがし易い
・メンテナンスも容易
・再利用が可能
Mileage Stats のクライアントサイドのモジュール化された JavaScript は、jQuery UI Widget と JavaScript オブジェクトによって構成されてるよ。
jQuery Widget は、ページ要素にアタッチされて、生存期間、状態、継承、テーマ、他の Widget や JavaScript オブジェクトとの通信の管理する機能を提供するよ。
jQuery Widget と JavaScript オブジェクトは、コードをモジュールかするけど孤立はしてないよ。
むしろ連携して完全なアプリケーションを作る小さなオブジェクトだよ。
慎重に計画していないと、オブジェクト間の通信は、密結合と望ましくない依存関係が発生するよ。
Mileage Stats のオブジェクトは、直接通信するか、pub/sub を使って疎結合に通信するよ。
むしろ連携して完全なアプリケーションを作る小さなオブジェクトだよ。
慎重に計画していないと、オブジェクト間の通信は、密結合と望ましくない依存関係が発生するよ。
Mileage Stats のオブジェクトは、直接通信するか、pub/sub を使って疎結合に通信するよ。
Direct Communication
Widget が直接通信する場合は、通常 Layout Manager が Widget の表示/非表示を切り替えるような、高度な Widget が低レベルの Widget を操作するために使われるよ。
Loose Communication
pub/sub は、パブリッシャーとサブスクライバが疎結合に通信することができるメッセージパターンだよ。
メッセージを公開されると、0以上のサブスクライバに通知されるよ。pub/sub 通信は、パブリッシャとサブスクライバの依存関係を軽減出来るよ。
メッセージは個別に定義されていて、オプションでペイロードも含めるよ。
メッセージを公開されると、0以上のサブスクライバに通知されるよ。pub/sub 通信は、パブリッシャとサブスクライバの依存関係を軽減出来るよ。
メッセージは個別に定義されていて、オプションでペイロードも含めるよ。
Mileage Stats のような リッチなクライアントサイドの Web アプリケーションでは、ボタンやハイパーリンクのクリック時にページ全体のリロードしないよ。代わりに、クライアントサイドでイベントを処理するよ。
jQuery BBQ プラグインは、アドレスバーの URL を変更するよ。アドレスバーの URL を変更することで、2つの事が出来るよ。
・特定のアプリケーションの状態を直接返せるので、ユーザーはアドレスをブックマーク出来るよ(ディープリンク)
・ブラウザの戻るボタンが機能するよ
Mileage Stats の Layout Manager は、BBQ プラグインの Navigation リクエストと連携して動作する Widget だよ。
BBQ プラグインの hashchange イベントをサブスクライブし、アドレスバーの URL 変更に基づいてレイアウトを変更するよ。
jQuery BBQ プラグインは、アドレスバーの URL を変更するよ。アドレスバーの URL を変更することで、2つの事が出来るよ。
・特定のアプリケーションの状態を直接返せるので、ユーザーはアドレスをブックマーク出来るよ(ディープリンク)
・ブラウザの戻るボタンが機能するよ
Mileage Stats の Layout Manager は、BBQ プラグインの Navigation リクエストと連携して動作する Widget だよ。
BBQ プラグインの hashchange イベントをサブスクライブし、アドレスバーの URL 変更に基づいてレイアウトを変更するよ。
Mileage Stats では、データのリクエストは全て Data Manager を介して Ajax 経由で行われるよ。
単一のオブジェクトが、リクエストを取り扱うことはクライアントサイドの呼び出し時のコードをシンプルにし、テストを容易にするよ。
単一の Data Manager オブジェクトは、クライアントサイドのデータキャッシュにも適してるよ。
データキャッシュは、クロスブラウザの観点から HTML5 local storage や その類の API ではなく、JavaScript オブジェクトを利用しているよ。
Mileage Stats では、ユーザーがチャートページに遷移した際にすぐ表示出来るように、初期のページ読み込み時にチャートデータもプリフェッチしているよ。
データがサーバーから返されるたびにデータをキャッシュしているよ。これにより、同じリクエストはサーバーに投げず済むよ。
Widget や JavaScript オブジェクトは Data Manager にデータを要求するよ。
Data Manager はリクエストを受けると、そのリクエストがキャッシュする必要があるか調べるよ。キャッシュする必要がある場合は、サーバーにリクエストを投げる前にキャッシュを確認するよ。
リクエストが正常に完了したら、返されたデータはキャッシュに追加されて、呼び出し元の Widget に返されるよ。エラーが発生した場合は、呼び出し元の Widget にエラーが返されるよ。
単一のオブジェクトが、リクエストを取り扱うことはクライアントサイドの呼び出し時のコードをシンプルにし、テストを容易にするよ。
単一の Data Manager オブジェクトは、クライアントサイドのデータキャッシュにも適してるよ。
データキャッシュは、クロスブラウザの観点から HTML5 local storage や その類の API ではなく、JavaScript オブジェクトを利用しているよ。
Mileage Stats では、ユーザーがチャートページに遷移した際にすぐ表示出来るように、初期のページ読み込み時にチャートデータもプリフェッチしているよ。
データがサーバーから返されるたびにデータをキャッシュしているよ。これにより、同じリクエストはサーバーに投げず済むよ。
Widget や JavaScript オブジェクトは Data Manager にデータを要求するよ。
Data Manager はリクエストを受けると、そのリクエストがキャッシュする必要があるか調べるよ。キャッシュする必要がある場合は、サーバーにリクエストを投げる前にキャッシュを確認するよ。
リクエストが正常に完了したら、返されたデータはキャッシュに追加されて、呼び出し元の Widget に返されるよ。エラーが発生した場合は、呼び出し元の Widget にエラーが返されるよ。
タグ
このページへのコメント
car insurance quote 31817 prednisone %((( buy viagra efyi auto insurance quotes 8OO cheap prices on cialis 58068 cheap auto insurance kblwip
http://www.autoprotectionoptions.com/
buy cialis nkuatk cheap auto insurance >:-PPP cheap car insurance =DD sildenafil >:-))) auto insurance quotes Albuquerque =(( cialis >:DDD buy pfizer viagra syu
http://getinsurlist.com/
Cialis barata online :-)) viagra 072 online auto insurance 8PPP levitra :PPP eastwood auto insurance 3821
http://www.medstabs4you.com/
ordering viagra qndzp credible online cialis =((( cheap car insurance >:OO buy cialis online csmasr 2003 cialis levitra market sales viagra 815 generic cialis online 8]]] viagra 99029
http://autoinsurshopping.com/
cialis hkzvrg viagra 03456 car insurance bqyi car insurence tbe cheap car insurance qsz Tadalafil 8-] infinity auto insurance 622513
http://www.edmedsonline4you.com/