Downloaded 56 times
![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 = {};
}
};](https://image.slidesharecdn.com/modern-web-devproject-silkvsugshare-120127060953-phpapp02/85/patterns-practices-Project-Silk-HTML5-Web-23-320.jpg)
![// 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/'});](https://image.slidesharecdn.com/modern-web-devproject-silkvsugshare-120127060953-phpapp02/85/patterns-practices-Project-Silk-HTML5-Web-25-320.jpg)
![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', '...');
});](https://image.slidesharecdn.com/modern-web-devproject-silkvsugshare-120127060953-phpapp02/85/patterns-practices-Project-Silk-HTML5-Web-28-320.jpg)
Uploaded byAkira Inoue
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
VSUG Day 2012 Winter セッション資料 http://vsug.jp/tabid/228/EventID/18/Default.aspx
More Related Content
![[JavaOne Tokyo 2012] JavaFX and Web Integration](https://cdn.slidesharecdn.com/ss_thumbnails/js1-13dl-120416013809-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
- 1. patterns & practices"Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 デベロッパー エバンジェリスト 井上 章 (いのうえ あきら) blogs.msdn.com/chack twitter.com/chack411
- 2. セッションのゴール Session Takeaways • Web開発のトレンドと今後 を知る • Project Silk の概要 を学ぶ
- 3. patterns & practicesProject Silk
- 4.
- 5. キーワードとトレンド Keywords and Trend ECMAScript 5 CSS3 HTML5 jQuery Ajax Web API MVC async REST Atom JSON
- 6.
- 7. 近未来の IT, Cloud,Web ... http://www.microsoft.com/office/vision/
- 8. ネイティブ アプリ Web API デスクトップ Web アプリ HTTP ASP.NET REST JSON モバイル XML Web アプリ サーバー クライアント
- 9. サーバー サイド 開発 クライアント サイド 開発
- 10. patterns & practices Project Silk
- 11. マイクロソフト プラットフォームを使った アプリケーションの設計開発および実装のリファレンス （ドキュメント &サンプルコード） 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 …
- 12. 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
- 13.
- 16. Demo Project Silk &MileageStats
- 17. Project Silk: MileageStats に見る アーキテクチャとテクノロジー
- 18.
- 19. 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
- 20.
- 22. UI モジュール UI 要素 (コントロール等) Behavioral モジュール 要素への振る舞いを追加 (アニメーション等) UI に限定しないアプリケーション全体で必要とされる役割 Infrastructure モジュール (データ アクセスや通信等) JavaScript Object jQuery Plug-ins jQuery UI Widgets UI モジュール × ○ ◎ Behavioral モジュール ○ ◎ ○ Infrastructure モジュール ◎ ○ ×
- 23. 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 = {}; } };
- 24. // Code examplenot 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();
- 25. // tagger widgetsdefinition (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/'});
- 26. Demo jQuery UI WidgetFactory
- 27.
- 28. http://docs.jquery.com/QUnit <!-- Contained intest.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', '...'); });
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Web 開発の今後 http://phonegap.com/ http://dev.windows.com/
- 35. Web 開発の今後に向けて 開発者が避けては通れない Web 技術 HTML5 / CSS3 / JavaScript ... 最適な技術選択と アプリケーション アーキテクチャの検討 複雑化するクライアント サイド実装への対応 最適な開発環境・ツールの選択 コーディング、デバッグ、テストへの支援
- 36. 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/
- 37. © 2012 MicrosoftCorporation. 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.