Breeze/Knockout テンプレート
作成者: Mads Kristensen
Breeze/Knockout MVC テンプレートは Ward Bell によって書かれました
あなたは "シングル ページ アプリケーション" (SPA) について聞いたことがあり、それが何であるか疑問に思っていました。 それについて読むことができる間、あなたはむしろ自分でそれを経験したいと思います。 しかし、誰がサンプルをダウンロードする時間がありますか? Visual Studio を使用している場合は、ASP.NET MVC 4 "Breeze/Knockout Single Page Application" テンプレートを使用して、SPA の例を 60 秒未満で実行できます。
Breeze/Knockout SPA テンプレートとは何ですか?
ほとんどのプロジェクト テンプレートでは、アプリケーション スケルトンが生成されます。 コードを追加してこれらの骨に肉を付け、最終的に動作するアプリケーションを提供します。 Breeze/Knockout SPA テンプレートは異なります。 学習用のサンプル アプリケーションが生成されます。 これは、SPA アプリケーションの設計と、SPA を構築するための多くの手法を示します。
Breeze/Knockout テンプレートは、ASP.NET および Web Tools 2012.2 Update に含まれる KnockoutJS SPA テンプレートのバリエーションです。 Breeze SPA テンプレートは、同じユーザー エクスペリエンスを持つアプリケーションを生成しますが、データ管理に Breeze を使用する別の実装があります。
KnockoutJS SPA テンプレートは、単純なアプリケーションに適した生の jQuery AJAX を使用してサービス要求を行います。 しかし、より高度なアプリには、より要求の厳しいデータ管理要件があります。 たとえば、ほとんどのアプリケーションは次のようになります。
- 拡張ユーザー セッション中にサーバーに対してクエリ、再クエリを実行します。
- クエリ フィルター、並べ替え、ページングを追加します。
- 複数の画面で同じデータを共有します。
- 多くのオブジェクトに対する変更を蓄積し、1 つのトランザクションとして保存します。
- クライアントでの変更は検証されるため、ユーザーはデータベースに変更をコミットする前に間違いを修正できます。
BreezeJS ライブラリは、これらの作業を自動的に処理するため、最も重要なアプリケーション ロジックとユーザー エクスペリエンスを開発できます。
Breeze は、JavaScript と HTML で豊富なデータ アプリケーションをビルドするためのオープンソース ライブラリであり、これまでスタンドアロン デスクトップ アプリケーションとして提供されてきたアプリの種類です。
Breeze/Knockout テンプレートは、より堅牢なデータ管理インフラストラクチャに向けて、その最初の重要な一歩を踏み出すのに役立ちます。 KnockoutJS SPA テンプレートと外向きに同一のサンプル Todo アプリケーションが生成されます。 内部では、AJAX データ レイヤーが Breeze に置き換えられるので、2 つのアプローチを並べて比較できます。 もちろん、それは Breeze アプリケーションの可能性にほとんど触れていません。 ただし、Breeze のしくみと、その移行を行うために必要な時間がどれだけ少ないかを確認できます。
では、始めましょう。
Breeze/Knockout テンプレート プロジェクトを作成する
上の [ダウンロード] ボタンをクリックして、テンプレートをダウンロードしてインストールします。 このテンプレートは、Visual Studio 拡張機能 (VSIX) ファイルとしてパッケージ化されています。 Visual Studio の再起動が必要になることがあります。
[テンプレート] ウィンドウで、[インストールされているテンプレート] を選び、[Visual C#] ノードを展開します。 [Visual C#] で [Web] を選びます。 プロジェクト テンプレートの一覧で、[ASP.NET MVC 4 Web アプリケーション] を選びます。 プロジェクト名を指定して、 [OK] をクリックします。
[新しいプロジェクト] ウィザードで、[Breeze Knockout SPA] を選択します。
Ctrl + F5 キーを押してデバッグなしでアプリケーションをビルドして実行するか、F5 キーを押してデバッグありで実行します。
アプリケーションが最初に実行されると、ログイン画面が表示されます。 [サインアップ] リンクをクリックすると、新しいページが表示され、ユーザー名とパスワードを入力できます。 (ログイン ページと登録ページは、ASP.NET MVC を使用して構築されています)。登録フォームを送信すると、サーバーはアカウントの 2 つの項目を含む TodoList を生成します。 その後、黄色のノートでそれらを提示します。
SPA が主に使用される環境を考えます。 Todos の操作中に表示され、経験するすべてのものが、Knockout と Breeze の助けを借りてクライアントでレンダリングおよび管理されます。 アプリをユーザーとして探索します が、開発者の視点から行います。 ブラウザーの開発者ツールを使用して、ネットワーク トラフィックをキャプチャします。 (Internet Explorer で F12 キーを押し、[ネットワーク] タブをクリックし、[キャプチャの開始] をクリックします)。次の手順を試します。
- 新しい Todo 項目を追加します。
- ラベルをクリックして Todo 項目のタイトルを編集します
- チェック ボックスをオンにして、完了項目をマークします。 テキストボックスが無効になっているため、タイトルは編集できなくなっています。
- ラベルの右側にある [x] をクリックします。 項目が表示されなくなり、データベースから削除されます。
- 別の項目を選択し、そのタイトルをクリアします。 タイトルが必要であるという検証エラーが表示されます。 しばらくすると、前のタイトルが復元されます。
- 非常に長いタイトルを入力します。 タイトルが長すぎるという別の検証エラーが発生します。
- [Add Todo List]\(Todo リストの追加\) ボタンをクリックします。 前のリストの左側に新しいリストが表示されます。
- TodoList タイトルを使用して、必須の検証と長さの検証をトリガーします。
- タイトルのテキストボックスをクリックして、エラー メッセージをクリアします。
- 右上隅の円の [x] をクリックして、TodoList とその todo を削除します。
検証ロジックは、Breeze によってクライアント側で実行されます。 サーバー モデル クラスの検証属性は、クライアントに伝達され、クライアントがサーバーに接続する前に自動的に実行されます。
ネットワーク トラフィックを確認します。 Breeze がエラーを検出したときに、サーバーへの呼び出しがなかったことに注意してください。 有効な変更のたびに、"/api/Todo/SaveChanges" への POST 要求が発生しました。 Breeze は変更をバンドルし、それらを 1 つの要求として Web API コントローラーの SaveChanges メソッドに送信します。 これは、各項目に対して PUT、POST、DELETE 要求を個別に実行する KnockoutJS SPA テンプレートとは異なります。
内部の仕組み
このアプリケーションには、クライアント側とサーバー側があります。 クライアント側スタックは、小さな HTML とアプリケーション JavaScript モジュール ("app" フォルダー内) とサードパーティの JavaScript ライブラリ ("Scripts" フォルダー内) の組み合わせで構成されます。
KnockoutJS SPA テンプレートを調査したことがある人なら、これはとても見慣れたものに見えるはずです。 青いボックスに注目します。 UI アーキテクチャは Model-View-ViewModel (MVVM) であり、ビューの HTML ウィジェットはビュー モデルのサポート プレゼンテーション コードからすっきりと分離されます。 データ バインディング システム (この場合は Knockout) は、ビューとビュー モデルを調整して、それぞれが詳しい知識を持たない他のユーザーでもジョブを実行できるようにします。
モデルは Todo データをカプセル化します。 モデル内のエンティティは、Knockout の注目すべきプロパティを持つ Breeze によって構築されるため、ビュー内のウィジェットに直接バインドできます。 ビュー モデルは、モデル エンティティを取得して保存するようにデータ コンテキストに要求します。 データ コンテキストは、ほとんどの作業を Breeze に委任します。
サーバー側スタックは、開発者コードと 3 つのプリンシパル .NET ライブラリ (Web API、Entity Framework、Breeze.NET) で構成されます。
基本的なアーキテクチャは、KnockoutJS SPA テンプレートと同じです。 ただし、実装ははるかに簡単です。DTO は削除され、Entity Framework の詳細のほとんどは Breeze.NET に委任されています。
次のステップ
クライアント スタックとサーバー スタックの両方に関する広範な説明に従って、コードを確認することをお勧めします。
Breeze のクライアント側のクエリを試してみる場合は、いくつかのフィルターと並べ替えを追加します。 モデル プロパティやエンティティを追加して、エンドツーエンドの SPA 開発を詳しく確認できます。 設計に自信がある場合は、Todo の機能を破棄し、独自の機能に置き換えることができます。
すぐに、クライアント側の画面を追加し、それらの間を移動する準備が整います。これは次の大きなステップです。 このSPAテンプレートはそのままで、Durandal を Breeze と Knockout のミックスに加えた John Papa's Hot Towel など、より完全な SPA スタックに移行することになります。