3. アジェンダ
Visual Studio 2012 Web Developments
• Web 技術トレンドと ASP.NET
• マルチデバイス エクスペリエンス
• モダン Web アプリケーションとアーキテクチャの変化
• TypeScript
• サービス連携とクライアント実装
• Web 開発をサポートする Visual Studio 2012
• まとめ ～ Visual Studio 2012 Web 開発の今後 ～
10. オープン ソース
Git on CodePlex
• 対象ソース コード
• ASP.NET MVC 4
• Web API
• Web Pages (Razor)
• 開発への貢献
• Apache License 2.0 の元で公開
• Web または Git にて参照可能
• フィードバック、バグ修正、
新機能提案のサブミット
• マイクロソフトのサポート
• 製品としてサポートは継続 http://aspnetwebstack.codeplex.com/
• 開発チームによる厳格なレビュー
11. ASP.NET Web フォーム
Improvements of ASP.NET Web Forms
豊富なサーバー コントロール
イベント駆動型プログラミング
• HTML5 対応プロジェクト テンプレート
• NuGet パッケージ マネージャー対応
• URL ルーティング
• モデル バインディング
• 強く型付けされたデータ コントロール
18. マルチデバイス対応手法の選択
Design and Mobile Experience
• レスポンシブ Web
• デザイン重視
• デスクトップとスマートフォンで共通した Web サイトの提供
• jQuery Mobile
• タッチ操作重視
• スマートフォンに特化した Web サイトの提供
• デバイス判別とビューの切り替え
• デバイス毎に最適化した Web サイトの提供
20. モダン Web アプリ エクスペリエンス
Single Page Application Architecture
ASP.NET
HTML
View
HTTP
Async
View
Model REST Web API
JSON
クライアント XML サーバー
21. Project Silk and Liike
Project Silk (シルク)
Client-Side Web Development for Modern Browsers
モダン ブラウザのための
クライアント サイド Web 開発ガイダンス
http://silk.codeplex.com/
Project Liike (リーケ)
Building Modern Mobile Web Apps
モダン モバイル ブラウザのための
クライアント サイド Web 開発ガイダンス
http://msdn.microsoft.com/en-us/library/hh994907
22. シングル ページ アプリケーション
Single Page Application (SPA)
• 特徴
• 単一ページ構成のクライアント中心実装
SPA
• 優れた Web UX とマルチデバイス対応
• JavaScript, Web API や HTML5 を活用
23. シングル ページ アプリケーション構成
Single Page Application (SPA)
/Home/Index
HTML, CSS Web UI
/Home/Index HTML/CSS/JS
Todo List
MVC 4
Todo Item
Data Services
/api/todolist
jQuery*.js JSON/XML
knockout.js /api/todo Web API
Entity Framework
クライアント サーバー
30. 動的型付けから静的型付けへ
TypeScript Type System
• 静的型付けシステムの導入
• JavaScript のあいまいさを排除
• 安全性・可読性・生産性の向上 interface I { }
class C { }
• 型付けするか否かは自由 module M { }
• 動的型付けの利点も生かせる { s: string; }
number[]
() => bool
• any 型: すべての型の基本
• プリミティブ (基本) 型
• number, string, bool, null, undefined
• オブジェクト型
• class, module, interface
• void 型: 戻り値なしの関数で使用
31. 静的型付け記述例 (プリミティブ型)
TypeScript Type System Example
// Any // Boolean
var x: any; // 明示的 var b: bool; // 明示的
var y; // y: any と同じ var yes = true; // yes: bool = true と同じ
var z: { a; b; }; // z: { a: any; b: any; } と同じ var no = false; // no: bool = false と同じ
function f(x) { // f(x: any): void と同じ
console.log(x); // Number
} var x: number; // 明示的
var y = 0; // y: number と同じ
var z = 123.456; // z: number = 123.456 と同じ
// Null
var n: number = null; // 基本型は Null 設定可
var x = null; // x: any = null と同じ // String
var s: string; // 明示的
var empty = “”; // empty: string = “” と同じ
// Undefined var abc = ‘abc’; // abc: string = “abc” と同じ
var n: number; // n: number = undefined と同じ
var x = undefined; // x: any = undefined と同じ
32. クラスとモジュール
TypeScript Classes and Modules
• モジュール化の利点 interface I { }
• 疎結合化と相互影響の低減、再利用性の向上 class C { }
module M { }
• デバッグ、テスト、メンテナンスの容易性 { s: string; }
• 大規模開発への対応 number[]
() => bool
• ECMAScript 6 (草案) ベースの実装
• Class, Module, Arrow Function 構文
• オブジェクト指向プログラミングの導入
• ポピュラーなモジュールシステムもサポート (External Modules)
• CommonJS / AMD modules
33. Interface, Class, Module 記述例
TypeScript Interface, Classes and Modules Example
// Interface // Class
interface Mover { class Greeter {
move(): void; greeting: string;
getStatus(): { speed: number; }; constructor (message: string) {
} this.greeting = message;
}
interface Shaker { greet() {
shake(): void; return "Hello, " + this.greeting;
getStatus(): { frequency: number; }; }
} }
interface MoverShaker extends Mover, Shaker { var greeter = new Greeter(“world”);
getStatus(): { speed: number; greeter.greet();
frequency: number; };
}
// Module (Internal)
interface Person { module Sayings {
FullName: string; export class Greeter {
Age: number; ...
} }
function greeter(person: Person) { }
} var greeter = new Sayings.Greeter("world");
37. TypeScript ロードマップ
Compiler and Language Improvements
• 0.9.x
• Generics
• Improve compiler performance
• Improvements to type system to help model a larger variety of JS
libraries
• Align with ECMAScript 6
• Usability improvements to VS plugin
• 1.x
• Async/Await, Mixins, Protected access
• ES6-compatible codegen
43. バーチャル WMM w/ Kinect on Cloud
Kinect with ASP.NET SignalR and Windows Azure
HTTP HTTP
Cloud Services
ASP.NET
SignalR
HTML5 Web .NET Console
Application Application
Azure Service Bus
(or Redis)
http://wmm.cloudapp.net/
