featuring project silk & liike: 楽しい "モダン" web...
DESCRIPTION
TRANSCRIPT
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.