Monday, December 26, 2011

Mobile & Global in 7 Steps with HTML5, MVC & Windows Azure

In this series of posts I’ll be walking you through a sample
that shows web and cloud working well together. Recently I’ve been writing
about responsive
web design and a complementary concept, responsive
cloud design. This sample and tutorial show them in action. The sample
illustrates an application that is truly mobile and global, that can run
anywhere and everywhere. It leverages HTML5 and open standards on the web client; works across desktop browsers,
tablets, and phones; uses the Microsoft web
platform (notably MVC) on the web server; runs on the Windows Azure cloud computing
platform; and is globally deployed to data centers on 3 continents with
automatic traffic management. That’s
a lot of capability, but we’re going to accomplish all this in 7 straightforward steps.

Of course, there should be overlap and iteration between designer and developer but as we're dealing with a relatively simple application here we can proceed serially.

In this first post we’ll give you an overview of the sample, and in Parts 2 through 8 we’ll go into each step of this workflow in some detail.

1. Design: Design Site Front End

In this step a responsive web design HTML5 sample from Adobe is used as a
starting point. It detects device characteristics and dimensions and adapts to
desktop, tablet, or phone size screens automatically. The designer uses Adobe
Dreamweaver to customize the sample for a fictitious city tour operator,
Responsive Tours.

This is Project 1 in the sample. You can run this project locally in a browser by opening index.html.

2. Web Project: Import into Web Template

In this step the design assets (HTML, CSS, JavaScript, images) are handed off
to a web developer, who inserts them into a web template to create a web
project. The developer can now work in Visual Studio. The web project's
front-end is open standards-based and the back end uses the Microsoft web
platform, including MVC3.

This is Project 2 in the sample. You can run this project locally by opening the solution in Visual Studio and
pressing F5.

3. Integrate: Add Dynamic Content

In this step the developer implements dynamic content for promotional items,
querying a database on the server side. MVC-Razor and Knockout.js are used for
data binding. Visual integration with Bing Maps is also added on
the web client side.

This step requires you to set up a database with a table for promotional items, and also to obtain a Bing Maps key.

This is Project 3 in the sample. You can run this project locally by opening the solution in Visual Studio and
pressing F5.

4. Cloud-ready: Set up for Windows Azure

In this step the developer adds a Windows Azure project to the solution so that
it can be run as a web role in the Windows Azure Simulation Environment on the
local machine.

This is Project 4 in the sample. You can run this project locally by opening the solution in Visual Studio and
pressing F5. It will run in the Windows Azure Simulation Environment.

5. Secured: Sign-in with web identity

In this step the developer sets up authentication using the Access Control
Service. The user can sign in with a Windows Live, Yahoo!, or Google social/web
identity.

This step requires you to configure an Access Control Service namespace in the
Windows Azure portal.

This is Project 5 in the sample. You can run this project locally by opening the solution in Visual Studio and
pressing F5. It will run in the Windows Azure Simulation Environment.

6. Deployed: Deployed to the cloud

In this step the developer deploys the solution code and data to a the cloud
Windows Azure data center. The promotional item images are moved to blob
storage.

This step requires you to create, configure, and populate a Hosted Service,
Database, Blob Storage, and Access Control Service in a Windows Azure data
center.

This is Project 6 in the sample. You can run this project online by directing your browser to the production URL
for your hosted service. After signing in with the identity provider of your
choice, the web site will run from a Windows Azure data center.

7. Global: Deployed worldwide with traffic management

In this step the developer deploys the solution to additional data centers for
worldwide presence and sets up automated traffic management. The promotional
item images are accessed via the Content Delivery Network for performance based
on locale.

This step requires you to create, configure, and populate 3 Hosted Services
(each in a different data center), a Database, Blob Storage, the Access Control
Service, and Traffic Management in Windows Azure.

This is Project 7 in the sample. You can run this project online by directing your browser to the traffic
manager URL for your hosted service. After signing in with the identity
provider of your choice, the web site will run in a randomly selected data
center (US, Europe, or Asia).