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

Web 開発の今後

日本マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

デベロッパー エバンジェリスト

井上 章 (いのうえ あきら)

blogs.msdn.com/chack twitter.com/chack411

セッションのゴール Session Takeaways

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

• Project Silk の概要 を学ぶ

patterns & practices Project Silk

Web 開発のトレンド

キーワードとトレンド Keywords and Trend

HTML5 CSS3

ECMAScript 5

Ajax jQuery

Web API MVC

REST JSON

async

Atom

Video Productivity Future Vision 2011

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

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

クライアント サーバー

ネイティブ アプリ

デスクトップ Web アプリ

ASP.NET

Web API

HTTP 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

…

Identity Introduced

Exchange Deployment

AD Deployment

Microsoft Systems Architecture

eCommerce

.NET App Arch

Data Access

Composite Apps

Security and Perf

SOA

Smart Client

Mobile Clients

Web Client

Enterprise Library

Smart Client Software Factory

GAX/GAT

Web App Guidance

.NET Application Architecture Guide 1.0

1st p&p Summit Event

Enterprise Solution Patterns for .NET 1st Patterns Guide

Data Access

1st Application Block

“Improving Web App Security” 1st Security Guidance

Start work on “in-tools” experience”

CodePlex & CCE

Millionth EntLib Download

CAB 1st Composite App

Framework Team Formed

Dev Team creates “Team Room”

p&p Agile Dev Center opens

2001 2002 2003 2004 2006 2007 2000 2008 2009 2005

SharePoint

OBA

S+S

ESB

MSDN Dev Center

Exchange Deployment 1st Guide ms.com Center

Prism WPF/ Silverlight

Applications

SharePoint Applications

Unity DI Container

Enterprise Service Bus

WCF Security

Application Architecture

Guide 2.0

VSTS ALM

http://silk.codeplex.com/

Demo Project Silk & MileageStats

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

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

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

BBQ Plug-in jQuery Templates jQuery UI Widget Factory JavaScript ASP.NET MVC

Clien

t S

erv

er

Navigation

Layout Manager

Pub/Sub

Data Manager

JSON Endpoints

Widget Widget Widget

Template Template

Data Cache

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

UI モジュール UI 要素 (コントロール等)

Behavioral モジュール 要素への振る舞いを追加 (アニメーション等)

Infrastructure モジュールUI に限定しないアプリケーション全体で必要とされる役割 (データ アクセスや通信等)

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 = {}; } };

http://docs.jquery.com/Plugins/Authoring

// 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); }); }; })(jQuery);

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

// tagger widgets definition (function($) { $.widget('qs.tagger', { options: { dataUrl: '' }, _create: function () { ... }, destroy: function () { ... $.Widget.prototype.destroy.call(this); } }); }(jQuery));

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

jQuery.widget('ns.name', {...});

Demo jQuery UI Widget Factory

JavaScript の単体テスト

http://docs.jquery.com/QUnit

<!-- Contained in test.htm --> <!-- Code under test --> <script src="../Debug/mstats.header.js"></script> <!-- Unit tests --> <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 開発の今後 ...

Web 開発の今後

Web 開発の今後

Web 開発の今後

http://phonegap.com/

http://dev.windows.com/

Web 開発の今後

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.