When worlds Collide: HTML5 Meets the Cloud

1,704 views

Published on

This is a 2012 conference presentation of David Pallmann, Windows Azure MVP and author and GM of Custom App Dev at Neudesic

Published in: Technology

When worlds Collide: HTML5 Meets the Cloud

  1. 1. David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann
  2. 2. 2 RevolutionsThe HTML5 revolutionThe Cloud revolutionInteractions & SynergiesWalkthrough: Creating a Mobile & Global App
  3. 3. Front-End Back-End
  4. 4. HTML5Lingua franca Mobilityfor desktop & Front-End Tablets and mobile web phones applications Power ExperiencesMore capable Compelling, devices & touch-orientedbrowser h/w experiences acceleration
  5. 5. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our lifestyle
  6. 6. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our your customers’ & employees’lifestyle
  7. 7. HTML5CSS3JavaScriptSVG100+!
  8. 8. Video & Audio without pluginsCanvas & Scalable Vector Graphics w/o pluginsNew semantic tagsGeolocationCSS3, including custom fonts, rounded cornersDrag and dropCanvas – 2D drawing, WebGL – 3D graphicsNew form elementsHTML manifest (app caching) & offline storageHardware acceleration in modern browsers
  9. 9. Advanced Shading VideoWebGL Water CSS public online HTML5 sites
  10. 10. Joy Defines the Future (BMW) Angry BirdsCanvas Mol Tron Legacy public online HTML5 sites
  11. 11. Source: Shutterstock.com #86494345 Source: Shutterstock.com #72009739
  12. 12. Unified mobile development accounts for muchof the HTML5 momentum327M wireless devices in US CTIA Wireless Association1 billion wireless devices worldwide iSuppliIDC: wireless web will outpace desktop web by2015 ComputerworldResponsive web design: adaptive, fluid layoutMobile-first design, progressive enhancement
  13. 13. A Compelling Experiencecompelling • immersive • multimediaanimated • interactive • responsiveRelevant to Your Lifeintegrates with social networks • uses locationUbiquitousruns on PC browser, tablet, phoneadaptive layout • touch, mouse or keyboardMaintains Continuityuse multiple devices • identity • state • dataConstant Availabilitydisconnected operation • sync
  14. 14. works on phones works on tabletshttp://www.astronautdesigns.com/demo/responsive/
  15. 15. SocialCloud Computing Social network Elastic scale, Back-End content, consumption- interactions & based pricing web identity CDNs Marketplaces Content App stores, Delivery data Networks marketplaces
  16. 16. vs.
  17. 17. Elastic ScaleConsumption-based PricingCommitment-free / Easy-in, Easy-outSelf-serve / On-demandManaged / Platform-as-a-ServiceApplication & Data Protected through Redundancy3 9’s SLA (99.9%)
  18. 18. App Clouds Media Clouds Data Clouds Social Clouds
  19. 19. Elastic Scalescale larger/smaller as neededUniversalworldwide presence • universal accesscan run in multiple data centers • CDNHighly Availableredundancy • resilient • failoverDecentralizeddistributed • combine multiple serviceslessened emphasis on locking / transactions
  20. 20. Service Role in a Modern Web SolutionWindows Azure Compute Hosting of web serversWindows Azure Blob Storage Media (images, video) & other file storageWindows Azure Table Storage Server-side storage of data / session stateSQL Azure Database Server-side storage of relational dataWindows Azure Traffic Manager Traffic routing across multiple deploymentsContent Delivery Network Use of edge cache network to serve contentCache Service Server-side performance improvementsSQL Azure Data Sync Data sync across multiple deploymentsAccess Control Service Identity federationService Bus Back end processing / integrationWindows Azure Connect Cloud-Enterprise connectivity
  21. 21. Front-End Back-End
  22. 22. I can use a I can use atraditional traditional or HTML5 or cloud front-end back-end here here
  23. 23. HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server
  24. 24. HETEROGENEOUS FRONT END DECENTRALIZED BACK END Platform DESKTOP Application Services BROWSER CLOUD Business Data Stores Services TABLET Identity IP Directories Services PHONE PARTNER Partner Data Stores Services
  25. 25. Client-Server CoordinationData StorageIdentityState ManagementSynchronizationCachingLocationSocial
  26. 26. ElasticityLocationSocial
  27. 27. VM VM VM VM VM
  28. 28. http://outsidetheboxpizza.com
  29. 29. Mobility gives us location independence:take the web with youMobile web apps can use your current locationMap integration
  30. 30. Content Delivery Network serves contentefficiently based on localeTraffic Manager routes users to a deploymentbased on locate
  31. 31. http://responsive-tours.com
  32. 32. NotificationsView ContentPost Content
  33. 33. Sign-in with web providerIdentity federation (Access Control Service)Back-end social network integration
  34. 34. Outside-the-box-Pizza: client-side socialResponsive Tours: server-side social identity
  35. 35. 2 Web Platform Neudesic Web Template1 Design Comps Adobe Creative Suite HTML5, CSS, Media Client: Open Standards Server: MS Web Platform 3 Integrate Dynamic Content DB / Storage Responsive Web Design Data Binding Map Integration7 Global Worldwide Deployment Multiple Data Centers 4 Cloud-Ready Windows Azure Web Role / Instances Traffic Management Local Dev/Test 6 Deployed Elastic Scale Azure Data Center 5 Secured Single Sign-on Web / Domain ID AZURE WEB ROLE
  36. 36. 1 Design Design Web Site Front-end & Create Assets1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design
  37. 37. 1 Design Design Web Site Front-end & Create Assets1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design
  38. 38. 1 Design Design Web Site Front-end & Create Assets1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,
  39. 39. 1 Design Design Web Site Front-end & Create Assets1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,
  40. 40. 1 Design Design Web Site Front-end & Create Assets1C. Hand-off to developer – assets are HTML5, CSS, JavaScript, image files
  41. 41. 2 Adapt Template-based Web Project2A. Create Project from Neudesic Web Template
  42. 42. 2 Adapt Template-based Web Project2B. Insert front-end markup/styling/code/images from designer • Move where some files are to match the templates organization • Change paths in the HTML and CSS to match file relocation and use ASP.NET ~ path convention • Segment HTML and insert into appropriate areas of the home view (Index.cshtml)
  43. 43. 2 Adapt Template-based Web Project2B. Insert front-end markup/styling/code/images from designer @* Optional : Include additional stylesheets *@ @section StylesTop { <link rel="stylesheet" type="text/css" href="~/../css/stylesheet.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max- width:550px)" href="~/../css/screen_small.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:551px) and (max- width:800px)" href="~/../css/screen_medium.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" type="text/css" href="~/../css/stylesheet_ie.css" /> <![endif]--> }
  44. 44. 2 Adapt Template-based Web Project2C. Final result is a web project we can run out of VS2010 with F5 – looks no diff from Step 1
  45. 45. 3 Integrate Add Dynamic Content3A. Create a Database for Promotional Data
  46. 46. 3 Integrate Add Dynamic Content3B. Retrieve Content in the MVC Project public class HomeController : Controller public class Promo { { // public string Title; // GET: /Home/ public string Text; public string ImageURL; public ActionResult Index() } { LoadPromos(); return View(); } private void LoadPromos() { Dictionary<string, Promo> Promos = new Dictionary<string, Promo>(); try { using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager .ConnectionStrings["Tours"].ConnectionString)) { ...get the data, add to Promos collection... } } catch (SqlException ex) { // TODO: log exception } ViewBag.Promos = Promos; } }
  47. 47. 3 Integrate Add Dynamic Content3C. Embed Content with Razor <!-- begin - homepage promos --> <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> </div>
  48. 48. 3 Integrate Add Dynamic Content3C. Data Bind with Knockout <!-- begin - homepage promos --> <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> </div>
  49. 49. 3 Integrate Add Dynamic Content3C. Data Bind with Knockout <!-- begin - homepage promos --> <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more &raquo;</a> </div> </div> </div>
  50. 50. 3 Integrate Add Dynamic Content3D. Site with Data Binding
  51. 51. 4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4A. Add Windows Azure Project
  52. 52. 4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4B. Set Instance Counts <?xml version="1.0" encoding="utf-8"?> <ServiceConfiguration serviceName="ResponsiveSiteAzure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/Servic eConfiguration" osFamily="1" osVersion="*"> <Role name="ResponsiveSite"> <Instances count="4" /> <ConfigurationSettings> <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString " value="UseDevelopmentStorage=true" /> </ConfigurationSettings> </Role> </ServiceConfiguration>
  53. 53. 4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4C. Run locally in Windows Azure Simulation Environment
  54. 54. 5 Secured Sign-in with web Identities5A. Configure Access Control Service in Windows Azure
  55. 55. 5 Secured Sign-in with web Identities5B. Instrument for identity with Windows Identity Foundation
  56. 56. 5 Secured Sign-in with web Identities5B. Instrument for identity with Windows Identity Foundation
  57. 57. 5 Secured Sign-in with web Identities5C. Retrieve Claims private void LoadClaims() { ViewBag.Welcome = "Welcome Back!"; var principal = Thread.CurrentPrincipal; var identity = principal.Identity as IClaimsIdentity; var claims = identity.Claims; ViewBag.Claims = claims; string displayName = null; if (claims != null) { string claimType; foreach (Claim claim in claims) { claimType = claim.ClaimType; if (claimType.EndsWith("/nameidentifier")) { displayName = claim.Subject.Name; break; } } if (!String.IsNullOrEmpty(displayName)) { ViewBag.Welcome = "Welcome back, " + displayName; } } }
  58. 58. 6 Deployed Deployed to Windows Azure Data Center6A. Move Promotional Item Images to Blob Storage http://responsive.blob.core.windows.net/images/homepage_promo_1.jpg http://responsive.blob.core.windows.net/images/homepage_promo_2.jpg http://responsive.blob.core.windows.net/images/homepage_promo_3.jpg
  59. 59. 6 Deployed Deployed to Windows Azure Data Center6B. Change Promotional Image URLs to use Blob Storage <div class="home_promo_content" style="background-image:url( http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["1"].ImageURL) );">
  60. 60. 6 Deployed Deployed to Windows Azure Data Center6C. Package and Publish
  61. 61. 6 Deployed Deployed to Windows Azure Data Center6D. Access in the Cloud at http://responsive.cloudapp.net
  62. 62. 7 Global Deployed Globally to US and Hong Kong with Traffic Management7A. Turn on CDN
  63. 63. 7 Global Deployed Globally to US and Hong Kong with Traffic Management7B. Change Promotion Item Image URLs to use CDN URL Prefix <div class="home_promo_content" style="background-image:url( http://az99258.vo.msecnd.net/images/@(ViewBag.Promos["1"].ImageURL) );">
  64. 64. 7 Global Deployed Globally to US and Hong Kong with Traffic Management7C. Deploy to Multiple Data Centers
  65. 65. 7 Global Deployed Globally to US and Hong Kong with Traffic Management7D. Manage Traffic
  66. 66. 7 Global Deployed Globally to US and Hong Kong with Traffic Management7E. Access at http://responsive-tours.com (http://responsive.ctp.trafficmgr.com) Friendly Domain http://responsive-tours.com Windows Azure Traffic Manager http://responsive.ctp.trafficmgr.com South Central US Western Europe East Asia http://responsive-us http://responsive-europe http:// responsive-asia .cloudapp.net .cloudapp.net .cloudapp.net Windows Azure Access Control Service Web Identity Sign-in
  67. 67. 7 GlobalDeployed Globally to US and Hong Kong with Traffic Management http://responsive-tours.com
  68. 68. 8-Part Tutorialhttp://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.htmlSource Code on CodePlexhttp://responsivetours.codeplex.comOnline Demohttp://responsive-tours.com
  69. 69. David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann

×