The level of functionality on the Web is changing and the bar is rising on what is considered a true rich Internet application (RIA). This fact and the emergence of the Web as an interconnected platform is once again changing the landscape and moving us into the next phase of the Web, which is called Web 3.0. It might be a little early to completely define what Web 3.0 will be but there are many indications of what will shape it.

Previous versions of the Web brought us from displaying traditional print media with simple interactions (Web 1.0) to the dynamic content, blogs, wikis, and social networking sites that are the pillars of Web 2.0. During this time, the Web turned into a platform and this is where Web 3.0 comes into the picture. In this next incarnation of the Web we'll see an increased dependency on the higher bandwidth that has become prevalent on the Web, the emergence of Web applications that blur the distinction between desktop and the Web, cloud computing and advancements in UI graphics never seen on the Web before.

In this article we'll take a look at how the Microsoft platform will play a part in this new era of the Web and how two technologies ASP.NET and Silverlight will contribute to this new wave of applications.

ASP.NET AJAX 4.0
In Web 2.0 it was all about ASP.NET, ASP.NET AJAX, and the AJAX Control Toolkit. These technologies enabled us to develop applications that began to represent the experience of a desktop application. ASP.NET provided a framework that let traditional desktop developers move to the Web and continue to use constructs like controls and event-driven programming. ASP.NET AJAX provided a framework that abstracted the browser and let us develop cross-browser applications in a common way, reducing our dependency on the heavyweight post-back model ASP.NET relied on. Finally, the AJAX Control Toolkit and the development community that supports it provided many of the controls needed to provide this interactive experience.

As we turn our attention to the next phase of the Web the ASP.NET AJAX roadmap offers a glimpse into how ASP.NET AJAX will continue to evolve. In Web 3.0 data from various sources will drive our experience and the improvements in ASP.NET AJAX in this area will enhance our ability to meet this goal. Until now working with data on the client has been difficult and lacked many of the data-binding constructs that we've taken for granted in traditional ASP.NET and desktop development. ASP.NET 4.0 is changing all that by introducing data binding and the declarative syntax to support it, UI templates, new controls, and the concept of client-side data.

In ASP.NET AJAX 4.0 data binding to templates is very easy. The code in Listing 1 shows how simple this approach is and how templates and bindings are all done declaratively right in your HTML. The key lies in the namespace extensions sys and dataview. The sys namespace registers the sys namespace that contains much of the plumbing required to get things working and the dataview namespace registers the DataView control that's a client-side control that handles the UI generation.

With these namespaces registered we can then use the sys:attach attribute to attach the DataView control to the table element. This construct is the declarative equivalent to the $create statement that has been in ASP.NET AJAX since the beginning as a way to associated components, controls, and behaviors to elements. The remaining work to get this template setup is associating bindings to the data source. The syntax {{ property }} is used to represent a binding between the source property and the template and when binding occurs will insert the value of the property into this placeholder (see Listing 1).

This story only gets better when we look at how data from a Web Service call is associated with the template. The getTerritoryInformation method in Listing 2 makes a call to the Web Service that returns a JSON representation of a SalesTerritory class. This data is then associated with the territoryInformation template from Listing 1 in the OnSuccess method. The data source of the DataView control is set to our returned SalesTerritory class and the render method on the control is called to update the UI with the new data.

The result of our work can be seen in Figure 1, which shows the Territory Name, Region Code, Sales Group, Sales YTD, and Sales Last Year. If we compare this experience to some older techniques of creating a string of HTML and performing an innerHTML or building up the HTML tree using the DOM this approach is cleaner and easier to understand.

Silverlight
Silverlight is a browser plug-in that relies on a cross-platform implementation of the .NET runtime to build RIA applications on the Web. Silverlight enables developers to use their favorite .NET language to create applications capable of generating rich graphics, streaming audio and video, and communicating with Web Services in a consistent manner. Many say that Silverlight is WPF for the Web but the verdict is still out as to whether this will be completely realized. What can be said is that with Silverlight it's possible to write an application that rivals that of the desktop without writing a single line of HTML or JavaScript.

