This little beauty, once you’ve added the bookmark to your browser allows you to open a JavaScript Shell for any page you happen to be on! The shell lets you enter JavaScript from command-line to manipulate the page, trigger functions, analyze properties, etc. All libraries that the site has loaded are available within the Shell…so, if you use jQuery or some other toolkit, all defined functions and plugins are usable.

I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world…e.g. Dojo). I attended John Resig‘s presentation on jQuery and I became a convert.

John’s presentation was less of a presentation and more of a Q&A Demonstration, which suited me fine. As soon as I knew where to download the code, I popped open my laptop and started fiddling around with the toolkit – passively paying attention to the questions and answers, as they tended to be extremely basic questions…you see, jQuery is pretty darn intuitive.

jQuery’s mantra is “Find stuff and do stuff to it”

Yeah, I wasn’t converted because jQuery was the first toolkit to support chaining and that it executes it nicely. Nor was I converted because of its extensive plugin library. Nope. My conversion was the effecient findability of elements within the DOM! This is what really makes jQuery ballsy. The toolkit was built with findability in mind using already established standards! jQuery fully supports CSS1, CSS2, CSS3, and basic XPath when hunting for elements. For example:

Lets start with something simple:
Say I wanted to find all elements within the page that had the class: bork and hide them, I’d do:

$('.bork').hide();

Alright, say I wanted to find all anchor tags with the target set to _blank and add the class whee to it:

$('a[@target=_blank]').addClass('whee');

Now, lets say I want to find all anchor tags with the target set to _blank and add the class whee to them AND append (opens in a new window) as a sibling to the link itself.

$('a[@target=_blank]').each(
function(){
$(this).addClass('whee');
$(this).after('(Opens in a new window)');
}
);

Now, if I knew I was going to use the above a whole lot all over hell’s half acre, I could create a jQuery plugin that can be chained! Here’s how I’d create that feature and allow for the passing of class name:

Now, when I want to put Opens in a new window on a series of elements, I can do so with my newly created plugin:

$('a[@target=_blank]').opensInNewWindow('whee');
//I can do this for ANY element I want even if it isn't a link
$('span.bork').opensInNewWindow('zomg');
$('div#w00t ul.nav').opensInNewWindow('roflcopter');

Now, to make use of the chainability, you can write the plugin more simply than what I did up above. You can do this: (thanks to malsup, a commenter on this article)

Cake walk. As your proficiency in finding objects within a page increases, your code will become shorter.

jQuery currently has a very active community and mailing list (averaging at about 90 posts per day) so if you have questions regarding the toolkit, you can become a member and ask away… In addition, there’s a jQuery blog where John posts comparison code showing the difference between jQuery and other available toolkits. (here’s a Zebra striping example)

If you are still on the hunt for a JavaScript toolkit for Ajax, DOM manipulation, etc or you find your toolkit of choice too clunky, give jQuery a shot. You’ll be pleased with the results.

Despite the fact that AJAX is making significant inroads within the Web 2.0 community, many enterprise applications still remain either traditional web or desktop applications. However, by effectively using AJAX, enterprises can develop compelling, innovative, and useful web based applications that increase employee productivity while retaining the manageability enjoyed by traditional web applications. This session will focus on the challenges of developing enterprise AJAX applications with an emphasis on overcoming the common hurdles and problems encountered along the way.

Conrad’s discussion began with an re-iteration of what Web 2.0 is and how things have changed since Web 1.0. Old news, but the re-iteration was brief.

Choosing an RIA solution

Next Conrad explained his team’s decision process on choosing Ajax as the solution for creating their Rich Internet Application, Zimbra.

Flash?
The Zimbra team turned this down early on as they didn’t want to be tied to a proprietary solution… A decision I can respect :) I’m not too keen on the use of Flash as a front end for full-blown RIAs in most cases.

Ajax Worries
There were some hesitations regarding the use of Ajax as a solution:

Merge Images – Images are expensive! If your application uses a large number of icons, try merging them into a single image and use background-positioning on elements for the display of icons. For disabled icons, use opacity at 20-50% rather than creating a whole new icon.

Conclusion

I respect the Zimbra team and their decisions; their application is solid, functional, and quite sexy. All in all, this was a pretty solid presentation with a nice amount of data. As I mentioned earlier, the 3C’s were the most valuable tid-bits of information for me…although there were a few browser gotchas that I wasn’t aware of.