Comet: The futuristic view of web applications – A food for thought!

I hope that this word “Comet” must be a new one for most of you. Might be some of you have heard about it in the name of Reverse AJAX or Server Push or HTTP Streaming or LazyHTTP or Long-Lived-Http-Requests or what not. These all are different names given to variations of the same idea, trying to achieve the same goal one way or other.

Here I will try to explain “What Comet actually Is?” So, let’s start with the basics. HTTP protocol is based on the pull model i.e. the client sends a request to the server, the server processes that request and sends the response back to the client. This conventional way leads to serious bandwidth + network traffic + scalability issues for web applications that need to provide some real time information i.e. news ticker or stock quotes or a web based chat client kind of things over the web. Considering this pull model of HTTP, the web application simulates the real time updates of the news / stock quotes ticker by periodically sending AJAX requests using some Java Script timers or a similar approach. So in that case my application is generating periodic XMLHttp Requests irrespective of the fact whether there are any updates on the server or not, this leads to a substantial over head in terms of the network bandwidth, web server’s scalability and performance. This way of simulating the real time updates is call the Ping Model, in which you are continuously ping-ing the server to get any of the updated contents available on the server.

What if I don’t want to Ping the server for updates? What if I want the web server itself to notify the client whenever there is an update? Can we really do that? Is it possible over HTTP? Is it possible in ASP.NET + IIS? These are the questions which must be storming your mind by now.

What I can say about all this is that, there are several giants who are into it, like Google is achieving this task some how on it’s Google Talk web chat panel inside GMail web based interface. Meebo is also providing that server push kind of thing for its web chat platform. There are also several (experimental + commercial) implementations of Comet which are available out there.

Still I have serious doubts about the scalability any such solution. What we know is that HTTP is based on the pull model, then how can these implementations achieve a real server push over HTTP? What as per my feeling, they are doing is simulating the server push using Long-Lived-Http-Requests or the other option to achieve Server Push is to bypass HTTP and use the Raw TCP sockets, but that would lead many other concerns related with security, scalability etc.

Another way to achieve this server push on Web is using Sockets in Flash movies, these flash movies can be easily embedded in web pages that can be shown over HTTP, but in that case we need a Flash Communication Server. Thus even for that, there is some thing that’s required from the server to achieve this push kind of behavior in web applications to provide real time information on web pages.

So far, Microsoft is quite on this. Let’s see how things turn out from there end.

Below are a few links to the related articles and working samples to increase your urge to learn more and more about Comet.

• HTTP Streaming on AJAXPatterns
• Comet at Wikipedia
• Meebo a Web Chat Platform
• An elementary example at Ajaxif
• LightStreamer a commercial server for Comet Apps, also available for ASP.NET now

What is AJAX?

I have been among the interviewers at my work places for 50+ technical interviews, at different stages, for different positions, ranging from positions requiring fresh graduates to 4-5 years experienced resources. Out of all those interviews, I can count those good ones on fingers who correctly answered “What is AJAX?” So I consider it a worth sharing information, “What actually AJAX is”.

If you have any of the below questions in your mind, then I would recommend you to continue reading this post.

• Is it a tool?
• Is it a language?
• Is it a technology?
• Is it a library?
• Is it a technique?
• What’s so special about AJAX?
• What’s working behind the scenes in AJAX?
• Can’t we do the same trick if we don’t have the XMLHttpRequest object available in browsers?
• Can’t we make an AJAX request synchronous?
• How comes AJAX improve the responsiveness of a Web Application?
• Is the round-trip eliminated in case of AJAX?
• When to use AJAX?

Here are the points one needs to remember about AJAX, so as to have a clear understanding of what it actually is, what’s working behind the scenes, what are it’s alternates, when to use it and when not to use it.

