Sunday, October 14, 2012

Windows 8 and the Cloud: Better Together

In this post we're going to talk about how you can leverage cloud computing in your Windows 8 apps: why you should, how to do it, and some illustrative examples. We'll look at 4 ways to use the cloud in your Windows 8 apps:

1. SkyDrive
2. Cloud Media
3. A Back-end in the Cloud
4. Windows Azure Mobile Services

A Quick Primer on Windows 8 and Windows Azure
Windows 8, as everyone knows, is Microsoft latest operating system. It's a big deal in many respects: a cross-over between PCs and mobile devices, designed to run well on both standard PCs and new ARM devices. It includes a new kind of app and styling ("The Design Style Formerly Known as Metro"). Developers need to go through a process to get their apps into the Windows Store, or alternatively they can be side-loaded for enterprise users. Developers have the choice of using C++/XAML, C#/XAML, or HTML5/CSS/JavaScript to create native applications.

Windows 8: Microsoft's New Cross-over Operating System

Windows Azure is Microsoft's cloud computing platform, and it is powerful indeed. With low-cost, consumption-based pricing and elastic scale, the cloud puts the finest data centers in the world in reach of just about anybody. It provides a wealth of services spanning from Compute (hosting) to Storage to Identity to Worldwide Traffic Management.

Windows Azure: Microsoft's Cloud Computing Platform

Both Windows 8 and Windows Azure are interesting and compelling in their own right, but the real power comes from combining them. Let's see why.

Why Use Windows 8 and the Cloud Together?
Although a Windows 8 app can be stand-alone, there are all sorts of reasons to consider leveraging cloud computing in your app. Here are some of the more compelling ones:

• Data: The cloud is a safe (triply-redundant) place for your app data
• Continuity: A home base so your users can switch between devices
• Elastic Scale: support mobile/social communities of any size
• Functionality: cloud computing service provide a spectrum of useful capabilities
• Connectivity: for sharing/collaborating with others you need a hub or exchange
• Processing:  do background / deferred / parallel processing for your app in the cloud

First off, let's note that there are two big revolutions going on right now in the computing world: the front end revolution, which has to be do with HTML5, mobility, and social networking; and the back-end revolution, which has to do with services and cloud computing. The point of the front-end revolution is relevance: ensuring you reach and stay well-connected to your users and their changing digital lifestyles. The point of the back-end revolution is transforming the way we do IT and supporting that front-end revolution. So, the cloud provides a very necessary back-end to what's happening on the front lines. This is true not only for Windows 8 but for all mobile apps, whether native or web-based.

This new digital world has users moving between devices big and small all the time. Even a single user is likely to move around between different devices: their work computer, their home computer, their phone, their tablet, an airport web kiosk. People need continuity: the ability to get at their content and apps from anywhere, any time.; This behavior requires a backbone for consistency that is ever-present. The cloud and its services are that backbone. Microsoft has a very good description for this: We're living in the era of Connected Devices, Continuous Services.

And then there's the Personal Cloud pattern, a very good illustration of which can be found in the Kindle Reader iPad App. The Kindle app can be used on multiple devices. The app has two views, Cloud and Device. In the Cloud view, you see everything in your library that you've purchased. In the Device view, you see the title you've downloaded to this particular device. We can see this pattern implemented similarly in other popular apps and services such as iTunes.

Personal Cloud Pattern on Kindle iPad App 

There's also a power and capacity synergy between device and cloud worth notice. Mobile devices, even though they're getting more and more powerful, still have very limited computing power and storage capacity--compared to the cloud, which has near-infinite processing and storage capacity. Smart apps combine the two.

1. Using SkyDrive in Your Windows 8 App
Although I'm mostly going to be talking about Windows Azure in this post, I want to mention that Windows Live SkyDrive comes with Windows 8 and there is automatic integration.

As an example, there's a Windows 8 app I'm in the middle of working on called TaskBoard. When I invoke a File Open or File Save dialog, the user can navigate to a variety of file locations (such as Documents) and device where to open or save a project. Included in that navigation is the option to load or store in SkyDrive. I did not have to do anything special in my app to make this happen, it's an automatic feature.

SkyDrive is Built-in to Windows 8 File Open and Save Dialogues

