1 / 45

Building Responsive Web Applications with MVC4, WebAPI and HTML5

DEV332. Building Responsive Web Applications with MVC4, WebAPI and HTML5. Brendan Kowitz Senior Developer. Who am I?. b rendan.kowitz@readify.net. http://www.kowitz.net. @ brendankowitz. Overview. Building a great user experience. Data + WebAPI. Going offline. Packaging.

vashon
Download Presentation

Building Responsive Web Applications with MVC4, WebAPI and HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. DEV332 Building Responsive Web Applications with MVC4, WebAPI and HTML5 Brendan Kowitz Senior Developer

  2. Who am I? brendan.kowitz@readify.net http://www.kowitz.net @brendankowitz

  3. Overview Building a great user experience Data + WebAPI Going offline Packaging

  4. Build for a wide audience • Multi Browser • Multi Platform • Multi Form factor • Multi Screen Resolutions MVC4

  5. Why responsive mobile web applications • Responsive, fluid usage, respond to online and offline events • Interact with device hardware* and storage to create a personalisedexperience • Build and package for app stores / market places, in place of native apps

  6. Responding to mobile growth 59% 58% 44% 26% http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html http://tinyurl.com/9bcyq86

  7. Why responsive web applications • Best of desktop smart-client apps • Combined with the very latest and best of the web • Great for enhancing the user experience of web applications

  8. Responsive options Do nothing Just add the meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

  9. Responsive options • Adaptive Layout • CSS3 Media queries

  10. Responsive options Adaptive Rendering

  11. Responsive options Responsive client-side apps

  12. Mini Quiz varmyArray = new Array(); myArray["first"] = "Hello"; myArray["second"] = "World"; alert(myArray.length); • 0 • 2 • null • undefined • throw

  13. JavaScript applications • How can we write better JavaScript?

  14. Common client-side patterns http://xkcd.com/292/

  15. Common client-side patterns • Module Pattern • Namespaces (MS Ajax Toolkit) • MVC (Spinejs, Backbonejs, JavaScript MVC) • MVVM (Knockout, WinJS)

  16. MVVM Model ViewModel View

  17. 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());

  18. Responsive UI toolkits • jQuery UI + jQueryMobile • Telerik’s Kendo UI + Mobile • Twitter bootstrap

  19. HTML forms • Use browser and device native features whenever possible • Input types: eg. number, email, url, date should be used • Use Polyfills to broaden compatibility • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

  20. Traditional apps Browser Request Index.html MVC4 Traditional Request / Response for ALL rendered content and assets

  21. Structuring responsive apps Initial Request Application.htm RequireJS Loader Application.js (bootstrap) MVC4 Page1 Partial.htm ViewModel (#index) IndexViewModel.js ViewModel (#login) JSON Requests Model (LoginModel) Handling disconnection HTML5 localstorage

  22. Application composition • Using libraries in your page • CommonJS specification • RequireJS (Modules/AsynchronousDefinition) • Node.js (Modules/1.0) • Script Loaders (load scripts in parallel) • YepNope • Yabble • LABjs http://www.commonjs.org/

  23. introducing… Tiny Contact Manager

  24. Screen shots

  25. demo Building a responsive UI

  26. MVC4 WebAPI • Great for building convention based REST APIs • Great support for JSON, XML data types

  27. demo WebAPI

  28. Working withAsync • Promise Pattern jQuery 1.5+ $.ajax("http://www.example.org/somedata.json”)   .then(myFunc, myFailure);

  29. Working withAsync • Promise Pattern WinJS WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay(JSON.parse(response.responseText)); });

  30. Cache manifest CACHE MANIFEST ## Version: 1.0 CACHE: /m/Content/background.png /m/index.htm /m/scripts/require.js /m/scripts/main-built.js NETWORK: *

  31. Cache manifest • Leverage MVC4 to programmatically build this

  32. demo Cache manifest

  33. Using Localstorage • Under the HTML5 group of technologies • Access can vary based on privacy settings on the device • Limited Storage • Available in PhoneGap* • (after device ready event)

  34. Recap • Why we need responsive apps • Client-side patterns • UI Toolkits • HTML5 Forms • WebAPI • Cache Manifest

  35. Bundling and minification • System.web.optimisations • Node.js tools: • Require.js optimiser • StackserviceBundler:

  36. Node.js If you don’t have it, It’s time to go download it. http://nodejs.org/

  37. Require.js • r.js is the Require.js optimiser npm install requirejs -g node r.js -o scripts/app.build.js

  38. demo Require.js

  39. Wrap up ü Building a great user experience ü Data + WebAPI ü Going offline ü Packaging

  40. Further reading

  41. Further watching • Phil Haack • http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T • Steve Sanderson • http://channel9.msdn.com/Events/MIX/MIX11/FRM08 • http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159 • Douglas Crockford: Serversideness • http://vimeo.com/31363829

  42. Think about • What’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?

  43. Get the code • http://tinycontactmanager.codeplex.com

  44. Related Content • AZRILL102 Exploring Windows Azure Storage Modern App Development: Demo Pod 2 MCPD: Web Developer 4 Find Me Next up at the Speaker Lounge

  45. © 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.

More Related