![Page 1: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/1.jpg)
Building Responsive Web Applications with MVC4, WebAPI and HTML5Brendan KowitzSenior Developer
DEV332
![Page 3: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/3.jpg)
Overview
Going offline
Packaging
Data + WebAPI
Building a great user experience
![Page 4: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/4.jpg)
Build for a wide audience
MVC4
Multi BrowserMulti PlatformMulti Form factorMulti Screen Resolutions
![Page 5: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/5.jpg)
Why responsive mobile web applications
Responsive, fluid usage, respond to online and offline events
Interact with device hardware* and storage to create a personalised experience
Build and package for app stores / market places, in place of native apps
![Page 6: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/6.jpg)
Responding to mobile growth
Own a smartphone
20112012
Mobile web access
20102012
http://tinyurl.com/9bcyq86
44%
59%
26%
58%
http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html
![Page 7: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/7.jpg)
Why responsive web applicationsBest of desktop smart-client apps
Combined with the very latest and best of the web
Great for enhancing the user experience of web applications
![Page 8: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/8.jpg)
Responsive options
Do nothingJust add the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
![Page 9: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/9.jpg)
Responsive options
Adaptive Layout• CSS3 Media queries
![Page 10: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/10.jpg)
Responsive options
Adaptive Rendering
![Page 11: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/11.jpg)
Responsive options
Responsive client-side apps
![Page 12: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/12.jpg)
Mini Quizvar myArray = new Array();
myArray["first"] = "Hello";myArray["second"] = "World";
alert(myArray.length);
02nullundefinedthrow
![Page 13: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/13.jpg)
JavaScript applicationsHow can we write better JavaScript?
![Page 15: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/15.jpg)
Common client-side patterns
Module PatternNamespaces (MS Ajax Toolkit)MVC (Spinejs, Backbonejs, JavaScript MVC)MVVM (Knockout, WinJS)
![Page 16: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/16.jpg)
MVVM
View
ViewModel
Model
![Page 17: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/17.jpg)
Knockout<p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p>
function AppViewModel() { this.firstName = ko.observable("Bert"); this.lastName = ko.observable("Bertington");}
ko.applyBindings(new AppViewModel());
![Page 18: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/18.jpg)
Responsive UI toolkitsjQuery UI + jQueryMobileTelerik’s Kendo UI + MobileTwitter bootstrap
iOS Android WP7 DesktopJQueryUI / Mobile Excellent Good Functional ExcellentKendo Excellent Excellent Not Supported ExcellentBootstrap Good Good Good Excellent
![Page 19: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/19.jpg)
HTML formsUse browser and device native features whenever possibleInput types: eg. number, email, url, date should be usedUse Polyfills to broaden compatibilityhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 20: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/20.jpg)
Traditional apps
Browser Request
Index.html
MVC4
Traditional Request / Response for ALL rendered content and assets
![Page 21: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/21.jpg)
Structuring responsive appsInitial Request
Application.htm
MVC4
RequireJS Loader
Page1 Partial.htm
IndexViewModel.js
Application.js (bootstrap)
ViewModel (#index)
ViewModel (#login)
Model (LoginModel)JSON Requests
HTML5 localstorage
Handling disconnection
![Page 22: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/22.jpg)
Application compositionUsing libraries in your page
CommonJS specificationRequireJS (Modules/AsynchronousDefinition)Node.js (Modules/1.0)
Script Loaders (load scripts in parallel)YepNope YabbleLABjs
http://www.commonjs.org/
![Page 23: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/23.jpg)
introducing…
Tiny Contact Manager
![Page 24: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/24.jpg)
Screen shots
![Page 25: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/25.jpg)
demo Building a responsive UI
![Page 26: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/26.jpg)
MVC4 WebAPIGreat for building convention based REST APIsGreat support for JSON, XML data types
![Page 27: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/27.jpg)
demo
WebAPI
![Page 28: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/28.jpg)
Working with AsyncPromise Pattern
$.ajax("http://www.example.org/somedata.json”) .then(myFunc, myFailure);
jQuery 1.5+
![Page 29: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/29.jpg)
Working with AsyncPromise Pattern
WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay(JSON.parse(response.responseText));});
WinJS
![Page 30: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/30.jpg)
Cache manifestCACHE MANIFEST## Version: 1.0
CACHE:/m/Content/background.png/m/index.htm/m/scripts/require.js/m/scripts/main-built.js
NETWORK:*
![Page 31: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/31.jpg)
Cache manifestLeverage MVC4 to programmatically build this
![Page 32: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/32.jpg)
demo
Cache manifest
![Page 33: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/33.jpg)
Using LocalstorageUnder the HTML5 group of technologiesAccess can vary based on privacy settings on the deviceLimited StorageAvailable in PhoneGap*
(after device ready event)
![Page 34: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/34.jpg)
RecapWhy we need responsive appsClient-side patternsUI ToolkitsHTML5 FormsWebAPICache Manifest
![Page 35: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/35.jpg)
Bundling and minificationSystem.web.optimisationsNode.js tools:
Require.js optimiserStackservice Bundler:
![Page 37: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/37.jpg)
Require.jsr.js is the Require.js optimiser
npm install requirejs -gnode r.js -o scripts/app.build.js
![Page 38: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/38.jpg)
demo
Require.js
![Page 39: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/39.jpg)
Wrap up
Going offline
Packaging
Data + WebAPI
Building a great user experience üüüü
![Page 40: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/40.jpg)
Further reading
![Page 41: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/41.jpg)
Further watchingPhil Haack
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T
Steve Sandersonhttp://channel9.msdn.com/Events/MIX/MIX11/FRM08http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159
Douglas Crockford: Serversidenesshttp://vimeo.com/31363829
![Page 42: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/42.jpg)
Think aboutWhat’s one pattern you can use to help develop responsive apps?
What’s one feature in ASP.NET MVC4 that helps with responsive apps?
Would you consider writing a responsive app for your next project?
![Page 43: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/43.jpg)
Get the code
http://tinycontactmanager.codeplex.com
![Page 44: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/44.jpg)
Related ContentAZRILL102 Exploring Windows Azure Storage
Modern App Development: Demo Pod 2
MCPD: Web Developer 4
Find Me Next up at the Speaker Lounge
![Page 45: Building Responsive Web Applications with MVC4, …seach9.blob.core.windows.net/teched/2012/aus/DEV332_… · PPT file · Web viewBuilding Responsive Web Applications with MVC4,](https://reader031.vdocuments.site/reader031/viewer/2022021820/5ae34c5d7f8b9a90138d57d6/html5/thumbnails/45.jpg)
© 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.