2. Using Cloud Media in Your Windows 8 App
It's of course quite common these days to leverage media--images, audio, or video--in our modern apps. You could of course just include your media directly in your app, but that makes it difficult to extend or change the content, requiring you to update your app and push it out through the Windows Store. It's much more flexible to have your app get its media from the cloud, where you can update or extend the media collection any time you wish.

The Windows Azure Storage service includes file-like storage called Blob storage. Like a file, a blob can hold any kind of content--and that includes media files. Blobs live in Containers, similar to how files reside in file folders. In the cloud, you can make your containers public or private. If private, you can only access them using a REST API and providing credentials. If public, the blobs have Internet URLs and for reading purposes you can use them anywhere--such as in the IMG tags of your HTML.

Let's demonstrate this, first by looking at one of the Windows 8 samples Microsoft provides which is called FlipView. We'll use the WinJS (HTML5/JavaScript) edition. FlipView shows us how to use the Windows 8 FlipView control, as you can see from the screen capture below. If we move through the FlipView by using its right or left navigation arrows, we see there is a collection of outdoor images.

FlipView Windows 8 Sample

If we look in the code, we see that the FlipView images are part of the solution itself and the list of images and description is nothing more than a JavaScript array. The HTML markup references a FlipView control and uses data binding attributes to define an image-and-title template to make it all happen.

FlipView Sample Markup and JavaScript Code

None of this is complicated to understand, but again all of this is hard-coded to the app internally. We'd like to make this dynamic and easily modifiable using the cloud. So let's get to it. In my case, I've made a copy of the app and I'm changing it around a bit to be about hot sauces. (October is Chili Cook-off seasons for me, and I spend much of the month subjecting my family to various recipes and hot sauces as we experiment).

The first step, then, is to get some images and put them in the cloud.

A Collection of Images We'll Use for our Host Sauce Gallery App

After locating some images, I provisioned a Windows Azure storage account and created a container named hotsauces. I then used a Storage Explorer Tool to upload those images to the cloud container.

Images Uploaded to Windows Azure Blob Storage

Because the container is marked public, each image that has been uploaded has an Internet URL. For example, will bring up one of the image in a browser.

Now that we have our images in the cloud, we also need our JavaScript array describing the images and their title (and one more addition, Scoville heat rating) to be dynamic and hosted in the cloud. All we need to do for that is create a text file in JSON format and also upload it to the cloud.

JavaScript Array for Cloud-based Hot Sauce Items

With our data list and images in the cloud, all that remains is to change the Windows 8 app itself to retrieve those items. Since we've added a Scoville heat rating to our data, we'll first amend our HTML markup to include that data item.

In the application start-up code, we'll need to modify how the array is set and bound to the HTML. Previously, the array was just directly populated in code. Now, we're going to load it from the cloud. We'll do that using the WinJS.xhr function, which performs an asynchronous communication request. Since our JSON data and images are Internet-accessible URLs, this is very straightforward. The code below shows how we do it. Notice that the communication is asynchronous, and the inner code to push array items in the array happens upon successful retrieval of the JSON data.

Revised Code to Download JSON array and Images from the Cloud

That's all there is to it. When we now run the app, it goes out and gets the hot sauce JSON array which in turn has the title, heat rating, and Internet URLs of each hot sauce. Our app now looks like this when we run it:

Our Host Sauce App, Now Using Dynamic Content from the Cloud
Moreover, we can easily change, add, or remove images and data just by modifying what's up in the cloud storage account. There's no need to update and app and push out a new version if we want to update our content.

A couple of other things to know about using Windows Azure storage. If you want, you can combine what we just did with the Windows Azure Content Delivery Network (CDN). This uses an edge cache network to efficiently cache and deliver media worldwide based on user location. The only impact using the CDN would have on what we just did above is that the URL prefix would change. You should also be aware that Windows Azure Storage provides not only blob (file-like) storage but also data table storage and queues, all of which can be accessed through WinJS.xhr and a REST API.

If you're working with video and want to intelligently stream it and handle multiple formats, you should investigate Windows Azure Media Services which is currently in preview.

3. Create Your Own Back-end In the Cloud
Although you can create them in HTML5 and JavaScript, a Windows 8 app is now a web app. A web app always has a server, for example, and also domain-restricts communication to that server. Your Windows 8 app doesn't have a domain restriction, nor does it come with or require a server. However, nothing prevents you from putting up a server with web services for your app and this is often a good idea. Why have a server back-end in the cloud? Here are some reasons to consider:

