Why Teams call analytics are critical to your entire business
Â
CloudFest Denver When Worlds Collide: HTML5 Meets the Cloud
1. When Worlds Collide:
HTML5 Meets the Cloud
David Pallmann
GM Custom App Dev, Neudesic
http://davidpallmann.blogspot.com
@davidpallmann
2. AGENDA
⢠2 Revolutions
⢠The HTML5 revolution
⢠The Cloud revolution
⢠Interactions & Synergies
⢠Walkthrough: Creating a Mobile & Global App
4. Web: The Front-end Revolution
HTML5
Lingua franca Mobility
Front-End
for desktop & Tablets and
mobile web phones
applications
Power
Experiences
More capable
Compelling,
devices &
touch-oriented
browser h/w
experiences
acceleration
5. State of the Web
⢠Web just keeps growing in importance
⢠Rising experiences & expectations
⢠On our devices
⢠Social
⢠Everywhere
⢠Part of our lifestyle
6. 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
8. âHTML5â is an Umbrella Term
⢠HTML5
⢠CSS3
⢠JavaScript
⢠SVG
⢠100+!
9. 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
10. HTML5: Visual & Alive
WebGL Water CSS Advanced Shading Video
public online HTML5 sites
11. HTML5: Amazing Experiences
Joy Defines the Future (BMW) Angry Birds
Canvas Mol Tron Legacy
public online HTML5 sites
14. 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
15. 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
16. Demo: Responsive Web Design
works on phones
works on tablets
http://www.astronautdesigns.com/demo/responsive/
17. Clouds: The Back-end Revolution
Cloud Computing Social
Elastic scale, Social network
Back-End
consumption- content,
based pricing interactions &
web identity
CDNs Marketplaces
Content App stores,
Delivery data
Networks marketplaces
21. 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
23. Windows Azure Services
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
25. Are These Separate Concerns?
I can use a I can use a
traditional traditional
or HTML5 or cloud
front-end back-end
here here
26. HOMOGENOUS FRONT END DEDICATED BACK END
WEB SERVER DATABASE SERVER
Web
Application
SQL
DESKTOP Web Services
Server
BROWSER
IIS
Windows
Server
27. 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
28. Cross-Cutting Considerations
⢠Client-Server Coordination
⢠Data Storage
⢠Identity
⢠State Management
⢠Synchronization
⢠Caching
⢠Location
⢠Social
33. Web/Mobile: Location
⢠Mobility gives us location independence:
take the web with you
⢠Mobile web apps can use your current
location
⢠Map integration
34. Cloud: Location
⢠Content Delivery Network serves content
efficiently based on locale
⢠Traffic Manager routes users to a deployment
based on locate
40. 2 Web Platform
Neudesic Web Template
1 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 Integration
7 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
41. 1 Design
Design Web Site Front-end & Create Assets
1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design
42. 1 Design
Design Web Site Front-end & Create Assets
1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design
43. 1 Design
Design Web Site Front-end & Create Assets
1B. Customize Content in Dreamweaver â Page Title, Logo, Marquee Text,
44. 1 Design
Design Web Site Front-end & Create Assets
1B. Customize Content in Dreamweaver â Page Title, Logo, Marquee Text,
45. 1 Design
Design Web Site Front-end & Create Assets
1C. Hand-off to developer â assets are HTML5, CSS, JavaScript, image files
46. 2 Adapt
Template-based Web Project
2A. Create Project from Neudesic Web Template
47. ⢠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 Project
2B. Insert front-end markup/styling/code/images from designer
48. @* 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]-->
}
2 Adapt
Template-based Web Project
2B. Insert front-end markup/styling/code/images from designer
49. 2 Adapt
Template-based Web Project
2C. Final result is a web project we can run out of VS2010 with F5 â looks no diff from Step 1
50. 3 Integrate
Add Dynamic Content
3A. Create a Database for Promotional Data
51. 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 Content
3B. Retrieve Content in the MVC Project
57. 4 Cloud-Ready
Set up for Windows Azure â Local Test/Dev in Simulator
4A. Add Windows Azure Project
58. <?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 Simulator
4B. Set Instance Counts
59. 4 Cloud-Ready
Set up for Windows Azure â Local Test/Dev in Simulator
4C. Run locally in Windows Azure Simulation Environment
60. 5 Secured
Sign-in with web Identities
5A. Configure Access Control Service in Windows Azure
61. 5 Secured
Sign-in with web Identities
5B. Instrument for identity with Windows Identity Foundation
62. 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 Identities
5C. Retrieve Claims
63. 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 Center
6A. Move Promotional Item Images to Blob Storage
65. 6 Deployed
Deployed to Windows Azure Data Center
6C. Migrate Local Database to SQL Azure Database
66. 6 Deployed
Deployed to Windows Azure Data Center
6D. Package and Publish
67. 6 Deployed
Deployed to Windows Azure Data Center
6D. Access in the Cloud at http://responsive.cloudapp.net
68. 7 Global
Deployed Globally to US and Hong Kong with Traffic Management
7A. Turn on CDN
69. <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 Management
7B. Change Promotion Item Image URLs to use CDN URL Prefix
70. 7 Global
Deployed Globally to US and Hong Kong with Traffic Management
7C. Deploy to Multiple Data Centers
71. 7 Global
Deployed Globally to US and Hong Kong with Traffic Management
7D. Manage Traffic
72. 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 Management
7E. Access at http://responsive-tours.com (http://responsive.ctp.trafficmgr.com)