The "Tech. Arch."

Architecting Forward ::>

The Three Javascript Musketeers

Until fairly recently, i.e. the release of ASP.NET Ajax, building richer client-side behavior meant either leveraging lesser well-known Ajax frameworks or building some of the basic building blocks yourself in Javascript and DHTML. Not necessarily a bad thing but if you’re an enterprise architect you want some level of consistency and stability in your software and framework stacks. And if you need fairly broad browser compatibility on your web site then things are even trickier. So, so far, at work, I had limited my goals to client-side validation and some usability-oriented visual effects.Maybe this was due to my early work on DHTML and XmlHttpRequest back in the IE 4 days in ’97.

At home, though, I had started to play around with Ruby and Rails and discovered that two Javascript frameworks, Prototype and Script.aculo.us and been very tightly fused into a nice, consistent, and very powerful stacks. But until I started to create a gymnastics-focused web site, I had not experienced their full potential. There, I was able to effortlessly submit forms using Ajax, and add a color fade-in and out effect on the area updated as a result of the Ajax exchange. Adding custom behavior tied to events on a page was also fairly easy.
Separately from all this, thanks to the Ajaxian site, the Rails podcast, MSDN, and countless blogs, I had been tracking what other frameworks had to offer such as:

Recently I was getting ready to create my own in-depth comparison of Prototype, jQuery and MS Ajax when the bombshell announcement came from Microsoft about investing in jQuery. So suddenly for my work software stack the choice of jQuery became a de-facto choice. Since I have invested quite a bit in leveraging both jQuery and MS Ajax together.

So here is what I have come to realize in terms of features across Prototype, jQuery and MS Ajax:

  • There is a subset common to all three Javascript “musketeers”
    • Provide an abstract layer with cross-browser capabilities
    • Make access to the DOM much much easier
    • Facilitate the creation of event handlers
    • Provide extensibility for visual effects and visual controls/plug-ins
  • There are visual UI plug-ins extending the core frameworks to provide visual effects
  • All three however tackle a slightly different problem domain
    • Prototype aims at being a full “web-framework agnostic” stack, complemented by Script.aculo.us for visual effects
    • MS Ajax aims at being a full stack as well but specifically targetting ASP.NET (although it does not require ASP.NET)
    • Both Prototype and MS Ajax aim at extending Javascript with OO notions such as classes (and even interfaces in the case of MS Ajax)
    • jQuery primarily aims at making DOM integration extremely powerful and productive

So the net-net is that if you’re a .NET shop, MS Ajax and jQuery complement each other perfectly:

  • MS Ajax extends Javascript with namespaces, classes and interfaces and provide a strong OO platform
  • MS Ajax introduces the notion of component and client controls to allow the creation of sophisticated UI controls
  • MS Ajax has a very complete and robust support for Ajax calls including special integration with ASP.NET page methods (page-level JSON services)
  • jQuery makes it extremely easy to navigate the DOM tree using “queries” to select and act on groups of page elements
  • jQuery UI provides some powerful visual effects and controls (e.g. date picker, accordeon, …)
  • jQuery provides a simple yet powerful mechanism to create event handlers
  • So a developer can start on the simple side of the scale with a 80% jQuery + 20% MS Ajax mix then gradually swap the ratios while adding sophisticated features on the more complex side of the scale.

Outside the ASP.NET plaftorm, Prototype is very compelling for the following reason:

  • Prototype extends Javascript with classes, enumerations, collections like traditional OO languages
  • Prototype provides a powerful CSS-inspired query mechanism to access and navigate the DOM and manipulate elements
  • Prototype exposes a very rich API for Ajax communication (richer than MS Ajax and jQuery)
  • Script.aculo.us is the Prototype extension library providing a broad set of visual effects (richer than the base jQuery UI)

On the Ruby side, Rails is naturally integrated with Prototype, but it possible to either drop in jQuery or use the jRails plugin. Other Ruby frameworks like Merb are leveraging jQuery.

To conclude, inovation around Javascript is alive and growing. This gives us more possibilities when it comes to providing richer browser-based experience without having to turn to Silverlight (or Flash).

December 14th, 2008 Posted by | Ajax | no comments

No Comments

No comments yet.

Sorry, the comment form is closed at this time.