• For many of the same reasons a web app benefits from a web server
• Distribution of work - some done on the local device, some done back on the server
• To keep credentials off the local machine which is a security vulnerability
• To take advantage of the many useful cloud services that are available
• To connect to your enterprise to integrate with its internal systems and resources

What are some of the cloud service offered by Windows Azure? They include these:

• Compute (hosting) of web sites, web services, background services, middleware, products, and other kinds of a software.
• Relational Database Storage - Windows Azure SQL Database or MySQL
• Non-relational Storage: Blobs, Tables, and Queues
• Messaging an Integration: Service Bus Relay Messaging / Durable Brokered Messaging
• Caching: Cache Service
• Identity: Access Control Service
• Media: Media Services
• CDN: Content Delivery Network
• Traffic: Traffic Manager
• Networking: Virtual Network / hybrid cloud connections between cloud and enterprise
• Mobility: Mobility Services

So then, you just might want to put up some web services for your app to use, and putting them in the cloud makes a lot of sense: you get elastic scale, meaning you can handle any size load; it's cost-effective; and you can have affordable worldwide presence.

Let's consider how we would build our own back-end service on Windows Azure. We're going to build a really simple service that returns the time of day in various time zones. For this, we'll use the new ASP.NET Web API that is becoming a popular alternative to WCF for building web services for apps in the Microsoft world. We're going to host this in the cloud, and there are actually a few different ways to do that (see Windows Azure is a 3-lane Highway). In our case we are just going to build a really simple service so well use the Windows Azure Web Sites hosting feature which is fast and simple. For a more complicated example where you leverage many of the cloud services, you'd be best off using the Cloud Services form of hosting.

Creating our service is quite easy. We fire up VS2012 and create a new MVC4 Web API project. We then go into the pre-generated "values' controller and add some methods to return time of day.

Web API Service to Return Time

If we run this locally, we can invoke its functions with URLs like this: http://localhost:84036/api/values/-7 and we'll get a simple response like "4:30 PM" in JSON format. Doing this much is enough to test locally so w can now move on to creating the client. Once we're satisfied everything works we will of course deploy this service up to the cloud.

Now for the client side. We create a new empty Windows 8 app--using the HTML5/JavaScript approach--and now we need to provide some markup, CSS, and JavaScript code. For the markup, we're just going to show the various time zones and current time in a couple of HTML tables, and we'll also include a world time zone map.

Windows 8 World Time App - Markup 

There's also a bit of CSS for styling but I won't bother showing that here. Now, what needs to happen coding-wise? At application start-up, we want to go out and get the time for each of the time zones in our table and populate its cell with a value. We'll use a timer to repeat this once a minute in order to keep the time current. We use the WinJS.xhr method to asynchronously invoke the web service.

Windows 8 World Time App - JavaScript Code

We can now run the app and see it work:

Windows 8 World Time App - Running

Very good - but remember, our service is still running locally. We need to put it up into the cloud. With Windows Azure Web Sites this is a fast and simple process that takes less than a minute.

Create a Windows Azure Web Site to Host Web Service in the Cloud

After creating the web site, we can download a publishing profile and deploy right from Visual Studio using Web Deploy. The last thing we need to do is change the URL the client code is using, which is now of the form

4. Using Windows Azure Mobile Services
We just showed you how you can create your own back-end in the cloud for your Windows 8 app, but maybe you don't really want to learn all those cloud details and would really like to stay focused on your app. Microsoft has a new service that will automatically create a back-end in the cloud for your Windows 8 app (and eventually, for other mobile platforms as well).

Because I've recently blogged on Windows Azure Mobile Services, I'll direct you that post rather than repeating it here. However, I do want to point out to you here and now how valuable this service is. It's really a mobility back-end in a box that you can set up and configure effortlessly. Among other things, it gives you support for the following:

• Relational Database (including auto-creation of new columns when you alter your app's data model)
• Identity
• Push Notifications
• Server-side scripting (in JavaScript)

Window Azure Mobile Services is definitely worth checking out. It has a great experience and is very easy to get started with.

This talk was recently given at a code camp, and you can find the presentation here.

1 comment:

Unknown said...

Very interesting post – I’m definitely going to bookmark you!
Web Designing Services