When Worlds Collide: HTML5 Meets The Cloud

What does The New Web have to do with Cloud Computing? More than you might think. When two revolutions are taking place in parallel, they are bound to influence each other.

Two big revolutions are happening right now that greatly affect web applications: HTML5 and devices are transforming the front end, and cloud computing is transforming the back end. Together these revolutions allow us to create rich, take-anywhere immersive experiences backed by on-demand, elastic services running at global scale. What do HTML5 and the cloud have to do with each other? Are they merely complementary or do they impact each other? Should architects consider them individually or jointly when designing web solutions? Let’s find out.

Separate But Equal?

At first glance, it would appear the front end and the back end of a web application are rather cleanly separated. After all, whether a web client is traditional or running on a device, it’s still going to interact with the web server using HTTP(S). Similarly, you might think the primary impact of running a web server in the cloud as opposed to on-premise or in a hosted data center is that it’s merely at a different address. One could argue that this separation is a good thing, allowing front ends and back ends to be modernized independently, in a demonstration of loose coupling that would make SOA and REST aficionados proud.

These observations are true but only to a point. If HTML5 and cloud were only about putting our software in different places, we could say they are complementary in the benefits they provide but don’t really affect each other. There’s so much more involved than location, however! Both revolutions are changing the way people use software and the characteristics expected of software. Let’s review the core tenets of each and then discuss how they affect each other.

Core Tenets of The New Web

Just when it seemed the web couldn’t gain any more importance or become a deeper part of our lifestyles, our massive love affair with devices and social networking has tightened its grip on us further. HTML5’s promise to be a lingua franca for web applications is backed by massive momentum from industry and community alike. It’s fueled by the same “write once, run anywhere” passion that put Java on the map over a decade ago. Going forward, proprietary web client software and plug-ins are going to find less and less surface area in which to run. While device hardware and server platforms remain proprietary, removing the proprietary element of web client software is causing developer communities formerly separated along vendor lines to blend.

The emerging notion of a modern web application is one that excels in experience, relevance, ubiquity, continuity, and availability. It should provide a compelling and immersive multimedia experience that is animated, interactive, and responsive. It should integrate with your social networks to make its functionality highly relevant to you and those important to you. It should be able to run on a PC browser, tablet, or phone—not as separate implementations but a single implementation that adapts intelligently to screen size and supports mouse, keyboard, and touch interaction equally well. It should recognize that users will often use more than one device to access an application and provide continuity of identity, state, and data across sessions. It should permit disconnected operation and still be able to provide useful functionality. In short, modern web applications are rich, take-anywhere applications.

Core Tenets of the Cloud

Cloud computing makes the world’s finest data centers available to just about anyone, leveling the playing field for small business, individuals, and developing nations. It brings a radical shift in the economics, flexibility, and capability of IT. The cloud’s consumption-based pricing model does away with traditional start-up hurdles such as rigorous capacity planning and capital expenditures to purchase hardware; instead you have an approachable monthly bill where you only pay for what you use and only use what you need. You’re under no term commitment and can start and stop using the cloud as you wish, preserving your freedom to experiment and change your plans without penalty or obligation. The cloud’s elastic nature allows you to scale your application up or down as you wish in response to current or anticipated changes in load. A sophisticated cloud platform like Windows Azure automates many IT tasks such as patching and delivers significant services beyond mere hosting and data storage.

The emerging notion of a modern cloud application or service is one that excels in elastic scale, global presence, and high availability. It should scale up as needed to service demand and scale down when not needed to reduce cost. It should be available everywhere and anywhere, leveraging multiple data centers and content delivery networks to provide universal access with good performance. It should leverage redundancy and the smart infrastructure of cloud data centers to protect the availability of applications and the fidelity of data—a highly distributed environment in which lessened dependence on state, transactions, and resource locking is necessary. In short, modern cloud applications are on-demand, elastic, and run at global scale.

The Interplay

Given how major these transformations are, there can’t help but be cross-over effects since both are components of the same thing, a web application, and must work together. Let’s first of all recognize that old or new, certain aspects of any application must be designed with the entire solution in view: that includes security, reliability, and scale. Here are some ways in which the changing front end forces design changes on the back end or vice-versa:

1. Where a web application lives is changing. The shift is toward more of the application residing on the web client side than in the past. Conversely, that means there is less on the server side.

2. Where data lives is changing. HTML5 client applications have local storage available to them. This can affect the data model and design of web service interfaces. You might for example return more data to a capable client with local storage than to a simplistic one.

3. Changing behaviors on the web client side require matching services on the server side. For example, a web application that supports disconnected operation likely needs additional web services on the back end to support syncing.

4. Web services can be consumed client-side as well as server-side. Historically, integrations to external web services (such as a shipping service) tended to be implemented on the server side except for special cases such as maps and mash-ups. In these days of highly capable web clients it sometimes makes more sense for the web client to consume those services directly rather than going through its web server to do so.