As we look at how Silverlight fits into this new wave of Web applications two kinds of applications begin to emerge: mixed-mode apps and full-browser apps. Mix-mode applications utilize ASP.NET, ASP.NET AJAX, and Silverlight to provide a near-desktop experience on the Web. The use of Silverlight takes the form of a modular application, a Silverlight island, that provides added value to the existing HTML and JavaScript world. A full-browser application provides the closest experience yet to a desktop application. In most cases this kind of application will contain rich graphics, its own navigation subsystem, and seamless communication to a wide range of data sources on the Web. In essence these are desktop applications that are hosted in a browser.

Mixed-Mode Applications
The benefit of mixed-mode applications comes from their ability to use existing investments while extending functionality. If we take a look at the Rad Bikes application found at here and shown in Figure 2, Silverlight is used to graphically show sales territory information and related salesman information. The salesmen are shown in a font size that's proportional to the current year's sales and the names randomly animate around until you select one. Once selected, the Silverlight page changes to Figure 3 where the salesman's detail information is shown along with a sales chart for the last few years. The arrow button is used to navigate back to the salesman cloud list where another selection can be made. What is demonstrated here is that added functionality can be provided to an existing Web 2.0 scenario increasing the user experience while still utilizing your current investments.

The key to these kinds of applications is how the different worlds communicate with each other. If we look at Figure 2 the top part of the page is based on ASP.NET AJAX 4.0 and the bottom part uses Silverlight. When a territory is selected, the Silverlight portion is updated with sales information for that territory. The HTML Bridge in Silverlight, illustrated in Figure 3, is what makes all of this possible. The bridge provides a way for JavaScript to access managed code in Silverlight and enables you to expose managed types, methods, and properties to JavaScript for scripting; assign managed types as event handlers that are callable from JavaScript, and call JavaScript event handlers from managed types.

In the case of our Rad Bikes sample the _viewSalesInformaiton JavaScript function shown in Listing 3 creates a TerritoryInformation managed type and assigns values to it from Javascript. It then passes this newly created type into the exposed managed type method ShowTerritorySales, where it's used to gather sales information for the territory. This is all possible by registering creatable types and scriptable objects in your managed code using the RegisterCreatableType and RegisterScriptableObject methods of the HtmlPage class that provides access to the browser's Document Object Model (DOM) along with access to browser information. In our sample application these methods are called during the Page Load event (see Listing 4) of our main application page providing access to the managed types. As you might expect, there's a little work we have to do for the TerritoryInformation class (see Listing 5) to be serializable between JavaScript and the managed world. For this to occur the ScriptableType attribute needs to be applied to the class at a minimum. An option attribute, ScriptableMember, can be applied to the properties along with an alias to allow for different names to be used in JavaScript for the method, property, or event it's applied to.

Full-Browser Applications
The real attraction of full-browser applications is their almost unlimited bounds. In these kinds of applications the content of the browser turns into a full-fledged application that supports rich graphics, animations, and seamless data integration. The PhotoStackr application found at here and shown in Figure 4 is an example of an application of this type.

The Photo Stackr application gives you an interesting way to search for photos on the Flickr site. The search feature provides the ability to search a term and display the top 10 results for your criteria in a Photo "Stack." You can fetch as many stacks as you want and drag them around the surface to organize your photo table. The unstack button provides the ability to expand the stacked photos and the magnifying feature lets you get a closer look at an individual photo.

If we take this application and the Rad Bikes application, what we find is that Silverlight provides a way to do things that were just not possible in HTML. Take, for instance, the ability to stack photos on top of each other. In the PhotoStackr application a Transform is used to rotate the photos 90 degrees as they are stacked on top of each other. A Transform can map or transform from one coordinate space to another and make it possible to do this kind of effect. Drag-and-drop is another feature not easily possible in HTML and not to the extent possible in Silverlight. The concept of capturing and releasing an object and dragging it around is built into the UIElement that is the core element for controls in Silverlight.

Conclusion
The Microsoft platform for building next-generation Web applications is extremely robust and provides quite a few options. As Silverlight continues to mature we'll see a lot of enhancements from increased graphics support, tooling support, tighter integration with data, and more. Microsoft seems committed to this direction and to being a leader in the Web 3.0 space. It'll be interesting to see how the platform evolves.