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.

Responsive Tours Sample

The sample is for a fictitious company that operates city tours named Responsive Tours. The source code is on CodePlex at http://responsivetours.codeplex.com and the final result can be accessed online at http://responsive-tours.com.

Workflow

This sample is also intended to show designer <-> developer <-> deployment workflow. The source code is in 7 progressive projects:

1. Design: Design site front end
2. Web Project: Import into web template
3. Integrate: Add dynamic content
4. Cloud-ready: Set up for Windows Azure
5. Secured: Sign-in with web/social identity
6. Deployed: Deployed to the cloud
7. Global: Deployed worldwide with traffic management

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

Next: Mobile & Global with HTML5, MVC, and Windows Azure, Step 1: Design