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
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
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/
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/'});
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 開発の今後
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 開発の今後

  • 1.
    patterns & practices"Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 デベロッパー エバンジェリスト 井上 章 (いのうえ あきら) blogs.msdn.com/chack twitter.com/chack411
  • 2.
    セッションのゴール Session Takeaways • Web開発のトレンドと今後 を知る • Project Silk の概要 を学ぶ
  • 3.
  • 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.
  • 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.
  • 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.