CloudFest Denver When Worlds Collide: HTML5 Meets the Cloud

When Worlds Collide:HTML5 Meets the Cloud David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

AGENDA• 2 Revolutions• The HTML5 revolution• The Cloud revolution• Interactions & Synergies• Walkthrough: Creating a Mobile & Global App

Two RevolutionsFront-End Back-End

Web: The Front-end Revolution HTML5Lingua franca Mobility Front-Endfor desktop & Tablets and mobile web phones applications Power ExperiencesMore capable Compelling, devices & touch-orientedbrowser h/w experiences acceleration

State of the Web• Web just keeps growing in importance• Rising experiences & expectations• On our devices• Social• Everywhere• Part of our lifestyle

State of the Web• Web just keeps growing in importance• Rising experiences & expectations• On our devices• Social• Everywhere• Part of our your customers’ & employees’ lifestyle

The Modern Web:Open, Mobile, Social, & Global

“HTML5” is an Umbrella Term• HTML5• CSS3• JavaScript• SVG• 100+!

What HTML5 Gives Us• Video & Audio without plugins• Scalable Vector Graphics w/o plugins• New semantic tags• Geolocation• CSS3, including custom fonts, rounded corners• Drag and drop• Canvas – 2D drawing, WebGL – 3D graphics• New form elements, input types & validation• HTML manifest (app caching) & offline storage• Hardware acceleration in modern browsers

HTML5: Visual & AliveWebGL Water CSS Advanced Shading Video public online HTML5 sites

HTML5: Amazing Experiences Joy Defines the Future (BMW) Angry BirdsCanvas Mol Tron Legacy public online HTML5 sites

Momentum Behind HTML5 Source: Shutterstock.com #72009739Source: Shutterstock.com #86494345

Momentum Behind HTML5

Mobility• Unified mobile development accounts for much of the HTML5 momentum• 327M wireless devices in US CTIA Wireless Association• 1 billion wireless devices worldwide iSuppli• IDC: wireless web will outpace desktop web by 2015 Computerworld• Responsive web design: adaptive, fluid layout• Mobile-first design, progressive enhancement

Attributes of a Modern Web App• A Compelling Experience compelling • immersive • multimedia • animated • interactive • responsive• Relevant to Your Life integrates with social networks • uses location• Ubiquitous runs on PC browser, tablet, phone • adaptive layout • touch, mouse or keyboard• Maintains Continuity use multiple devices • identity • state • data• Constant Availability disconnected operation • sync

Demo: Responsive Web Design works on phones works on tabletshttp://www.astronautdesigns.com/demo/responsive/

Clouds: The Back-end RevolutionCloud Computing Social Elastic scale, Social network Back-End consumption- content, based pricing interactions & web identity CDNs Marketplaces Content App stores, Delivery data Networks marketplaces

Cloud Computing in a Nutshell vs.

Cloud Computing Characteristics• Elastic Scale• Consumption-based Pricing• Commitment-free / Easy-in, Easy-out• Self-serve / On-demand• Managed / Platform-as-a-Service• Application & Data Protected through Redundancy• 3 9’s SLA (99.9%)

Many CloudsApp Clouds Media Clouds Data Clouds Social Clouds

Attributes of a Modern Cloud App• Elastic Scale scale larger/smaller as needed• Universal worldwide presence • universal access can run in multiple data centers • CDN• Highly Available redundancy • resilient • failover• Decentralized distributed • combine multiple services lessened emphasis on locking / transactions

Windows Azure Data CentersCloud infrastructure enables modern web apps

Windows Azure ServicesService 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

InteractionsFront-End Back-End

Are These Separate Concerns? I can use a I can use a traditional traditional or HTML5 or cloud front-end back-end here here

HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server

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

Cross-Cutting Considerations• Client-Server Coordination• Data Storage• Identity• State Management• Synchronization• Caching• Location• Social

Synergies• Elasticity• Location• Social

Cloud: Elastic ScaleVM VM VM VM VM

Web/Mobile: Elastic Layout

http://outsidetheboxpizza.com

Web/Mobile: Location• Mobility gives us location independence: take the web with you• Mobile web apps can use your current location• Map integration

Cloud: Location• Content Delivery Network serves content efficiently based on locale• Traffic Manager routes users to a deployment based on locate

http://responsive-tours.com

Web/Mobile: Social• Notifications• View Content• Post Content

Cloud: Social• Sign-in with web provider• Identity federation (Access Control Service)• Back-end social network integration

Social Demo• Outside-the-box-Pizza: client-side social• Responsive Tours: server-side social identity

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

