When worlds collide html5 meets the cloud

David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Sheena.Graham

Stamp

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

Front-End Back-End

Front-End

HTML5 Lingua franca for desktop &

mobile web applications

Mobility Tablets and phones

Power More capable

devices & browser h/w acceleration

Experiences Compelling, touch-oriented experiences

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

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

HTML5 CSS3 JavaScript SVG 100+!

Video & Audio without plugins Canvas & 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 HTML manifest (app caching) & offline storage Hardware acceleration in modern browsers

WebGL Water

Advanced Shading

CSS

Video

public online HTML5 sites

http://madebyevan.com/webgl-water/

http://www.cake23.de/traveling-wavefronts-lit-up.html

http://www.romancortes.com/blog/pure-css-coke-can/

http://neudesic.blob.core.windows.net/dash/contoso.html

Angry Birds

Joy Defines the Future (BMW)

Canvas Mol

public online HTML5 sites

Tron Legacy

http://chrome.angrybirds.com/

http://joydefinesthefuture.com/

http://alteredqualia.com/canvasmol/

http://disneydigitalbooks.go.com/tron/

Source: Shutterstock.com #86494345

Source: Shutterstock.com #72009739

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

http://www.ctia.org/media/press/body.cfm/prid/2133

http://www.isuppli.com/Mobile-and-Wireless-Communications/News/Pages/More-Than-1-Billion-Devices-to-Have-Embedded-Wireless-Networking-Capability.aspx

http://www.computerworld.com/s/article/9219932/Most_will_access_Internet_via_mobile_devices_by_2015_IDC_says

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

http://www.astronautdesigns.com/demo/responsive/

works on tablets

works on phones

http://www.astronautdesigns.com/demo/responsive/

Cloud Computing Elastic scale,

consumption-based pricing

Social Social network content, interactions & web identity

CDNs Content Delivery

Networks

Marketplaces App stores, data marketplaces

Back-End

vs.

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%)

App Clouds

Data Clouds

Media Clouds

Social Clouds

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

Service Role in a Modern Web Solution

Windows Azure Compute Hosting of web servers

Windows Azure Blob Storage Media (images, video) & other file storage

Windows Azure Table Storage Server-side storage of data / session state

SQL Azure Database Server-side storage of relational data

Windows Azure Traffic Manager Traffic routing across multiple deployments

Content Delivery Network Use of edge cache network to serve content

Cache Service Server-side performance improvements

SQL Azure Data Sync Data sync across multiple deployments

Access Control Service Identity federation

Service Bus Back end processing / integration

Windows Azure Connect Cloud-Enterprise connectivity

Front-End Back-End

I can use a traditional or HTML5 front-end

here

I can use a traditional or cloud back-end

here

DEDICATED BACK END

Web Services

Web Application

IIS

SQL Server DESKTOP

BROWSER

WEB SERVER

Windows Server

DATABASE SERVER

HOMOGENOUS FRONT END

DECENTRALIZED BACK END

Business Services

Application

TABLET

CLOU

D

HETEROGENEOUS FRONT END

DESKTOP BROWSER

PHONE

Identity Services

IP

Data Stores

Platform Services

Directories

Partner Services

PARTNER

Data Stores

Client-Server Coordination Data Storage Identity State Management Synchronization Caching Location Social

Elasticity Location Social

VM VM VM VM VM

http://outsidetheboxpizza.com

http://outsidetheboxpizza.com/

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

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

http://responsive-tours.com

http://responsive-tours.com/

Notifications View Content Post Content

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

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

1 Design Comps Adobe Creative Suite HTML5, CSS, Media Responsive Web Design

2 Web Platform Neudesic Web Template Client: Open Standards Server: MS Web Platform 3 Integrate

Dynamic Content DB / Storage Data Binding Map Integration

4 Cloud-Ready Windows Azure Web Role / Instances Local Dev/Test

7 Global Worldwide Deployment Multiple Data Centers Traffic Management

5 Secured Single Sign-on Web / Domain ID

6 Deployed Elastic Scale Azure Data Center

AZURE WEB ROLE

1 Design Design Web Site Front-end & Create Assets

1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design

http://download.macromedia.com/pub/developer/html5/template_13_Publish/index.html



1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design



1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,


1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,


1C. Hand-off to developer – assets are HTML5, CSS, JavaScript, image files

2 Adapt Template-based Web Project

2A. Create Project from Neudesic Web Template


2B. 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)


2B. 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">  }


2C. Final result is a web project we can run out of VS2010 with F5 – looks no diff from Step 1

3 Integrate Add Dynamic Content

3A. Create a Database for Promotional Data


3B. Retrieve Content in the MVC Project

public class HomeController : Controller { // // GET: /Home/ 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; } }

public class Promo { public string Title; public string Text; public string ImageURL; }


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>


3C. Data Bind with Knockout



3C. Data Bind with Knockout



3D. Site with Data Binding

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator

4A. Add Windows Azure Project


4B. Set Instance Counts

<?xml version="1.0" encoding="utf-8"?> <ServiceConfiguration serviceName="ResponsiveSiteAzure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration" osFamily="1" osVersion="*"> <Role name="ResponsiveSite"> <Instances count="4" /> <ConfigurationSettings> <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="UseDevelopmentStorage=true" /> </ConfigurationSettings> </Role> </ServiceConfiguration>


4C. Run locally in Windows Azure Simulation Environment

5 Secured Sign-in with web Identities

5A. Configure Access Control Service in Windows Azure


5B. Instrument for identity with Windows Identity Foundation


5B. Instrument for identity with Windows Identity Foundation


5C. 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; } } }

6 Deployed Deployed to Windows Azure Data Center

6A. 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

http://responsive.blob.core.windows.net/images/homepage_promo_1.jpg




6B. 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) );">


6C. Package and Publish


6D. Access in the Cloud at http://responsive.cloudapp.net

http://responsive.cloudapp.net/

http://responsive.cloudapp.net/

7 Global Deployed Globally to US and Hong Kong with Traffic Management

7A. Turn on CDN


7B. 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) );">


7C. Deploy to Multiple Data Centers


7D. Manage Traffic


7E. 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 http://responsive-us

.cloudapp.net

East Asia http:// responsive-asia

.cloudapp.net

Windows Azure Access Control Service Web Identity Sign-in

Western Europe http://responsive-europe

.cloudapp.net


http://responsive-tours.com



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

http://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.html

http://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.html

http://responsivetours.codeplex.com/


David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Technology

When worlds collide html5 meets the cloud