Tuesday, June 23, 2009

Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0

Introduction

I will show you how I built a start page similar to Google IG in 7 nights using ASP.NET Ajax, .NET 3.0, Linq, DLinq and XLinq. I have logged my day to day development experience in this article and documented all the technical challenges, interesting discoveries and important design & architectural decisions. You will find the implementation quite close to actual Google IG. It has drag & drop enabled widgets, complete personalization of the pages, multi page feature and so on. It's not just a prototype or a sample project. It's a real living and breathing open source start page running at http://dropthings.omaralzabir.com/ which you can use everyday. You are welcome to participate in the development and make widgets for the project.

Screenshot

Updates

  • Jan 6, 2007: Scott Guthrie showed me how to improve ASP.NET Ajax client side performance by switching to debug="false" in web.config. It improves performance significantly. Read here.
  • Jan 5, 2007: Deployment problem discussed. Read here.
  • Jan 4, 2007: Visual Studio 2005 Extensions for .NET Framework 3.0 (Windows Workflow Foundation) required as prerequisite. Read here.
  • Jan 4, 2007: Some asked me if I am picking a fight with Google. I am not. I respect Google very much because they pioneered in this area and I am just a follower. Start Page is a really good project to show all these new technologies.

What is an Web 2.0 Ajax Start page

Start page allows you to build your own homepage by dragging & dropping widgets on the page. You have complete control over what you want to see, where you want to see and how you want to see. The widgets are independent applications which provide you with a set of features like to-do-list, address book, contact list, RSS feed, etc. Start pages are also widely known as RSS aggregators or in general term "content aggregators" from variety of web sources. But you can not only read RSS feeds using your start page but also organize your digital life with it. Ajax start pages are one step ahead of old school start pages like My Yahoo by giving you state-of-the-art UI with lots of JavaScript effects. They give you a desktop application like look & feel by utilizing Ajax and lots of advanced JavaScript & DHTML techniques.

Some of the popular Ajax Start Pages are Pageflakes, Live, Google IG, Netvibes, Protopage, Webwag etc. Among these, Google IG is the simplest one. The one I have built here is something between real Google IG and Pageflakes in terms of Ajax and client side richness. Google IG is mostly web 1.0 style postback model and it's not really that much of Ajax. For example, you see it postback on switching page, adding new modules, changing widget properties, etc. But the one I have built here is a lot more Ajax providing rich client side experience close to what you see in Pageflakes.

Features

Build your page by Dragging & Dropping widgets. You can completely personalize the page by putting what you want and where you want. You can add, remove widgets on your page. You can drag & drop them where you like. Close your browser and come back again, you will see the exact setup as you left it. You can use it without registering as long as you like.


See full detail: http://www.codeproject.com/KB/ajax/MakingGoogleIG.aspx

1 comment:

Nick Adams said...

Nice post. Keep it up..