5. A web application that permits a user to switch between multiple devices while maintaining continuity of identity and state will require special attention on the server side. This is at tension with other forces that are pulling more of the application and data over toward the client side.

6. The global presence a cloud application can have permits a web client to connect to the nearest deployment or failover to an alternative deployment. The Windows Azure Traffic Manager can be used to automate both of those scenarios.

7. Web applications can retrieve content via a content delivery network to benefit from locale-based caching through a network of edge servers.

8. Cloud identity services can do the heavy lifting on identity, allowing a web application to easily support and federate a variety of domain or web identity providers. For example, Windows Azure’s Access Control Service has built-in support for Google, Yahoo!, and Windows Live ID.

9. Data stored in the cloud can be directly retrieved by the web client instead of routing through the web server if desired. To again use Windows Azure as an example, file-oriented data in Blob Storage can be accessed as Internet URLs with fine control over access permissions.

10. Cloud computing services often require different handling from on-premise intranet services including the need for retry policies. Web clients need sufficiently robust web service invocation.

11. The back end can be fractured. Some web applications have no need for a centralized back end in the traditional sense and instead access a series of services—potentially a combination of your application services, cloud platform services, and external services—with the client application controlling the overall context and workflow.

Here’s a diagram of a traditional web application. The web client side is thin, using HTML, CSS, and JavaScript and possibly some plug-ins and proprietary technologies including Silverlight. The web server or server farm uses a web server platform, ASP.NET on Windows Server in this case.

In contrast, the diagram below shows a modern version of the application that is using HTML5 on the front end and cloud computing (Windows Azure) on the back end. While the overall arrangement does not look terribly different, this application is light years ahead of the traditional one. The web client uses only open standards and can run on PC browsers as well as touch devices like tablets and phones. The server runs in one or more cloud data centers and boasts global presence, mammoth ability to scale, and high availability. A larger portion of the application is on the web client side. The web client consumes not only its own services but cloud platform services.

We’re not saying here that HTML5 and cloud computing must be mutually adopted, merely that HTML5 affects more than the front end and cloud computing affects more than the back end. When you do embrace both, however, you can create truly remarkable web experiences that run anywhere and everywhere.

In closing, we have seen that HTML5 and cloud computing are transforming web applications in a major way. The unfortunate tendency to think of these areas as being separate and unrelated belies the profound impact they are collectively having on web application design. Architects need to consider their web applications in totality and not fall into the trap of modernizing the front end or the back end without considering the inevitable impact on the rest of their solution. HTML5 and cloud computing are both revolutionizing the web. You don’t have to use them together, but there’s every reason to do so: Viva La Revolucion!

Next: When Worlds Collide #2: HTML5 + Cloud = Elasticity²

My Perspective on HTML5

There’s no shortage of information (and misinformation!) about HTML5 out there, but as I’m going to be blogging a lot on the subject I thought I’d begin with my perspective on it and where The New Web is headed.

WHY ALL THE EXCITEMENT?

Let me begin by stating the obvious: the web is really important. Duh. That’s hardly a secret--the web was already of staggering importance over 10 years ago--but it’s remarkable to me that just when you think the web couldn’t possibly become any more important to us, it continues to do so: it’s the gift that keeps on giving. I remember well the first time I ever saw the web—it was 1995—and I’ve watched the progression from static web sites to expressive static web sites to dynamic web sites to e-commerce sites all the way up to the present areas of focus on devices and social networking. The ubiquity of the web and high-speed access to it are now taken for granted by hundreds of millions of people, from elementary school children to grandparents. As newer aspects of the web unfold and grow it adds more tentacles to strengthen the hold it already has on our lifestyles.

The driving force behind HTML5 is the captivating idea of a lingua franca for web applications that will work well on PCs, tablets, and phones, based on open standards only. It has unbelievable momentum and there’s no serious opposition to it at this point. Apple’s decision not to support Flash on the iPad and iPhone had a lot to do with that. More than standards or technology, HTML5 is a decision that has been made, a movement with strong industry and community backing, and a phenomenon that has been set in motion.

There’s an unbelievable amount of activity already even though the standards are still in progress, and the creativity that’s being demonstrated is really inspiring. Check out Canvas Mol and Angry Birds and The Wilderness Downtown and Lucid Chart for example. I’ll be sharing plenty many more examples in future posts. That’s why, without a doubt, the time is right to stop being a bystander and get in the game. If you have any doubts about this whatsoever, pay attention to next month’s BUILD conference (which you can attend virtually) and Windows 8.

Before going any further, I need to point out that “HTML5” is not the best term for what’s changing on the web. People use that term either out of ignorance—not realizing there are over 100 related standards besides HTML involved here—or as a convenient label that really means, “that umbrella of related standards whose most prominent member is HTML5.” The latter seems to have taken hold, so I will not try to fight that, but just keep in mind that there’s a lot more to The New Web than just HTML.

