Omar AL Zabir blog on ASP.NET Ajax and .NET 3.5

Safe COM: Managed Disposable Strongly Typed safe wrapper to late bound COM

Ajax Portal using VS 2008 and .NET 3.5

I have built an Ajax Web Portal (just like Sharepoint or Google IG) using Linq to SQL, Linq to XML, Workflow Foundation and ASP.NET AJAX 3.5. Although it's no where close to any real Portal, but it works as a great example to show how web applications can implement a widget enabled architecture just like Sharepoint. It also showcases how these hot technologies can play together in a complete web application.

Full source code is in Visual Studio 2008 using .NET 3.0 and .NET 3.5.

CodePlex site
http://www.codeplex.com/dropthings

Production site
http://www.dropthings.com

Code Project article that explains the architecture and development steps
http://www.codeproject.com/Ajax/MakingGoogleIG.asp

Technologies

• ASP.NET 3.5
• ASP.NET AJAX (.NET 3.5)
• Linq to Sql
• Linq to Xml
• Workflow Foundation (.NET 3.0)
• Visual Studio 2008 and SQL Server 2005

Technology Stack

What is an AJAX Portal
A portal refers to a page that allows users to customize their own homepage by dragging and dropping widgets onto the page. This approach gives users complete control over what content they see on their Start Page, where they want to see it, and how they want 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 a to-do-list, an address book, a contact list, an RSS feed, or even a clock, calendar, playlist, stock ticker, weather report, traffic report, dictionary, game, or almost anything you can imagine that can be packaged up and dropped on a Web page. In a corporate environment, widgets can connect to internal systems, such as an Expense Tracker widget that interacts directly with the internal Accounting System. If you are familiar with Sharepoint Portal, then you already know about Widgets. They are called Web parts in Sharepoint’s term and also in ASP.NET 2.0.
Portals are powerful RSS aggregation platform. You can put as many RSS widgets as you like on your page and get fresh content delivered to you as soon as it is published.
An Ajax-powered portal is specifically a portal that uses Ajax technologies to create richer experiences for its users. It is one step ahead of previous generation portals like My Yahoo or MSN.com, because it gives you state-of-the-art UI that behaves more like a Windows client application -- with widgets, animations, popups, client side data grids, and other effects not usually found on a non-Ajax Web portal.

How to run the project

1. Install Visual Studio 2008 (VS 2005 won't work)
2. Install SQL Server 2005
3. Download latest code from CodePlex site.
4. Restore the database from database\dashboard.zip
5. Update web.config from the web project and set proper connection string
6. Build and Run

How is ASP.NET AJAX used in this project?
It is an N-tier application, with a user interface (UI) layer, a business layer, and a data access layer. I have used ASP.NET AJAX to implement the UI layer of the portal application which includes the homepage and the widgets’ UI. ASP.NET AJAX provides the framework for loading widgets onto the Start page, updating widgets without doing any postbacks (via UpdatePanel), and changing page layout by dragging and dropping widgets on the page. It also provides 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 auto-completion behavior on text boxes, asynchronous data loading via webservice calls, and client-side paging, sorting and many more.

How is .NET 3.5 used in this project
The business layer of the application is built with the Workflow Foundation 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 enables you to break the complete workflow operation into smaller chunks named 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 , utilizing LINQ to SQL .
The web project and the widgets make good use of .NET 3.5 by utilizing 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 in order to consume XML from external data sources.

The above figure shows an workflow that creates the default homepage for a new user.

You are invited to participate in continued development of the project. If you want to develop widgets, you can download the code, develop the widget offline and then send me the widget related files. I will put them up on the production site. If you want to participate in core development, let me know and I will make you a developer on the codeplex project. Then you can check out code, work on it and then check in when you are done.

Warning: Dropthings.com is a very simple, open-source example of what can be done with AJAX and Microsoft technologies.  It is intended for educational purposes only.  Dropthings.com has absolutely nothing to do with pageflakes.com, and has no code or technology in common.  Trust me, you could not possibly build a product as advanced, scalable and complex as Pageflakes using the examples here, and you’d be insane to try :-) But this project does a good job to show you how all these technologies work together in a working web application.

10 cool web development related articles in 2007

Here's a list of 10 cool ASP.NET, AJAX and web development related articles and blog posts that I have written this year that you might want to take a look:

13 disasters for production website and their solutions
Talks about 13 production disasters that can happen to any website any time and bring down your business. 

Serve extensionless URL from ASP.NET without using ISAPI module or IIS 6 Wildcard mapping
Currently there are only two ways to service extentionless URL like www.pageflakes.com/omar that hits something besides the default document - use a custom ISAPI module or use IIS 6 wildcard mapping. Both has performance and scalability problems because both intercepts each and every hit. Learn how you can solve it by using a custom 404 handler.

Request format is unrecognized for URL unexpectedly ending in /SomeWebServiceMethod
Since ASP.NET AJAX 1.0 release, Microsoft prevented JSON hijacking by adding a special content type header. But this caused us some trouble.

Cleanup inactive anonymous users from ASP.NET Membership Tables
When you store anonymous user profile using ASP.NET Membership provider and Anonymous Identification provider, you soon end up with lots of idle anonymous user data where those users never come back. We (Pageflakes) went through a lot of difficulty keeping our database size down as we allow anonymous users to do almost everything that a registered user can do. This introduces scalability challenge. See how we solved this problem.

Prevent Denial of Service (DOS) attacks in your web application
Web applications can be brought down to its knees by hitting the site repeatedly or by calling expensive webservices randomly. Anyone can write a simple loop that hits a webserver very frequently from a high bandwidth connectivity and bring your production server down. See how to prevent such application level DOS attacks.

