New Features in HTML5
HTML5 is an umbrella term for the new HTML, JavaScript, and Cascading Style Sheets (CSS) features that are being standardized. New HTML tags include the <nav> tag, which is used for general website navigation; the <video> tag, which is used for displaying video content; and the <audio> tag, which is used for playing audio content. In general, these tags replace the <object> tag that websites used previously. HTML5 also includes new input controls that are designed to handle some of the more common input scenarios, such as issues with dates and times. Finally, numerous attributes have been added to existing controls. Many of the existing input controls have new and enhanced attributes that allow browsers to expose users to new functionality.
Along with the new markup specifications, new JavaScript classes let programmers capitalize on the latest features that developers have been asking for. The following paragraphs discuss some of these features.
JavaScript selectors. There are new JavaScript selectors for getElementById and getElementByTagName. There are also selectors, such as getElementByClassName and querySelector.
LocalStorage. Developers have long been using cookies for local storage. However, cookies are sent across the wire and back to the server, a transfer that increases sent data volumes. HTML5 introduces support for a storage feature named LocalStorage. With this feature, data is no longer sent across the wire with each server request. Also, more data can be stored with LocalStorage than with cookies.
WebSQL. Although WebSQL is no longer a part of the HTML5 standard, this feature has been implemented in several browsers, such as iPhone's Safari and the Android browser. This feature can be tested for and used.
Threads. On a desktop application, a long-running operation can be spun off into another thread, allowing the user to continue working without blocking the application's UI. HTML5 introduces this concept of threads in the browser environment, a feature known as Web Workers.
Application caching. What happens when an application cannot connect to its web server? There may be a variety of reasons, but the user only knows that the application is offline. HTML5 provides an offline application-caching API that allows an application to degrade more gracefully when it cannot connect to its web server.
Web sockets. When there is a long-running event on the server, the browser can be set to poll for a completion. What happens when 100,000 users continually nag the server with the online equivalent of "Are we there yet?" To address this issue, the HTML5 standard has web sockets. However, there are some security issues in the underlying communications protocol that must be addressed.
Drawing. It's possible to draw in the browser by using the Canvas tag and its associated JavaScript commands.
Geolocation . Geolocation is not a part of, but is associated with, the HTML5 specifications. Because it is often discussed as a part of HTML5, we'll consider it that way for this article. Geolocation allows a browser to determine its current location so that the user can be presented with local information. Geolocation allows for more accurate location information than is typically possible through IP address lookup services.
Other features allow for drag-and-drop support, audio and video tag manipulation, server-sent events, and other features. Some of these features will also require server support for optimal performance.
A Peek at HTML5
Let's take a peek at a simple HTML5 web page and make some key observations about the code. Figure 1 shows some sample source code.
Figure 1: Sample HTML5 source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
<title>About My HTML5 Site</title>
</head>
<body>
<div id="container">
<header >
<h1>About My HTML5 Site</h1>
</header>
<p>
This web page was built using ASP.NET. For more information, visit the
<a href="http://www.asp.net">ASP.NET homepage</a>.
</p>
<footer>
<span style="margin-left:auto;margin-right:auto;"><a href="http://www.scalabledevelopment.com">SDI</a></span>
</footer>
</div>
</body>
</html>
Notice that the doctype tag, which tells a browser which version of HTML to use, is now much simpler. In HTML5, there is only one doctype tag. The X-UA-Compatible meta tag tells the browser to use the most recent engine available. My system has the Google Chrome frame plug-in installed, so this information is included, as well as the instruction to use the most recent version of the Internet Explorer (IE) engine. Finally, the page is logically divided by header, content, and footer tags. These tags instruct a browser to separate the content visually. This instruction is particularly important for a mobile web browser.
Browsers Galore
Currently, there is no single dominant browser. We've got IE, Firefox, Chrome, Safari, and Opera for the desktop. Add to those the many mobile device browsers such as Safari, the Android browser, and the mobile IE for Windows Phone 7, along with the various versions of each browser. Developers are presented with a vast and complex array of scenarios to code for. In this vein, you may be familiar with the following JavaScript code:
If ( navigator.useragent.indexOf(…….) > -1)
{
// do something...
This code determines whether the browser is of a specific type. It then responds accordingly—for example, by redirecting the browser to a page optimized for that browser.
Similar functionality exists on the server. The ASP.NET developer can use the Request.Browser server-side object. Some of the properties of this object that you may find useful include the following:
• Request.Browser.IsMobileDevice
• Request.Browser.MobileDeviceManufacturer
• Request.Browser.MobileDeviceModel
• Request.Browser.ScreenPixels
Along with the Request.Browser server-side object, ASP.NET controls contain support for various browsers, based on the user-agent header value. You can also use the Wireless Universal Resource File (WURFL) project. The WURFL project contains a more current set of browser definitions that allow a user to determine device features on the server, such as device input method, audio format support, and other features that are not part of the built-in ASP.NET capabilities. This general technique is referred to as browser detection. While conceptually simple, browser detection tends to be problematic. Browser detection typically results in a large number of if/else statements. This can be confusing and difficult to change.
Feature detection is another useful HTML5 option. A browser is tested for its support of various features. If it supports a particular feature, the browser uses it; if support for the feature is not available in the browser, the feature is not used. Although slightly different from browser detection, feature detection results in simpler code that is ultimately easier to maintain. Although browser detection was fairly common for years, feature detection is better for creating maintainable code.
Along with feature detection, a JavaScript library named Modernizr helps developers implement reliable feature detection. The following code sample uses the Modernizr library to test for geolocation support and then apply geolocation.
if (Modernizr.geolocation) {
var navgeo = navigator.geolocation;
navgeo.getCurrentPosition(WhereIsUser, WhereIsUserError, PosOptions);
}
Native IE9
At the MIX11 conference, Microsoft made a lot of predictable noise in support of IE because of its "native" status. Terms like native HTML were bandied about. Add to that an early June 2011 demo of Windows 8 with HTML and JavaScript, and there has been some understandable confusion in the marketplace. With all these terms and ideas being tossed around, what's a developer to do? Microsoft will have its BUILD conference in September, so hopefully we'll know more then. In the mean time, there are a few things that we do know about IE9 regarding its optimizations and hardware acceleration.
First, we know that the JavaScript engine has been rewritten to support multiple processor cores. Specifically, a background compilation takes JavaScript and converts it into machine code that runs faster on a given system. Secondly, the machine code that the JavaScript engine produces takes advantage of the most recent and optimized machine commands. Finally, we know that the HTML, Scalable Vector Graphics (SVG), CSS, audio, and video support have been reconfigured for hardware acceleration. Microsoft may have added these features to support modern hardware capabilities such as graphics processing units (GPUs), multiple cores, and other new developments. For example, the <canvas> tag will attain a big boost in performance when it is used in IE9. Overall, it appears that the folks at Microsoft are promoting their browser as the best platform because there are fewer operating system layers to go through when you use IE in a Windows environment.
How ASP.NET Developers Can Be Involved
If you're an ASP.NET developer, you're faced with a couple of questions when designing an ASP.NET application to support HTML5. The first question concerns how to present an application to the user. Currently, HTML5 browsers are more frequently found in mobile devices than in desktop browsers. Since there is a profound difference between a four-inch mobile device and a 25-inch desktop browser, you must understand the differences between the two. A web application designed for a desktop browser (as shown in Figure 2) will most likely present a horrible experience to a user who connects to the application over a mobile device (as shown in Figure 3).
Given the significant differences in device dimensions, successful sites, such as ESPN and Ruby Tuesday design their applications for a general display size. If a user comes to a site through a desktop browser, the user goes right on into the site. If a user comes to a site through a mobile browser, the user is redirected to a mobile version of the application. The code to detect the type of browser and perform the redirection can be placed within the session's Start event.
The second question concerns which ASP.NET display technology to use. Thankfully, it doesn't matter if an application uses ASP.NET Web Forms, ASP.NET MVC, or ASP.NET Web Pages (aka Razor). All these technologies can be used to build an HTML5 ASP.NET application. ASP.NET, MVC, and Web Pages let you directly interact with the HTML output, so you don't need to do anything special when using these types of projects. You only need to write valid HTML5 code for the devices you're planning to support. With a few changes of the standard features in ASP.NET Web Forms, you can use HTML5 features quickly and easily.
Web Forms
ASP.NET Web Forms is a very popular development framework. The problem with Web Forms is that some of its standard features create confusion. The most problematic features in HTML5 and mobile spaces are ViewState, ClientIDs, and MasterPages. We'll walk through ways to provide users with a more optimal solution to the problems encountered when using these features.
ViewState. ASP.NET developers are used to working with ViewState, the feature that makes Web Forms work. However, ViewState increases the size of the web page. For example, if you bind a set of objects to a grid, the size of the page increases dramatically. While the size of the page is not necessarily a big deal for applications that are running over a fairly reliable network, increased page size greatly increases the risk of an error when the page is transmitted over wireless 3G and 4G networks. To work around this issue, you have two options.
First, you can turn off ViewState unless it's needed by a specific control on a page. When you turn off ViewState, it is minimized unless it's absolutely needed, as determined by a developer. However, a page may still be too large because ViewState is stored on the client web page. In this scenario, ViewState can be turned off at the container, page, application, or server level. Turning it off at these levels eliminates the ViewState payload unless it's absolutely necessary for a control.
ASP.NET 4 introduces a feature that lets you turn off ViewState at a higher level in the hierarchy, then turn it on as necessary. Specifically, ViewState can be modified by the ViewStateMode attribute in an ASP.NET control. In the examples in Figure 4 and Figure 5, a grid of data is displayed to the user. The GridView doesn't require many of the more complicated features typically associated with HTML5, so turning off ViewState has no effect on the application or the user. Note that the ViewState mode is turned off within the Content2 container. Figure 4 shows the code for the content view. Figure 5 shows the output of the code in Figure 4.
Figure 4: Code for the content view
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" ViewStateMode="Disabled">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
View State Size: <span id="ViewStateSize"></span>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// put all your jQuery goodness in here.
var vs = document.getElementById("__VIEWSTATE");
var outPut = document.getElementById("ViewStateSize");
outPut.innerHTML = vs.value.length;
});
</script>
<asp:GridView ID="gvCustomer" runat="server">
<Columns>
<asp:TemplateField AccessibleHeaderText="Get Info" HeaderText="Get Info">
<ItemTemplate>
<asp:HyperLink ID="hl" runat="server" Text="Get Info"
NavigateUrl='<%# String.Format("CustomerInformation.aspx?CustomerID={0}", Container.DataItem) %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Content>
The second option is to store ViewState on the server. When you use this option, the data is never transferred across the wireless connection. This requires some setup on the pages, but once configured, this option is relatively painless. There are a number of articles about this topic on the web, so there's not much reason to go over the details here.
ClientIDs . Automatically generated ClientIDs represent the next issue that ASP.NET developers must negotiate. By default, the client IDs that are generated comprise a munged version of the server-side parent containers and control IDs. For example, the grid shown in the ViewState example has the ID MainContent_gvCustomer. You can use the following JavaScript command to get a client-side reference to a server-side object:
var serverObject = document.getElementById('<%: gvCustomer.ClientID%>');
Unfortunately, developers are not the only folks who work on a project. Designers are also involved, and they may not be familiar with the functionality behind control IDs. Therefore, a new feature was introduced in ASP.NET 4 to grant programmers complete control over the client IDs that are generated. This feature is controlled by the ClientIDMode attribute. The values of particular interest for this attribute are Static and Predictable. The Static attribute makes sure that the client ID that is generated remains the same as the server ID. The Predictable attribute is used in conjunction with the data-bound controls and the Static value to generate repeatable client IDs in a grid.
MasterPages. Although not necessarily a requirement for Web Forms developers, MasterPages is a great tool for sharing display layout among pages. I don't recommend that you try to use the same general layout for both a desktop web application and a mobile web application. Instead, it makes sense to create a master page optimized for mobile devices and to continue using this design and layout technique, although MasterPages will certainly be different because of the difference in the layout capabilities of a mobile device and a desktop web browser.
HTML5 Validation
In the Visual Studio 2010 SP1 release, the April 2011 ASP.NET MVC 3 Tools update, and the June 2011 release of the Visual Studio Web Standards update, Microsoft not only updated its MVC tools, but it also added support for HTML5, as illustrated in Figures 6A and 6B. Developers now get support for HTML5, CSS3, and the JavaScript objects that support the new features. With CSS3 support, even the IE, Mozilla, and Safari extensions are supported.
Saving Bandwidth with CDNs
Most developers are accustomed to copying files locally to a solution, then running the application as a self-contained unit. There are a number of files that applications share, not only across a single company but also across many applications. These are libraries such as jQuery and many of the JavaScript libraries that are a part of the ASP.NET 4 framework. Many companies and organizations share these libraries. Instead of using this bandwidth on your servers and routinely downloading these files, based on caching settings, it makes sense to use the same copies that others may have already downloaded to their systems. This means that instead of loading JavaScript files, CSS files, and others from your web server, the user's browser downloads the files from various content delivery networks (CDNs). Although this approach may not sound like a significant improvement, your users will typically obtain a better response time for various libraries from these CDNs. Along with shipment of ASP.NET 4, Microsoft has provided support for its CDN within the ASP.NET ScriptManager by setting the EnableCdn attribute to true.
To illustrate the difference between using a CDN and using content from your own local web server, let's look at the results from a simple ASP.NET Web Form by using the Firebug and YSlow tools. Let's look at a simple page with only the master page and the script manager installed, as shown in Figure 7.
Once the four standard ASP.NET JavaScript files are cached locally, 56.6KB of data is being pulled from the local cache. This may not sound like a lot of data, but in an HTML5 mobile world, this amount can be significant.
Now, what would have happened if we had not used the CDN? As you can see from Figure 8, YSlow reports that the files are cached coming from our own web server.
However, it is highly unlikely that other applications are pulling this content from our servers; at least we hope that they aren't. By using the files from our local server, users are paying the "bandwidth tax" instead of using the files that may already be cached locally from another application. Every little bit of bandwidth savings helps, especially in the mobile space. A second advantage is that on public-facing websites where bandwidth may cost money, the bandwidth cost for your website will most likely go down by using a CDN. For more information about why to cache files through CDNs, check out Dave Ward's excellent set of articles in the Links of Interest sidebar at the end of this article
ASP.NET MVC
In pages and applications based on the MVC design pattern, the presentation logic is decoupled from the underlying application logic. If an application needs to present different views of the same data to a desktop and a mobile client web client, it is possible to reuse the underlying models and controllers and merely swap the views as necessary. I think this is a huge win for web developers who are using the ASP.NET MVC framework.
With the recent MVC3 Tools update, the ASP.NET team has added the ability to use HTML5 by default. You can do so by selecting the Use HTML5 semantic markup check box, as shown in Figure 9.