EVOLUTIONARY OR REVOLUTIONARY?

It’s my job to be on the watch for how technology is changing and ensure my consulting practice is making the right strategic and tactical investments. I’ll often consider whether an area of technology change on the horizon is sustaining (progressive) or disruptive (game-changing) or said another way, evolutionary vs. revolutionary. If a change is disruptive, technologists and consultants need to recognize that sufficiently early on and invest in learning and understanding it, knowing it won’t be polished and mature right away but will eventually take over the market. If we guess wrong, we either miss an opportunity and fall behind or we waste our time on a “pretender technology” wave that doesn’t last. You can get some insights into this subject by reading The Innovator’s Dilemma.

What’s interesting about HTML5 is you can make an argument that it is both sustaining and disruptive at the same time, and that is rare. The progressive aspect is that HTML5 and many of its related standards such as CSS3 are the next versions of things we’ve already had and are familiar with. The disruptive aspect is that many of us who have relied on technologies like Flash and Silverlight for sophisticated web work will now have to revise our skills so we can do so the same using HTML5. I’m definitely in that camp: I’ve spent the last 3 years investing in Silverlight. For us this will mean going back to those basic web technologies like HTML, CSS, and JavaScript and getting ourselves to the point where we can do equally sophisticated work with them. So there’s plenty of disruption going on, both at the industry level and the individual designer-developer level.

A WORK IN PROGRESS

HTML5 is a work in progress. The current standards may not finalize until 2014-2020, and realistically there will always be a mixture of accepted standards and on-the-horizon standards. This means in its larger sense HTML5 is not really going to “land” anytime soon. There will surely be a time in the future when enough of HTML5 is finalized and supported by the mainstream browsers that we consider it ubiquitous but that’s years away.

The consequence of HTML5 being a work-in-progress is most clearly seen when you look at and compare web browsers. The latest browsers don’t support all of HTML5 yet—which is natural since it’s a moving target. You can get a sense of this by visiting html5test.com with different browsers. As I point out cool HTML5 demos going forward (one of my favorites being The Wilderness Downtown) you’ll find that many of them don’t work across all browsers yet. For example, Wilderness only works properly in Chrome today. There’s a bigger browser war than ever going on, and its two big planks are who has the best HTML5 support and hardware acceleration to support immersive animated multimedia experiences.

There are development consequences to HTML5 being a work in progress. Our web applications have to be checking for feature availability and providing reasonable fallback behavior, strongly leveraging libraries like modernizr. Fallback activities can mean extra work implementing more than one way to do something. A larger portion of an application will be written in JavaScript than in the past, and for many developers this will mean a drop in velocity until they become as fluent in JavaScript as they are in a language like C#. Developers need to recognize that JavaScript now needs to be recognized as a programming language and not just “web glue” you use from time to time when necessary.

TRUTH, HYPE, AND DECEIT

While HTML5 may be a work in progress, enough of it is there today that many real businesses are using it right now for their online presences. Some good examples are the Associated Press Timeline Viewer, BMW’s Joy Defines the Future, and the Tron Legacy site.You’ll find the major technology providers have their own sites showcasing HTML5 implementations and demos, including Microsoft’s Beauty of the Web and Google’s HTML Rocks.

There is however a lot of hype and outright deceit about HTML5, which means you need to develop a good sense about separating truth from fiction. The hype comes from technology vendors as well as individuals who put their own spin on things. You’ll find differing opinions about who has the fastest browser or supports HTML5 the best. For just about every claim made you’ll find a site “outing” the claim with an alternative opinion. Some of the cool HTML5 online demos, it turns out, actually still rely on technologies like Flash in order to work well across the browser spectrum.

What to do then? If HTML5 is already too important to sit by and ignore, yet isn’t done or consistently supported by browsers yet, how should you think about it? For me the only answer is immersion. It’s time to go deep and start using it, building up my capabilities progressively. If you want to come with me on this journey, keep following this blog.

Blog Makeover: Fire & Ice

I've updated the look and focus of my blog to a new "Fire and Ice" theme, which alludes to a new dual focus for me: The New Web and The Cloud. This simply reflects that I am immersed in both: the transformation of the front end with HTML5 and devices is as important as the transformation of the back end with cloud computing. Rest assured I'll be as deeply involved with Windows Azure as ever, but since I'm also making the HTML5 journey I will be blogging about that too. This won't be difficult, as HTML5 and Windows Azure have great synergy.

Neil Mackenzie's Windows Azure Book is Now Available

If you do much Windows Azure development, you're probably dependent as I am on the blog posts of fellow Windows Azure MVP Neil Mackenzie. Neil is also one of the star community supporters on the MSDN Windows Azure forum.

Neil's Windows Azure book has just been published, Microsoft Windows Azure Development Cookbook by Packt Publishing. Congratulations, Neil! Putting out a book is no easy task. Which reminds me, I need to get back to work on my next one. :)