« Return to Thread: Share with CakePHP´s community

Re: JQuery and Prototype [was Re: Share with CakePHP´s community]

by Felix Geisendörfer-2 :: Rate this Message:

Some parts of this message have been removed. Learn more about Nabble's security policy.

Hey John,

here it comes, the ultimate why jQuery beats prototype post:

Maybe that's just lines. The main thing I don't like about JQuery is  
ThatMany.linesOfCode(endup).lookingLikeA(TrainWreck);

Ok here is the deal. jQuery is like a big bucket that captures DOM elements (and objects in some cases). You fill this bucket by providing a selector for elements to match. This can be done using CSS selectors, XPath and some custom expressions (more below). After that you start to manipulate the bucket. This means adding classes and setting attributes, but also appending and removing nodes as well as filtering things out of the bucket or adding new items to it. Each of this operations returns it's results in form of a new bucket that can be further manipulated. Let me show you a little example:

-------------------------------------------------------------------------------- $('p').addClass('updated') .append('This paragraph has just been updated!') .filter('p:hidden').show() .appendTo('div#hidden-paragraphs'); -------------------------------------------------------------------------------- This little snippet will do the following things:

Fill the 'bucket' with all elements in the document
Add the class 'updated' to them
Append a stating this at the end of the paragraphs
Filter the bucket for elements that used to be hidden and show them
Move these previously hidden elements in the DOM and append them to a div called 'hidden-paragraphs'.

Now please feel free to come up with a prototype example for this, but to me the train wreck style is the heart of jQuery. It is very simple to understand and allows you to to very advanced things with very little code. I first was a little hesitant about using it, but now I truly love it!
Superior Design & Philosophy

jQuery's philosophy is all about typing less, doing more and keeping things intuitive. Prototype fails at that. The best example showing how jQuery's pragmatic approaches beat Prototype is updating an element via AHAH (ajax):

Prototype:
------------------------------------------------------------------------------------------------------- var myAjax = new Ajax.Updater('elmentId', url, {method: 'get', parameters: params, onSuccess: myCallback}); -------------------------------------------------------------------------------------------------------
jQuery:
------------------------------------------------------------------------------------------------------- $('#elementId').load(url,params, myCallback)-------------------------------------------------------------------------------------------------------

Now and this is only updating 1 element. Updating several elements with jQuery is just as easy:

jQuery:
------------------------------------------------------------------------------------------------------- $('ul li.update-me').load(url,params, myCallback)-------------------------------------------------------------------------------------------------------

This will update all <li> elements that have the class 'update-me' within a <ul> element with the data recieved from 'url'. In Prototype you would need to do a loop and create several instances of the Ajax.Updater to do this.

Intuitive element selection

Prototype does best when working with elements you know the id of. jQuery however leverages the full power of CSS, XPath and custom selectors to make DOM traversing the easiest thing in the world. You don't believe me? Check out the following resources:

General Element selection
CSS selectors
XPath
Custom selectors
Screen cast by John Resig (the creator of jQuery) showing some of it's DOM traversing strength.

Also check out this Zebra Table Showdown where almost all big JS libraries are compared on the task of highlighting every second row in a table. Here is the jQuery vs. Prototype example:

Prototype
------------------------------------------------------------------------------------------------------- $A(document.getElementsByTagName("table")).each(function(table){

  $A(table.getElementsByTagName("tr")).each(function(row,i){
    if ( i % 2 == 1 )
      Element.addClassName( row, "odd" );
  });
});
-------------------------------------------------------------------------------------------------------

jQuery------------------------------------------------------------------------------------------------------- $("tr:nth-child(odd)").addClass("odd");-------------------------------------------------------------------------------------------------------

jQuery has a build-in plugin system

jQuery has some neat conventions used by other developers to create plugins for it. It's not like a framework, but it certainly had an educational effect on the Users of jQuery and I really like it:

http://jquery.com/docs/Plugins/Authoring/

Prototype has no standard like this and therefor different widgets take very different approaches which makes it less convenient to implement them.

jQuery has a great community and a lot of good plugins

jQuery has a very active community (especially the mailing list which has more messages then CakePHP's). Prototype definitely lacks that. This community has also produced a great amount of useful plugins, some of the best are:

The Interface library. It's kind of scriptacoulus for jQuery and has lot's of goodies.
Thickbox is jQuery's answer to Lightbox.
The history plugin makes it very easy to make the back button work with AJAX
An excellent corner plugin that let's you create existing boundaries for your content

jQuery has awesome documentation

Unlike prototype where the best information seems to be the reference, jQuery has excellent documentation:

Official Documentation (wiki)
jQuery API
Visual jQuery an interactive and grouped version of the API.

So if all of this has not convinced you yet, simply go over to jQuery.com, download the code and do a little test ride. It's free but I'm almost certain it will convince you to buy into the jQuery philosophy ; ).

Let me know what you think John ; ).

-- Felix Geisendörfer aka the_undefined

--------------------------
http://www.thinkingphp.org
http://www.fg-webdesign.de

John David Anderson (_psychic_) wrote:

On Dec 11, 2006, at 2:45 PM, Felix Geisendörfer wrote:

Hi Langdon,

JQuery looks good (powerful).  I have not come across it before,  
so am
on the learning curve.  Do you use it instead of Scriptaculous and
Prototype?

Oh definitely! I've not touched Prototype/Scriptaculous since  
somebody mentioned jQuery to me. There is nothing wrong with them,  
and both of those libraries have brought a lot of good things to  
the universe, but jQuery is a couple steps above on the  
evolutionary ladder of JS code.


How so? I've heard good news about jQuery, but why do people like it  
better (besides footprint)?

My own experience was that when I first converted one of my  
projects from prototype to jQuery, I instantly cut my current JS  
code in half. This was before I really knew most of what jQuery  
could do. Now the JS code of this project is probably 1/4th or  
1/5th of it's original size.


Maybe that's just lines. The main thing I don't like about JQuery is  
ThatMany.linesOfCode(endup).lookingLikeA(TrainWreck);

Or to express it with the a quote from a recent discussion on the  
jQuery mailing list:
Dave Methvin wrote:

"You start with 10 lines of jQuery that would have been 20 lines of
tedious DOM Javascript. By the time you are done it's down to

two or

three lines and it couldn't get any shorter unless it read your

mind."


I that's partly due to the train-wrecked-ness of the library.  
Prototype isn't overly verbose - most calls to that (or  
scriptaculous) are one liners in my experience. Sure there's times  
when you want to chain things or queue events...

Well, there's that, and Prototype usage isn't much like vanilla DOM  
scripting.

Using jQuery has had a hugely positive effect on my JS coding. But  
more then that, it actually changed my attitude towards the  
language itself. Before jQuery I thought Javascript was doomed to  
produce ugly spaghetti code, and even the cool ajax stuff wouldn't  
change that. Well now I actually really started to like the  
language and have learned a lot more about it and it's been great fun.


Examples? I'm interested in learning more.

-- John

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Cake PHP" group.
To post to this group, send email to cake-php@...
To unsubscribe from this group, send email to cake-php-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---

« Return to Thread: Share with CakePHP´s community