Building a Web 2.0 Portal with ASP.NET 3.5

Chapter 1. Introducing Web Portals and Dropthings.OmarALZabir.com

In this book, I will show you how to develop an Ajax-enabled Web 2.0-style portal.

The portal is built using ASP.NET 3.5, ASP.NET AJAX, and .NET 3.5, as well as Language-Integrated Query (LINQ) and SQL Server 2005. While building this application, you’ll learn about the:

• Design decisions that must be made for and usability issues involved in a Web 2.0 user interface

• Architectural complexities and development challenges of JavaScript-rich, widgetenabled web sites

• Production and maintenance challenges of running a high-volume web application

Ajax web portals are among the most extreme implementations of client-side technologies you’ll find on the Web. They not only use large amounts of JavaScript, CSS, and HTML, but also push the Ajax and server-side technologies to their limits for interactivity, performance, and scalability. By the time you finish reading this book, you will be equipped with enough technical know-how to launch a Web 2.0 Internet startup on your own.

The application example, which I have named Dropthings, for reasons that will become clear shortly, is a reduced feature set prototype of a real web portal, like Google’s iGoogle or Pageflakes. You will be able to deploy the Dropthings on a production server and run it as your own personal web site, a group site, or even as a corporate intranet. Including drag-and-drop enabled widgets, complete support for personalization, the ability to place widgets on multiple pages, centralized authentication and authorization, and much more.

As you work through this book, you will see how Dropthings is architected and implemented. It’s a real, living, breathing, open source web portal that you’ll find at http://www.Dropthings.OmarALZabir.com. Although the application does not compare to a real web portal in terms of its code quality, feature set, scalability, performance, and other aspects of the product, it works as a good proof of concept for several nascent technologies.

However, you can use it for your current day-to-day personal use, and you are welcome to support continued development of the project by adding more features to it or by making cool new widgets for it.

Tip

The open source project for Dropthings is hosted at http://www.codeplex.com/dropthings. Anyone can contribute.

Figure 1-1 shows the Dropthings site, which you will learn how to build in this book.

Figure 1-1. The Dropthings site is a widget-enabled Web 2.0 portal; you’ll build one like it using ASP.NET 3.5, ASP.NET AJAX, the .NET Framework 3.5, and SQL Server 2005

Defining a Web Portal

A web portal is a page that allows a user to customize his homepage by dragging and dropping widgets onto it. This approach gives the user complete control over what content he sees on his home page, where on the page he wants to see it, and how he wants to interact with it.

A widget is a discrete piece on a web page that performs a particular function and comes with its own UI and set of features. Examples of widgets include to-do lists, address books, contact lists, RSS feeds, clocks, calendars, playlists, stock tickers, weather reports, traffic reports, dictionaries, games, or almost anything you can imagine that can be packaged up and dropped onto a web page. In a corporate environment, widgets can connect to internal systems; for example, an expense tracker widget can interact directly with the internal accounting system. If you are familiar with the SharePoint Portal, then you already know about widgets, which are called Web Parts in SharePoint and ASP.NET 2.0.

Specifically, an Ajax-powered web portal is a web portal that uses Ajax technologies to create richer experiences for its users. It is one step ahead of the previous generation of web portals, including pioneer sites such as MSN or AOL, because it gives you a state-of-the-art UI that behaves more like a Windows client application with widgets, animations, pop ups, client-side data grids, and other effects not usually found on a non-Ajax web portal. Not surprisingly, MSN and AOL have already adopted many of the practices discussed in this book.