• “AJAX stands for Asynchronous JavaScript and XML”.
• “AJAX is a technique” to make web applications more responsive, by enabling the application developers to “seamlessly make a request to the server without the need to Post Back the complete page” in order to provider better user experience.
• AJAX is a “mix of JavaScript, HTML, CSS, DOM, XML/JSON”
• The core object that’s working behind the scenes to seamlessly make a request to the server and is available in all modern browsers is “XMLHttpRequest / Microsoft.XMLHTTP”.
• There are “many libraries/frameworks written on top of this XMLHttpRequest / Microsoft.XMLHTTP” object that facilitate the AJAX based development. ASP.NET AJAX is one of those 100s of frameworks available for free to the ASP.NET developers to incorporate AJAX features in their ASP.NET based web applications.
• “We can make a synchronous requests” with XMLHttpRequest too.
• “We can do a similar trick as of AJAX by using the old & gold HTML Frames (a 0 sized frame)” and use Java Script to change the “src” attribute of that 0 sized frame based on some user action, to make a seamless request to the server, without the need to post back the actual page shown in the frame actually visible to the end use, and once the requested page in 0 sized frame is loaded, you can use JavaScript to manipulate the contents of the actually visible Frame to reflect the data actually fetched from the server in that 0 sized frame. This is the technique which I used back in 2002, on the SOFTEC 2003’s, Macromedia Flash 5 based website, to submit a data entered by the user in a flash based form, to the server without posting back the page in which the Flash movie was loaded so as to provide the best possible user experience to the end user.
• AJAX makes the application responsive by seamlessly sending an XMLHTTP request to the server without the need to post back the complete page. “By wisely using AJAX you can decrease the network traffic (and in turn increase the responsiveness) by just sending the request (and optionally the parameters) to the server and getting just the required data from the server and eventually displaying it to the end user in a neat fashion using JavaScript + HTML + DOM + CSS”.
• AJAX “doesn’t eliminate the round-trip to the server”; it’s not like that all the data required by the page is sent to the client side when the page is first rendered, using such approach (might) result in performance hit (in most cases). It’s actually an “on-demand fetching of the required data based on user actions / timers in a seamless fashion to provide a better user experience”.
• “Use AJAX in order to improve the user experience”. Keep the end use of your web application in mind, while you are engineering the application. This is the real key to make a successful web product / application.
• “Use AJAX in order to minimize the overall network traffic” created by your web application.
• “Don’t use AJAX to the extent that makes the response of your web application un-predictable for an end user”.

I will be providing a quick review of ASP.NET AJAX and its Programming Models in a week or so, keep your fingers crossed.

Secrets of Internet Marketing with Google – Google AdWords

A couple of weeks back, I attended a seminar on “Secrets of Internet Marketing with Google” at my university; LUMS.

The session started with case studies on Google’s AdWords, presented by CEOs / Technical Consultants of

• ShopHive
• CottonSocks
• LumenSoft
• Bramerz

After that Badar Khushnood; Country Consultant of Google Pakistan at Google Inc., presented an enlightening and quite a convincing presentation on the said topic.

I knew from quite some time that Google shows relevant Sponsored Text Ads with search results but I never knew that even a person like me can design a marketing campaign, at an affordable cost, using Google AdWords.

I heard quite a few surprising facts of internet marketing with Google at the seminar and would like to share some of those with you so that you can use it too to increase the market share of your products / services.

• “ShopHive” a Pakistani Shopping portal with monthly revenue of around 5 Million Rs is using Google AdWords and have a bigger competitive edge on “MyShop” because of the targeted audience.
• “CottonSocks” is reaching its targeted audience for exports by using Google AdWords and is happy with the overall cost / benefit ratio; same is the case with “LumeSoft”.
• Google “doesn’t charge you just for displaying your Ads” in the sponsored Ads panel in its search results. You will be only charged when any user browsing the search results actually clicks on your Ad.
• There is a “cost associated with per user click (CPC)” on your Ad and that depends on word you have chosen against which your Ad will be shown to the user who searches on that word or any of the related word.
• You can reach your “Targeted Audience” with Google AdWords. You can design your marketing campaign such that your Ads will be displayed only to those users browsing the web from a particular geographical area e.g. you can limit that your Ads should be displayed to only those users who are browsing the search results from Lahore only.
• You can tailor “any number of Ads” to be displayed in the sponsored links panel of Google Search Results.
• You can display your Ad as the sponsored links on the Google Search Results page with daily expenditure of as low as 1$ i.e. 60 Rs only, which is far low as compared to any other medium of advertising and is much more effective. In essence you can “define you daily budget for the Ads” to be displayed.
• Google also offers “certifications in Google AdWords” which one can opt for as a consultant to attract more and more companies to get consultation from him/her.

