Tag Archives: AJAX

The Best JavaScript Library

Posted on by

I am in the process of creating a new web application using asp.net mvc and I am trying to choose the best JavaScript library to use.  I am pretty much sure that I am going to go with jQuery but nonetheless I wanted to review the libraries out there.  One reason is that I am writing a book and I want to be able to justify to the readers why I am going with jQuery and not the others.

What do I want from my JavaScript Library?

I want it to be easy (I am not a JavaScript expert)
I want it to be small
I want it to be fast
I want it to be extensible
I want good documentation and/or community support
I want good/easy AJAX support
I want it to be asp.net-friendly
I also want it to be testable (I am using TDD for this project/book)
Open Source would be nice but not required

What are my options?

jQuery – http://jquery.com/
Microsoft AJAX – http://www.asp.net/ajax/
Dojo – http://dojotoolkit.org/
Prototype – http://www.prototypejs.org/
YUI – http://developer.yahoo.com/yui/

This is a shortlist but if you want a more exhaustive, read this.  I only picked these, for the simple reasons that I have heard of them and are somewhat known by the community.

3 days later

It’s been 3 days since I started this post and I have spent all that time playing around with these libraries…  I have gone back and forth in my opinion on which library to use.  I love jQuery’s selectors, ease of use and community support.  Porototype is also very popular and somewhat similar to jQuery; but I would take jQuery over Prototype for the simple reason that I like jQuery.  YUI (Yahoo! UI) library is beautiful looking and very comprehensive.

jQuery

Pros

  1. Ease to learn and use
  2. Beautiful syntax (the least typing)
  3. Great community support and lots of fans
  4. Decent Documentation
  5. I already own the book
  6. QUnit test framework (http://docs.jquery.com/QUnit)

Cons

  1. UI isn’t that great
  2. Library is not as full-featured without plugins
  3. Plugins are somewhat inconsistent in quality depending on the author

Prototype

Pros

  1. Good documentation
  2. Good community support
  3. Lots of books
    1. Practical Prototype and script-aculo.us
    2. Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!
    3. and many more…
  4. Great UI with the add-on script.aculo.us (http://script.aculo.us/)

Cons

  1. Couldn’t find a testing framework (but I didn’t look too hard)
  2. For some purely emotional reason, I prefer jQuery

YUI

Pros

  1. Great UI components and styles
  2. The best documented library out there, hands down.
  3. Distributed hosting of JS files – the script files will be downloaded from Yahoo server, so when my site becomes a mega-hit, it will scale better.
  4. Great test framework and test runner – check these demos
    image
  5. The most complete library
  6. PDF cheat sheets for every component

Cons

  1. Very verbose – not as elegant as jQuery, but that’s not too hard to fix e.g. I can assign YAHOO.util.Event to a variable $E and use $E as the shorthand.

The rest

I got tired of all the research and decided to wrap it up, so I glanced over Microsoft AJAX and Dojo and realized that there isn’t enough there to justify more research.

The winner…

When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This lead to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look & feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision because I still love jQuery the best.

[poll id="2"]

CMAP Code Camp 2008 Spring Edition

Posted on by

Yesterday, I gave a talk at CMAP Code Camp about the asp.net mvc framework and AJAX using JQuery. This is my first time speaking, so I was a little nervous. I think I did ok but I can’t really tell. Of course, the talk didn’t go as planned, because Visual Studio didn’t cooperate. Thankfully, I had a Plan B and pulled up code that I had already prepared and just walked through it and explained it. I wanted to give more details but I didn’t have enough time.

So, if you have attended the talk, I would love to hear your feedback, so please leave me a comment or send me a not through the contact page.

Previously, I posted some asp.net mvc framework resources over here. You can also see my mvc bookmarks at http://del.icio.us/eibrahim/mvc

There are also tons of JQuery resources at www.jquery.com and I found this handy JQuery 1.2 cheat sheet (remember: this is for version 1.2)

“According to most studies, people’s number one fear is public speaking. Number two is death. Death is number two. Does that sound right? This means to the average person, if you go to a funeral, you’re better off in the casket than doing the eulogy.” – Jerry Seinfeld.

Ajax with ASP.NET MVC Framework Preview 2

Posted on by

This is the updated version of the Nikhil’s excellent example on how to use Ajax with ASP.net MVC.

I commented all the changes made in the code and prefixed them with //emad. So just search for //emad and you will see all the changes I made… Here is a quick list of the changes I made to make this compile and run on MVC Preview 2:

  1. Removed the [ControllerAction] tags – they are no longer needed.
  2. Updated the Route Table creation in the global.asax.cs file to work with the new format
  3. Updated the Ajax framework project to use the new classes
    1. HttpContextBase instead of IHttpContext
    2. HttpRequestBased instead of IHttpRequest
    3. HttpResponseBase instead of IHttpResponse
  4. Updated the AjaxViewContext constructor to match ViewContext constructor
  5. Changed the web.config to work with the new version (copied and pasted from another preview 2 project)

Note: Test project was not updated and will not compile – sorry, I didn’t have time to do it.

Here is the updated code: tasklist.zip

Fame, Fortune and WCF

Posted on by

I need your help to bring me fame and fortune.

I wrote an article at code project which was entered for a competition.  The winner gets $10k.  Can you please check it out at http://www.codeproject.com/KB/WCF/myfeedreader.aspx and if you like it, please vote for it.  I can’t win if you don’t vote.  Voting will be closed on December 31st.

To vote, you need to login and find the voting area at the bottom that looks like this:

image

Thanks and I hope you find the article helpful.

ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator

Posted on by

Here is an interesting article on how to display Gmail-like progress indicator: Matt Berseth: ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator over a Specific ASP.NET Control

But I have a much easier method to do that, which I use in www.yongazonga.com:

First, add your UpdateProgress control like this:

<asp:UpdateProgress ID="UpdateProgress2" runat="server"
    AssociatedUpdatePanelID="pnlNewUser"
   DisplayAfter="0" DynamicLayout="True">
      <ProgressTemplate>
         <div class='progresspanel'>
                Loading...
         </div>
      </ProgressTemplate>
</asp:UpdateProgress>

And then apply this style to the div:

.progresspanel
{
    background-color: RED;
    color: White;
    top: 1px;
    color: white;
    position: absolute;
    right: 16px;
    z-index: 999;
}

Do you have a better/easier way of doing this?

kick it on DotNetKicks.com