Post on 27-Apr-2018
transcript
Building Responsive Web Applications with MVC4, WebAPI and HTML5Brendan KowitzSenior Developer
DEV332
Who am I?
brendan.kowitz@readify.net
http://www.kowitz.net
@brendankowitz
Overview
Going offline
Packaging
Data + WebAPI
Building a great user experience
Build for a wide audience
MVC4
Multi BrowserMulti PlatformMulti Form factorMulti Screen Resolutions
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
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
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
Responsive options
Do nothingJust add the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive options
Adaptive Layout• CSS3 Media queries
Responsive options
Adaptive Rendering
Responsive options
Responsive client-side apps
Mini Quizvar myArray = new Array();
myArray["first"] = "Hello";myArray["second"] = "World";
alert(myArray.length);
02nullundefinedthrow
JavaScript applicationsHow can we write better JavaScript?
Common client-side patterns
Module PatternNamespaces (MS Ajax Toolkit)MVC (Spinejs, Backbonejs, JavaScript MVC)MVVM (Knockout, WinJS)
MVVM
View
ViewModel
Model
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());
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
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
Traditional apps
Browser Request
Index.html
MVC4
Traditional Request / Response for ALL rendered content and assets
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
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/
introducing…
Tiny Contact Manager
Screen shots
demo Building a responsive UI
MVC4 WebAPIGreat for building convention based REST APIsGreat support for JSON, XML data types
demo
WebAPI
Working with AsyncPromise Pattern
$.ajax("http://www.example.org/somedata.json”) .then(myFunc, myFailure);
jQuery 1.5+
Working with AsyncPromise Pattern
WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay(JSON.parse(response.responseText));});
WinJS
Cache manifestCACHE MANIFEST## Version: 1.0
CACHE:/m/Content/background.png/m/index.htm/m/scripts/require.js/m/scripts/main-built.js
NETWORK:*
Cache manifestLeverage MVC4 to programmatically build this
demo
Cache manifest
Using LocalstorageUnder the HTML5 group of technologiesAccess can vary based on privacy settings on the deviceLimited StorageAvailable in PhoneGap*
(after device ready event)
RecapWhy we need responsive appsClient-side patternsUI ToolkitsHTML5 FormsWebAPICache Manifest
Bundling and minificationSystem.web.optimisationsNode.js tools:
Require.js optimiserStackservice Bundler:
Require.jsr.js is the Require.js optimiser
npm install requirejs -gnode r.js -o scripts/app.build.js
demo
Require.js
Wrap up
Going offline
Packaging
Data + WebAPI
Building a great user experience üüüü
Further reading
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
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?
Get the code
http://tinycontactmanager.codeplex.com
Related ContentAZRILL102 Exploring Windows Azure Storage
Modern App Development: Demo Pod 2
MCPD: Web Developer 4
Find Me Next up at the Speaker Lounge
© 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.