都内で働くSEの技術的なひとりごと / Technical soliloquy of System Engineer working in Tokyo

都内でサラリーマンやってます。SQL Server を中心とした (2023年からは Azure も。) マイクロソフト系(たまに、OSS系などマイクロソフト以外の技術も...)の技術的なことについて書いています。日々の仕事の中で、気になったことを技術要素関係なく気まぐれに選んでいるので記事内容は開発言語、インフラ等ばらばらです。なお、当ブログで発信、発言は私個人のものであり、所属する組織、企業、団体等とは何のかかわりもございません。ブログの内容もきちんと検証して使用してください。英語の勉強のため、英語の

近頃、SPA というキーワードを Web でよく目にするので、ちょっと気になって、ちょっと調べてみた

 SPA といっても、週刊SPA、雑誌じゃないですよ。『 Single - Page Application 』 です。ここに、knockout.js、ASP.NET MVC、WebAPI 等を使用した SPA のサンプルがありますね。ちょっとみてみましょう。

“Single-page application” (SPA) is the general term for a web application that loads a single HTML page and then updates the page dynamically, instead of loading new pages. After the initial page load, the SPA talks with the server through AJAX requests.

 SPA というのは、単一のページでページの遷移を使用せず、画面を動的に更新するものです。AJAX でリクエストをサーバに送出します。画面はどうやって更新するんでしょうか? DOM でごりごりいじっちゃうんでしょうか。そうだと、メモリーリークが少し心配ですが....

 このページで紹介している、SPA の構造についての図がありますね。下図のような感じです。HTML と JSON を knockout.js がデータバインドするんですね。あー、knockout.js は MVVM なライブラリということですね。今時な感じの構造ですね♪

On the server side, ASP.NET MVC serves the HTML and also handles forms-based authentication.

 このサンプルでは、ASP.NET MVC は HTML と フォームベースの認証を担当しているんですね。

ASP.NET Web API handles all requests that relate to the ToDoLists and ToDoItems, including getting, creating, updating and deleting. The client exchanges data with Web API in JSON format.

 ASP.NET WebAPI は、ToDoList と ToDoItems をクライアントとサーバ間を WebAPI と JSON を使用するのです。

Entity Framework (EF) is the O/RM layer. It mediates between the object-oriented world of ASP.NET and the underlying database. The database uses LocalDB but you can change this in the Web.config file. Typically you would use LocalDB for local development and then deploy to a SQL database on the server, using EF code-first migration.

 Entity Framework は OR マッパーですね。去年くらいにオープンソース化されましたね。けど、EF はあんまりいい印象がないんですよね。

On the client side, the Knockout.js library handles page updates from AJAX requests. Knockout uses data binding to synchronize the page with the latest data. That way, you don’t have to write any of the code that walks through the JSON data and updates the DOM. Instead, you put declarative attributes in the HTML that tell Knockout how to present the data.

 こちらのほうが楽しそうですね。knockout.js がデータバインドでいい感じにするので、DOM とかごりごり扱わなくでもいいのですね。ここはかなり興味湧く部分です。

A big advantage of this architecture is that it separates the presentation layer from the application logic. You can create the Web API portion without knowing anything about how your web page will look. On the client side, you create a “view model” to represent that data, and the view model uses Knockout to bind to the HTML. That lets you easily change the HTML without changing the view model. (We’ll look at Knockout a bit later.)

 ビューとモデルを分離することが最大の目的です。けど、複雑な業務アプリを作ってると、段々と MVVM が崩れていきますよね。( 私だけ? ) それはさておき、この knockout.js 色々使えそうです。jQuery 単体でゴリゴリに開発するより、組み合わせることでかなりコードがすっきりしそうです。そろそろ、HTML の記事にも本腰いれていきたいと思います。サンプルは来週にでも眺めてみよう...

Knockoutjs Starter

Knockoutjs Starter

 
ASP.NET MVC 4 and the Web API

ASP.NET MVC 4 and the Web API

 

※洋書は面白そうなものが多いなぁ。あー、英語完璧に読めるようになりたい!