patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後

patterns & practices "Project Silk" に見る
HTML5 とモダンブラウザのための
Web 開発の今後
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
デベロッパーエバンジェリスト
井上章 (いのうえあきら)
blogs.msdn.com/chack twitter.com/chack411

セッションのゴール
Session Takeaways

• Web 開発のトレンドと今後を知る

• Project Silk の概要を学ぶ

patterns & practices Project Silk

キーワードとトレンド
Keywords and Trend ECMAScript 5
CSS3
HTML5

jQuery
Ajax
Web API
MVC
async

REST Atom
JSON

Video
Productivity Future Vision 2011

近未来の IT, Cloud, Web ...

http://www.microsoft.com/office/vision/

ネイティブ
アプリ
Web API

デスクトップ
Web アプリ
HTTP ASP.NET
REST
JSON
モバイル XML
Web アプリ

サーバー
クライアント

サーバーサイド開発クライアントサイド開発

patterns & practices
Project Silk

マイクロソフトプラットフォームを使った
アプリケーションの設計開発および実装のリファレンス
（ドキュメント & サンプルコード）
patterns & practices MSDN ホーム:
http://msdn.microsoft.com/en-us/library/ff921345.aspx

Windows Azure Guidance
Enterprise Library Guidance
Mobile Web Guidance
Windows Phone 7 Guidance
…

Application
Web App Architecture
Guidance Guide 2.0
Enterprise Millionth EntLib
Enterprise Solution Library Download
Patterns for .NET
p&p Agile
1st Patterns Guide Dev Center opens Prism
Data Access CodePlex WPF/ Silverlight
1st Application MSDN Dev Center
& CCE Applications
Block SharePoint
Exchange Dev Team creates
“Team Room” Applications
Deployment
1st Guide 1st p&p Summit Event Smart Client Unity DI
ms.com Center Software Factory Container
GAX/GAT
CAB VSTS
Identity Introduced 1st Composite App ALM
Framework
Team Formed Enterprise
“Improving Web App Security”
Service Bus
1st Security Guidance
.NET Application Start work on WCF
Architecture Guide 1.0 “in-tools” experience” Security

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009

Exchange Deployment eCommerce Composite Apps SOA SharePoint
AD Deployment .NET App Arch Security and Perf Smart Client OBA
Microsoft Systems Data Access Mobile Clients S+S
Architecture Web Client ESB

Demo
Project Silk & MileageStats

Project Silk: Mileage Stats に見る
アーキテクチャとテクノロジー

http://benalman.com/projects/jquery-bbq-plugin/

http://api.jquery.com/category/plugins/templates/

Navigation BBQ Plug-in

Layout Manager
Template Template jQuery
Templates
Client

Pub/Sub

jQuery UI
Widget Widget Widget Widget Factory

Data Manager Data Cache JavaScript
Server

JSON Endpoints ASP.NET MVC

JavaScript の
モジュール化アプローチ

UI モジュール UI 要素 (コントロール等)
Behavioral モジュール要素への振る舞いを追加 (アニメーション等)
UI に限定しないアプリケーション全体で必要とされる役割
Infrastructure モジュール
(データアクセスや通信等)

JavaScript Object jQuery Plug-ins jQuery UI Widgets
UI モジュール × ○ ◎
Behavioral モジュール ○ ◎ ○
Infrastructure モジュール ◎ ○ ×

mstats.dataStore = {
_data: {},

get: function (token) {
return this._data[token];
},

set: function (token, payload) {
this._data[token] = payload;
},

clear: function (token) {
this._data[token] = undefined;
},

clearAll: function () {
this._data = {};
}
};

// Code example not in Mileage Stats

(function($) {
$.fn.doubleSizeMe = function() {

return this.each(function() {
var $this = $(this),
width = $this.width(),
height = $this.height();

$this.width(width * 2);
$this.height(height * 2);
});

};

http://docs.jquery.com/Plugins/Authoring })(jQuery);

// How to use doubleSizeMe plug-in
$('.icon').doubleSizeMe();

// tagger widgets definition

(function($) {
$.widget('qs.tagger', {

options: {
dataUrl: ''
jQuery.widget('ns.name', {...}); },
_create: function () {
...
},
destroy: function () {
...
$.Widget.prototype.destroy.call(this);
}

});
}(jQuery));

// How to use tagger widget
$('span[data-tag]').tagger({
dataUrl: 'http://example.com/'});

http://docs.jquery.com/QUnit



<script src="../Debug/mstats.header.js"></script>

<script src="mstats.header.tests.js"></script>

// mstats.header.tests.js
module('Header Widget Tests', {...});
test('Test 1: header', function() {
expect(1);
var header = $('#header').header(); // Arrange
header.header('option', 'title', 'test title'); // Act
// Assert
equal($('[data-title]').text(), 'test title', '...');
});

Demo
QUnit による JavaScript 単体テスト

Web 開発の今後

http://phonegap.com/

http://dev.windows.com/

Web 開発の今後に向けて
開発者が避けては通れない Web 技術
HTML5 / CSS3 / JavaScript ...

最適な技術選択と
アプリケーションアーキテクチャの検討
複雑化するクライアントサイド実装への対応

最適な開発環境・ツールの選択
コーディング、デバッグ、テストへの支援

patterns & practices: Project Silk
http://silk.codeplex.com/

Project Silk: Client-Side Web Development for Modern Browsers
http://msdn.microsoft.com/en-us/library/hh396380.aspx

MSDN アーキテクチャセンター
http://msdn.microsoft.com/ja-jp/architecture/

MSDN ASP.NET デベロッパーセンター
http://msdn.microsoft.com/ja-jp/asp.net/

THE TRUTH IS OUT THERE ～井上章のブログ～
http://blogs.msdn.com/chack/

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and
Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (20)

Similar to patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後

Similar to patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後 (20)

More from Akira Inoue

More from Akira Inoue (20)

patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後