ExtJS 2.0 - Making Web applications more responsive with minimal network traffic!

It has been quite long that I have been working on engineering responsive web applications using Microsoft ASP.NET and related technologies.

Although the use of Update Panel can do the wonders to make a traditional ASP.NET Application a bit more responsive but I have always been eager to make the application responsive with minimal network traffic and that’s not the case when we use the ASP.NET AJAX Update Panel.

So I personally prefer the Client Centric Programming Model of ASP.NET AJAX (the PageMethods approach) in which you only transfer the required data and not the complete UI. And in this case when you transfer just the required data and not the complete UI, you are stuck on how to present the data in a good enough fashion. For that you need the command on Java Script + HTML DOM, but even when you have command on all this JavaScript + CSS stuff, making a “GridView” kind of thing to show the data using Java Script is hell of a task.

This is where ExtJS comes in, to serve the purpose. ExtJS is basically a JavaScript based UI framework and provides sufficient enough controls through which you can fulfill the data presentation needs of your applications.

The ExtJS controls range from HTML Control extenders (text, button, text area, select list) to a full fledged grid controls (with built-in client side sorting, column reordering, column hide/show, grouping, inline editing, deletion and what not) which can be 2 way-binded to multiple kinds of data sources (JSON, Arrays, XML etc), and quite amazingly all this is done in JavaScript.

A quick walkthrough on how to bind the data returned from server to an ExtJS based Grid is outlined below.

1. Get the data from the server (like getting a list of Employee type of objects i.e. List) using the ASP.NET AJAX Page Methods.


2. Define the ExtJS based “Record” that maps the Employee type of C# Class objects to an ExtJS based employee “Record” type.


3. Define the ExtJS based “JsonReader” and associate that reader with the employee “Record” type you have just defined in Ext JS.


4. Define the ExtJS based “Store” and load the returned List in that store using the reader you have already defined.


5. Now you can bind this ExtJS based “Store” to any ExtJS based “GridPanel” or Select list or can use the store as a temporary data place holder for further manipulation later on.

The tricky part is to read the returned List of Employees in “JsonReader” and load it in “Store”, once the data is loaded in the Store, you can bind it to any data bound ExtJS control or can manipulate it later on.

On request of one of the readers; Imtiaz, here is the sample code of the above walkthough. [Added: 14/12/2007]

The code sample is updated to incorporate JavaScript IntelliSense for ExtJS in Visual Studio 2008 SP1 and is available here. [Added: 17/08/2008]

ExtJS is compatible with all the modern browsers, and can be used for free under open source license or under a commercial copy-left license. For more details on licensing, refer to the ExtJS website. i.e. http://www.extjs.com/

A few sample UIs (snapshots of ExtJS examples) made with the ExtJS UI Framework are shown below to give you an idea of what we can get out of ExtJS.

Quarter Break + Annual Leaves

Finally it’s the end of another quarter of my MS-CS at LUMS & from yesterday onwards I am on annual leaves from office till the 1st week of December 2007.

Along with my other plans on how to spend these holidays, like spending some healthy time with my parents, I plan to update my blog with my experiences so far; old + new including but not limited to stuff like Comet, AJAX+ASP.NET AJAX 1.0, FxCop, Firebug + YSlow, SandCastle, MVC Framework for ASP.NET, C#3.0/3.5, Web Client Software Factory, Provider Model, Google AdWords etc. Let’s see how much successful I am in sharing some really exciting information on the said topics I have learnt through my experience working in these.

What’s new in Microsoft .NET 3.0 & .NET 3.5?

I came across this comprehensive diagrammatic representation that will definitely clarify what’s new in .NET 3.0 & .NET 3.5. The main point to remember is that both the .NET 3.0 and .NET 3.5 are built on top of .NET 2.0.

.NET 3.0 adds four frameworks namely Windows Communication Foundation (WCF), Windows Workflow Foundation (WF), Windows Presentation Foundation (WPF) and Card Space to .NET 2.0 and Microsoft named the resulting framework as .NET 3.0 (a marketing tactic).

Similarly .NET 3.5 adds Language Integrated Query (LINQ), Representational State Transfer (REST) and AJAX functionality to .NET 3.0 and named the resulting framework as .NET 3.5.