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

Web 開発のトレンド

キーワードとトレンドKeywords and Trend ECMAScript 5 CSS3 HTML5 jQuery Ajax Web API MVC async REST Atom JSON

VideoProductivity 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.aspxWindows Azure GuidanceEnterprise Library GuidanceMobile Web GuidanceWindows 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” ApplicationsDeployment 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 FrameworkTeam Formed Enterprise “Improving Web App Security” Service Bus 1st Security Guidance .NET Application Start work on WCF Architecture Guide 1.0 “in-tools” experience” Security2000 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

http://silk.codeplex.com/

DemoProject 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 TemplatesClient Pub/Sub jQuery UI Widget Widget Widget Widget Factory Data Manager Data Cache JavaScriptServer JSON Endpoints ASP.NET MVC

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

UI モジュール UI 要素 (コントロール等)Behavioral モジュール要素への振る舞いを追加 (アニメーション等) UI に限定しないアプリケーション全体で必要とされる役割Infrastructure モジュール (データアクセスや通信等) JavaScript Object jQuery Plug-ins jQuery UI WidgetsUI モジュール × ○ ◎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/});

DemojQuery UI Widget Factory

JavaScript の単体テスト

http://docs.jquery.com/QUnit<script src="../Debug/mstats.header.js"></script><script src="mstats.header.tests.js"></script>// mstats.header.tests.jsmodule(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, ...);});

DemoQUnit による JavaScript 単体テスト

Web 開発の今後 ...

Web 開発の今後

Web 開発の今後 http://phonegap.com/ http://dev.windows.com/

Web 開発の今後に向けて開発者が避けては通れない Web 技術 HTML5 / CSS3 / JavaScript ... 最適な技術選択とアプリケーションアーキテクチャの検討複雑化するクライアントサイド実装への対応最適な開発環境・ツールの選択コーディング、デバッグ、テストへの支援

patterns & practices: Project Silkhttp://silk.codeplex.com/Project Silk: Client-Side Web Development for Modern Browsershttp://msdn.microsoft.com/en-us/library/hh396380.aspxMSDN アーキテクチャセンター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.

http://vsug.jp	596
http://blogs.itmedia.co.jp	300
http://blogs.msdn.com	96
http://www.5z5.com	15
http://a0.twimg.com	4
http://www.hanrss.com	3
http://www.acomputerportal.com	1
http://www.newsblur.com	1
http://webcache.googleusercontent.com	1

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

by chack411 on Jan 27, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 1,017

Statistics

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