1 Design Design Web Site Front-end & Create Assets1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design

1 Design Design Web Site Front-end & Create Assets1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,

1 Design Design Web Site Front-end & Create Assets1C. Hand-off to developer – assets are HTML5, CSS, JavaScript, image files

2 Adapt Template-based Web Project2A. Create Project from Neudesic Web Template

• 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) 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">  } 2 Adapt Template-based Web Project2B. Insert front-end markup/styling/code/images from designer

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

3 Integrate Add Dynamic Content3A. Create a Database for Promotional Data

public class HomeController : Controller { // public class Promo // GET: /Home/ { public ActionResult Index() public string Title; { public string Text; LoadPromos(); return View(); public string ImageURL; } } 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; } } 3 Integrate Add Dynamic Content3B. Retrieve Content in the MVC Project

<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 »</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 »</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 »</a> </div> </div></div> 3 Integrate Add Dynamic Content 3C. Embed Content with Razor

<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 »</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 »</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 »</a> </div> </div></div> 3 Integrate Add Dynamic Content3C. Data Bind with Knockout

3 Integrate Add Dynamic Content3D. Bing Maps Integration & HTML5 Geolocation

3 Integrate Add Dynamic Content3D. Site with Data Binding

3 Integrate Add Dynamic Content3D. Bing Maps Integration & HTML5 Geolocation

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4A. Add Windows Azure Project

<?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> 4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4B. Set Instance Counts

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4C. Run locally in Windows Azure Simulation Environment

5 Secured Sign-in with web Identities5A. Configure Access Control Service in Windows Azure

5 Secured Sign-in with web Identities5B. Instrument for identity with Windows Identity Foundation

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; } } } 5 Secured Sign-in with web Identities5C. Retrieve Claims

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 6 Deployed Deployed to Windows Azure Data Center6A. Move Promotional Item Images to Blob Storage

<div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["1"].ImageURL));"> 6 Deployed Deployed to Windows Azure Data Center6B. Change Promotional Image URLs to use Blob Storage

6 Deployed Deployed to Windows Azure Data Center6C. Migrate Local Database to SQL Azure Database

6 Deployed Deployed to Windows Azure Data Center6D. Package and Publish

6 Deployed Deployed to Windows Azure Data Center6D. Access in the Cloud at http://responsive.cloudapp.net

7 Global Deployed Globally to US and Hong Kong with Traffic Management7A. Turn on CDN

<div class="home_promo_content" style="background-image:url( http://az99258.vo.msecnd.net/images/@(ViewBag.Promos["1"].ImageURL) );"> 7 Global Deployed Globally to US and Hong Kong with Traffic Management7B. Change Promotion Item Image URLs to use CDN URL Prefix

7 Global Deployed Globally to US and Hong Kong with Traffic Management7C. Deploy to Multiple Data Centers

7 Global Deployed Globally to US and Hong Kong with Traffic Management7D. Manage Traffic

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 7 Global Deployed Globally to US and Hong Kong with Traffic Management7E. Access at http://responsive-tours.com (http://responsive.ctp.trafficmgr.com)

http://responsive-tours.com 7 GlobalDeployed Globally to US and Hong Kong with Traffic Management

Responsive Tours• 8-Part Tutorial http://davidpallmann.blogspot.com/2011/12/ mobile-global-in-7-steps-with-html5-mvc.html• Source Code on CodePlex http://responsivetours.codeplex.com• Online Demo http://responsive-tours.com

When Worlds Collide:HTML5 Meets the Cloud David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

http://davidpallmann.blogspot.com	611
http://www.scoop.it	128
http://davidpallmann.blogspot.in	43
http://davidpallmann.blogspot.co.uk	11
http://davidpallmann.blogspot.com.au	9
http://davidpallmann.blogspot.com.es	6
http://davidpallmann.blogspot.com.br	5
http://davidpallmann.blogspot.jp	4
http://davidpallmann.blogspot.fr	3
http://davidpallmann.blogspot.co.nz	2
http://davidpallmann.blogspot.mx	2
http://davidpallmann.blogspot.ca	2
http://davidpallmann.blogspot.de	2
http://youbookmarks.com	1
http://www.blogger.com	1
http://davidpallmann.blogspot.se	1
http://reader.googleusercontent.com	1
http://davidpallmann.blogspot.com.ar	1

CloudFest Denver When Worlds Collide: HTML5 Meets the Cloud

by David Pallmann on Feb 12, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 833

Statistics

CloudFest Denver When Worlds Collide: HTML5 Meets the Cloud — Presentation Transcript