Featuring Project Silk & Liike

楽しい "モダン" Web 開発のちょっとディープなお話

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

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

エバンジェリスト

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

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

セッションのゴールSession Takeaways

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

• Project Silk / Liike の概要 を学ぶ

アジェンダProject Silk / Liike

• Web 開発のトレンド

• patterns & practices Project Silk / Liike

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

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

• Project Liike: Mileage Stats に見るモバイル Web エクスペリエンス

• Web 開発の今後

Web 開発のトレンド

Productivity Future Vision近未来の IT, Cloud, Web ...

• 不可欠な Web 技術 (HTTP 1.1, HTML5, CSS3 ...)

• Web API の進化と普及 (REST, JSON ...)

• サーバー ロジック と クライアント UI の疎結合

• クライアント側実装の多様化

• HTML5, CSS3, ECMAScript 5

• マルチデバイス (PC, Tablet, Mobile …)

• レスポンシブ Web デザイン

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

マルチデバイス エクスペリエンスDevices, Platforms, Browsers

• クロス デバイス

• PC, スマートフォン, タブレット ...

• クロス プラットフォーム

• iOS, Android, Windows Phone ...

• クロス ブラウザー• Web 標準と HTML5 / CSS3

• 実装レベル差異への対応

モダン Web アプリ エクスペリエンスSingle Page Application Architecture

クライアント サーバー

ASP.NET

RESTJSONXML

HTML

View Model

HTTPView

Async

Web API

patterns & practicesProject Silk / Liike

patterns & practices ガイダンス

マイクロソフト プラットフォームを使った

アプリケーションの設計開発および実装のリファレンス

（ドキュメント & サンプルコード）

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

…

Project Silk (シルク)

Client-Side Web Development for Modern Browsers

モダン ブラウザのためのクライアント サイド Web 開発ガイダンス

http://silk.codeplex.com/

Project Liike (リーケ)

Building Modern Mobile Web Apps

モダン モバイル ブラウザのためのクライアント サイド Web 開発ガイダンス

http://msdn.microsoft.com/en-us/library/hh994907

Project Silk and Liike

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

BBQ Plug-in

jQueryTemplates

jQuery UIWidget Factory

JavaScript

ASP.NET MVC

Clien

tS

erv

er

Navigation

Layout Manager

Pub/Sub

Data Manager

JSON Endpoints

Widget Widget Widget

Template Template

Data Cache

Mileage Stats: アーキテクチャ

Mileage Stats: テクノロジー

• BBQ Plug-in• jQuery Back Button & Query Library• http://benalman.com/projects/jquery-bbq-plugin/

• Ajax 処理におけるブラウザ履歴管理プラグイン

• jQuery Templates Plug-in• http://api.jquery.com/category/plugins/templates/

• テンプレート レンダリング エンジン

• Publish and Subscribe Pattern (pub/sub)• Object 間ルーズ コミュニケーションのためのデザインパターン

• Mileage Stats では独自実装 (mstats.pubsub.js)

• jQuery UI Widget Factory• jQuery UI で提供されるモジュール ビルディング ブロック

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

モジュール化の利点

• モジュールの疎結合化と相互影響の低減、再利用性の向上

• デバッグ、テスト、メンテナンスの容易性

• チーム開発への対応

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

• JavaScript Objects

• jQuery Plug-ins• jQuery を拡張するための実装手段

• jQuery UI Widgets• jQuery UI で提供される Widget Factory を使った実装

Modularity: モジュール性

モジュールの種類と役割

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

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

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

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

JavaScript Object jQuery Plug-ins jQuery UI Widgets

UI モジュール × ○ ◎

Behavioral モジュール ○ ◎ ○

Infrastructure モジュール ◎ ○ ×

モジュール種別とアプローチの選択

JavaScript の基本的なモジュール実装手段

Mileage Stats のJavaScript Objects 実装

mstats.pinnedsite.js

mstats.data.js

mstats.pubsub.js

mstats.events.js

...

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

}};

JavaScript Objects

jQuery を拡張するためのモジュール実装方法• シンプルな実装

• JavaScript の複雑さを回避

• jQuery ベースの容易な機能拡張

jQuery Plug-ins 実装オフィシャル ガイドライン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();

jQuery Plug-ins

jQuery UI で提供されるWidget Factory を使ったモジュール実装

• ライフタイム、ステート、継承、テーマ、Object/Widget との通信などで利点

Mileage Stats のjQuery UI Widgets 実装mstats.status.js, mstats.summary.js ...

Widget QuickStartガイダンスでは独立した章とサンプルが用意

// 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', {...});

jQuery UI Widgets

Project Liike: Mileage Stats に見るモバイル Web エクスペリエンス

CSS3 メディア クエリによるスタイルとレイアウト変更

• 単一 HTML マークアップによるUI エクスペリエンスの提供

• デザイン中心のマルチデバイス対応手法

レスポンシブ Web デザインモバイル Web エクスペリエンス

div {font-family: Meiryo;font-size: 1em;

}

...

@media only screen and (max-width: 640px) {

div {font-size: 0.5em;text-align: center;

}

}

ASP.NET 4.5 によるビューの切り替え (Display Modes)

• デバイス間で異なる HTML マークアップと UI エクスペリエンスの提供

• サーバーサイドにおけるマルチデバイス対応手法

デバイス検出とビューの切り替えモバイル Web エクスペリエンス

単一ページ構成のクライアント中心実装

• JavaScript, Web API や HTML5 を活用した、優れた Web UX の提供

Single Page Application Architectureモバイル Web エクスペリエンス

Visible UIHTML/CSS Web UI

HTML/CSS/JS

MVC 4

Data ServicesJSON/XML

Web API

Data Access LayerJavaScript

Application LayerJavaScript

NavigationAPIs

クライアント サーバー

Web 開発の今後 ...

HTML5 / CSS3

• Web 標準として急速に普及

• マルチ プラットフォームにおける共通 UI マークアップ

• 残るクロス ブラウザ・クロス プラットフォーム問題

言語とフレームワークとライブラリと...Web 開発の今後

JavaScript

• 第一級のプログラミング言語としての進化と普及

• オブジェクト指向の知識と理解

• JavaScript ライブラリの普及やサーバー サイドへの応用

• jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...

• サーバー サイド JavaScript "node.js"

言語とフレームワークとライブラリと ...Web 開発の今後

進む Web API の利用

• サーバー サイドのサービス インターフェースの実装と公開

• 実装手段の選択、非同期処理、ステートレス ...

クライアント サイド実装の多様化

• Web アプリケーション アーキテクチャの変化

• 非同期処理の知識と理解

• マルチデバイス対応

サーバー サイドのサービス化とその利用Web 開発の今後

応用が進む HTML5 + CSS3 + JavaScript

• Windows 8: Windows ストア アプリ開発

• HTML5 + CSS3 + JavaScript + WinRT APIs

• Windows デベロッパー センター: http://dev.windows.com/

• これまでも...

• Windows デスクトップ ガジェット / Google デスクトップ ガジェット ...

ネイティブ アプリ開発のための Web 技術Web 開発の今後

Web 開発の今後に向けて

開発者が避けては通れない Web 技術

HTML5 / CSS3 / JavaScript ...

最適な技術選択とアプリケーション アーキテクチャの検討

複雑化するクライアント サイド実装への対応

最適な開発環境・ツールの選択

コーディング、デバッグ、テストへの支援

patterns & practiceshttp://msdn.microsoft.com/en-us/library/ff921345

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

Project Liike: Building Modern Mobile Web Appshttp://msdn.microsoft.com/en-us/library/hh994907

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.