Some of the most popular Ajax web portals include iGoogle (www.google.com/ig), My Yahoo (http://my.yahoo.com), and Pageflakes (www.pageflakes.com; see Figure 1-2).

Figure 1-2. Pageflakes uses widgets to deliver functionality, including local weather, local news, videos, local photos, podcasts, stock portfolio, local events with Google Maps, and more

A web portal, especially one that is Ajax-powered, gives users a fun way to browse the Internet. Users can add photos, videos, music, podcasts, and video blogs to their Start page. The web portal can also help users become more productive by allowing them to check email, read news, and get weather reports from a single page. They can organize their digital life by putting appointment calendars, to-do-lists, and address books in a central place on the Web. No matter where they happen to be—in the office, home or airport—as long as they can get to the Web, users can access this information directly from their web portal. It’s like bringing the whole Internet onto a single page, displayed exactly the way you want it to be. Gone are the days of running after content—now information and entertainment comes to you.

Defining a Web 2.0 Portal

The term "Web 2.0” defines a set of principles and practices for web applications, which, when followed, entitle a web application to wear the Web 2.0 crown. A web site can claim to be a Web 2.0 site if it:

• Allows users to control data presented on the web site

• Presents a platform that enables the mixing (or mash-up) of technologies and data

• Enables services to be consumed that are beyond the boundary of the application

• Harnesses collective intelligence by enabling the following:

  — Aggregation of relevant content from heterogeneous sources

  — User contributed content

  — User moderation of content via tagging and rating

• Uses state-of-the-art technologies that take interactivity on the Web to the next level by use of popular technologies like Ajax, Flash, and Silverlight.

Dropthings, being a web portal, allows a user to control what the user wants to put on the page. The widget architecture allows mashup of technologies in the form of widgets. It exposes web services that external entities can consume. The portal aggregates content from many different sources, such as photos from Flickr, news from CNN, weather reports from Weather.com, and many more. It supports usersubmitted content aggregation in the form of RSS feeds. Finally, it pushes interactivity on the Web to the next level by using Ajax technologies.

Using a Web Portal

With a web portal, every visitor to your web site will be able to customize and set it up exactly the way they would like to see it the next time they visit. Best of all, the layout is saved per user, so your master layout remains unchanged. Moreover, visitors can add more widgets from a widget catalog and decorate the page as they like.

How an Ajax-Powered Start Page Is Different

The advantages of Ajax and a rich client-side experience give users a fun and exciting environment to do their regular work. All the functionality is developed as small widgets that perform only a specific job, like showing messages from an Exchange Mail server, assigning tasks from a SharePoint List, or even displaying your expenses from an internal accounting system. Just as with a regular web portal, enterprise users can drag the widgets around and put them anywhere they like. For example, an email inbox can be put on the left, expenses in the middle, and a list of “Phone calls to make” on the right. A key advantage is that these widgets can provide content from different web servers on different platforms, including Linux, Unix, or IBM OS/2 servers. As long as the platform speaks XML and HTTP, any functionality can be provided in the form of a widget. The main framework takes care of authentication, authorization, user profile, communication, and all those cool Ajax effects. As a result, the widgets are a lightweight component with a small amount of code to do exactly what they are supposed to.

An Ajax web portal is also quite useful for group portals or social web sites. For example, say you want to make a .NET developer group portal. You would start with a blank page, add lots of .NET feeds, put a link widget and fill it with useful .NET web site links, add an address book widget and fill in useful contacts, put in a calendar widget to publish events for the group, and so on. With just these basic widgets and some rearranging, you have a dynamic, personalizable developer group portal that is state of the art in both technology and usability.

Enterprise portals especially can benefit from using Ajax web portals. Enterprise portals bring in content from many sources and different platforms. By using an Ajax widget platform, you can make the whole portal in terms of small widgets that connect to different systems and serve content to the page. The benefit of such a platform is that the complexity of the entire portal is dramatically reduced because it’s just a generic widget platform.

Navigating Dropthings

When you first visit Dropthings, which I encourage you to do now, you get a predefined default setup of widgets that you can customize anyway you like. For example, there’s a Flickr photo widget, some RSS feeds, and several community contributed widgets for weather, news, and so on (see Figure 1-3).

Figure 1-3. Your initial visit to Dropthings gives you a predefined template that can be customized

On the Dropthings Start page, you can add widgets, remove widgets that you don’t like, and customize individual widgets by clicking on the “edit” link on each title bar. Clicking on the “edit” link brings up the “Settings” area for the widget where you can change its look, feel, and behavior (see Figure 1-4).

Figure 1-4. The photo widget allows you to change the photo stream by clicking on “edit” link on the title bar of widget

You can also drag-and-drop widgets from one column to another and reorganize the page as you like. When you come back to the page, your customization is preserved even if you did not sign up. However, when you sign up, your pages are saved permanently and you can access them from anywhere (see Figure 1-5).

It is possible to have more than one tab (page) of widgets. There’s already a precreated empty second tab where you can add new widgets. So from there, you can add as many tabs as you like. This helps you keep your tabs clean and light and groups relevant widgets in the same location.

Clicking on the “Add stuff” link on the top right of the web page brings up a pop-up widget gallery that shows the list of available widgets (see Figure 1-6). From the list, you can click anywhere on the widget and have it added to your page. After adding it, you can further customize it by clicking on the “edit” link on the widget’s title bar.

Figure 1-5. You can drag and drop widgets on the page and reorganize the page as you like

Figure 1-6. Create a “Photo” tab and add a Flickr photo widget to it with Add Stuff; each photo widget shows a specific photo stream from Flickr as defined by the widget’s settings

At the top part of the page, there’s a bar where you can search the Internet. Search is the most used function on the Web. Therefore, web portals need to have convenient search functionality; otherwise users won’t set a web portal as browser homepage. The Live.com search bar on the top provides on-site search functionality where the search results are shown right on the page, which allows the user to perform a search without leaving the web portal (see Figure 1-7).

Figure 1-7. The Live.com search bar provides on-site search functionality

As you use the site, you will notice there’s not a single postback of the page. Operations are performed either via asynchronous postback or via JavaScript calls from the browser. You can add/remove widgets, drag-and-drop widgets, and switch tabs without ever causing a postback or refresh of the page. This is what makes Ajax web portals really convenient and fast to use compared to non-Ajax web portals.

Using ASP.NET AJAX

The web portal you’ll learn how to build is an N-tier application with a user interface (UI) layer, a business layer, and a data access layer. You’ll use ASP.NET AJAX to implement the UI layer of the web portal application, which includes the homepage and the widget’s UI. ASP.NET AJAX provides the framework (via UpdatePanel) for updating widgets without doing any postbacks, and it changes page layout by dragging and dropping widgets on the page. It also offers a rich collection of Control Extenders that add cool effects like fade in/fade out, smooth transitions, and client-side animations. You can add to the rich client-side experience by providing autocompletion behavior on text boxes, asynchronous data loading via web service calls, client-side paging, sorting, and much more.

The ASP.NET AJAX runtime provides a framework you can use to make XML HTTP calls from within the widgets. It also provides the framework for building client-side effects using Custom Extenders. The drag-and-drop behavior of widgets on the page is built as an Extender. You’ll also reuse some extenders from the Ajax Control Toolkit (ACT) to enrich the client user experience within the widgets.

ASP.NET AJAX exposes a handy API that you can use to authenticate against the ASP.NET Membership application service. A good thing about the ASP.NET Membership API is that it’s fully compatible with ASP.NET AJAX and providers for Membership, Profile properties, and so on; they all work exactly the same way as a regular ASP.NET web site. This means you can make client-side login and signup forms, and change user preferences without requiring any postback.

Using C# 3.0 and .NET 3.5

Dropthing’s business layer is built with the Windows Workflow Foundation (WF), which was introduced in .NET 3.0. Major operations like a first-time user visit, a subsequent user visit, adding a new widget, and creating a new page are all orchestrated using workflow. The workflows contain all the business rules and activities needed to complete each operation. For example, the New User Visit workflow creates the user account, populates the user profile with default values, creates some default pages, populates them with specific widgets, etc. Such compound operations are very easy to build with workflows, which enable you to break the complete operation into smaller chunks called Activities. Each Activity does a very small amount of work. It talks to the data access layer and performs the task. The data access layer is built with .NET 3.5, using LINQ to SQL, which vastly simplifies the querying of databases from within your application code.

The web project and the widgets make good use of .NET 3.5 by using new functionality for lambda expressions, LINQ to SQL, and LINQ to XML. You will use LINQ queries to work with collections and database rows. Widgets make good use of LINQ to XML to consume XML from external data sources.

The application is built following a typical N-tier architecture where there’s a clear separation between the UI, business logic, and data (see Figure 1-8). For example:

Web layer

Consists of web pages, web services, resources (e.g., graphics, CSS, JavaScript, and .resx files), and configuration settings.

Business layer

Provides the entity classes, business rules, and middle-tier caching of data to reduce database roundtrips.

Data access layer

Encapsulates database access and provides an interface that is database and data source independent. It also provides object factories that create Entity classes out of database rows and vice versa.

In Figure 1-8, the technologies are mapped to each layer.

Figure 1-8. Mapping technologies to the different layers

The web portal application in this book makes use of some of the newest .NET 3.0 and .NET 3.5 technologies. The web layer uses ASP.NET AJAX for a rich user experience, and the business layer uses the new WF to orchestrate complex operations. All three layers use LINQ to work with data structures.

C# 3.0 language extensions and LINQ queries are used in all layers to work easily with collections, database rows, and XML. WF is used in the business layer to perform complex operations, such as workflows. LINQ to SQL is part of both the data access layer and the business layer. Although the insert, update, and delete operations are mostly encapsulated inside the data access layer, some queries are faster to implement directly from the business layer. That’s why LINQ to SQL is also part of the business layer.

Summary

Ajax web portals push Ajax technologies to their limits. Microsoft’s ASP.NET AJAX offers a rich set of Ajax components and a robust cross-browser compatible framework to harness the full power of Ajax in web portals. The new features in .NET 3.0 and 3.5 Frameworks empower architects and developers with features like Workflow Foundation, LINQ to SQL, and LINQ to XML. This chapter, provided a brief overview of what an Ajax web portal can do and what technologies are involved in making such a project. The next chapter will discuss the architectural challenges, performance issues, and security threats that make architecting a web portal more challenging than typical web applications.

Additional Resources

• “Using LINQ to SQL (Part 1)” from Scott Guthrie’s blog (http://weblogs.asp.net/scottgu/archive/2007/05/19/using-linq-to-sql-part-1.aspx )

• LINQ to XML overviews (http://msdn2.microsoft.com/en-us/library/bb308960.aspx)

• Workflow Foundation tutorials (http://wf.netfx3.com)

• The LINQ Project (http://msdn2.microsoft.com/en-us/netframework/aa904594.aspx)