ASP.NET Ajax Extender for multi-column widget drag & drop
It's an ASP.NET AJAX extender that allows Pageflakes style drag & drop functionality between columns and rows.

ASP.NET Ajax in-depth performance analysis
While building an open source start page using ASP.NET AJAX, I have done a lot of performance analysis on AJAX framework in order to improve first time load and perceived speed of javascript rich pages. Check out my analysis.

Think you know how to write UPDATE statement? Think again.
Learn how to optimize common UPDATE statements

Make a surveillance application which captures desktop and then emails you as attachment
Some time back I needed to capture a certain computers desktop in order to find out what that user is doing every day. So, I made a .NET 2.0 Winforms Application which stays on system tray (optional) and capture the desktop in given time interval (say every 60 secs) and emailed the captured images to me as message attachment (say every 30 mins).

Today I received MVP award for the 3rd time on Visual C#. Thanks to Microsoft for the award and setting up my new blog. I will continue both my MVPS Blog and this blog from now on.

Make your website faster using Content Delivery Network

Every request from a browser goes to your server traveling through the Internet backbones that spans the world. The number of countries, continents, oceans a request has to go through to reach your server, the slower it is. For example, if you have your servers in USA and someone from Australia is browsing your site, each request is literary crossing the planet from one end to the other in order to reach your server and then come back again to the browser. If your site has large number of static files like images, css, javascript; sending request for each of them and downloading them across the world takes significant amount of time. If you could setup a server in Australia and redirect users to your Australian server, then each request would take fraction of the time it takes to reach USA. Not only the network latency will be lower but also the data transfer rate will be faster and thus static content will download a lot faster. This will give significant performance improvement on the user’s end if your website is rich in static content. Moreover, ISPs provide far greater speed for country wide network compared to the internet because each country generally has handful of connectivity to the Internet backbone that are shared by all ISPs within the country. As a result, users having 4mbps broadband connection will get the full 4mbps speed from servers that are within the same country. But they will get as low as 512kbps from servers which are outside the country. Thus having a server in the same country significantly improves site download speed and responsiveness.

Above figure shows average response time for www.pageflakes.com from Washington, DC, where the servers are in Dallas, Texas. The average response time is around 0.4 seconds. This response includes server side execution time as well. Generally it takes around 0.3 to 0.35 seconds to execute the page on the server. So, time spent on network is around 0.05 seconds or 50ms. This is a really fast connectivity as there are only 4 to 6 hops to reach Dallas from Washington DC.

This figure shows average response time from Sydney, Australia. The average response time is 1.5 seconds which is significantly higher than Washington DC. It’s almost 4 times compared to USA. There's almost 1.2 seconds overhead on network only. Moreover, there are around 17 to 23 hops from Sydney to Dallas. So, the site downloads at least 4 times slower in Australia than it is from anywhere in USA.

A content delivery network (CDN) is a system of computers networked together across the Internet. The computers cooperate transparently to deliver content (especially large media content) to end users. CDN nodes (cluster of servers in a specific location) are deployed in multiple locations, often over multiple backbones. These nodes cooperate with each other to serve requests for content by end users. They also transparently move content behind the scenes to optimize the delivery process. CDN serves request by intelligently choosing the nearest server. It looks for the fastest connectivity between your computer to a nearest node that has the content you are looking for.  The number of nodes in different countries and the number of redundant backbone connectivity a CDN has measures its strength. Some of the most popular CDNs are Akamai, Limelight, EdgeCast. Akamai is used by large companies like Microsoft, Yahoo, AOL. It’s comparatively expensive solution. However, Akamai has the best performance throughout the world because they have servers in almost every prominent city in the world. However, Akamai is very expensive and they only accept a customer who can spend minimum 5K on CDN per month. For smaller companies, Edgecast is a more affordable solution. 

This figure shows CDN Nodes that is closest to the browser intercepts traffic and serves response. If it does not have the response in cache, it fetches it from origin server using a faster route and much more optimized connectivity that the browser’s ISP can provide. If the content is already cached, then it’s served directly from the node

There are generally two types of CDN. One is where you upload content to CDN's servers via FTP and you get a subdomain in their domain like dropthings.somecdn.net. You change all the URL of static content throughout your site to download content from the CDN domain instead of relative URL to your own domain. So, a URL like /logo.gif will be renamed to http://dropthings.somecdn.net/logo.gif. This is easy to configure but has maintenance problems. You will have to keep CDN’s store synchronized with the files all the time. Deployment becomes complicated because you need to update both your website and the CDN store at the same time. Example of such a CDN (which is very cheap) is Cachefly.

A more convenient approach is to store static content on your own site but use domain aliasing. You can store your content in a subdomain that points to your own domain like static.dropthings.com. Then you use CNAME to map that subdomain to a CDN’s nameserver like cache.somecdn. net. When a browser tries to resolve static.dropthigns.com, the DNS lookup request goes to the CDN nameserver. The nameserver then returns IP of a CDN node which is closest to you and can give you the best download performance. Browser then sends requests for files to that CDN node. When CDN node sees the request, it checks whether it has the content already cached. If it is cached, it delivers the content directly from its local store. If not, it makes a request to your server and then looks at the cache header generated in response. Based on the cache header it decides how long to cache the response in its own cache. In the meantime, browser does not wait for CDN node to get content and return to it. CDN does interesting trick on the internet backbone to actually route request to the origin server so that the browser gets the response directly served from origin server while CDN is updating its cache. Sometimes CDN act as a proxy, intercepting each request and then fetching uncached content from origin using a faster route and optimized connectivity to the origin server.