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('<span>This paragraph has just been updated!</span>')
.filter('p:hidden').show()
.appendTo('div#hidden-paragraphs');
--------------------------------------------------------------------------------
This little snippet will do the following things:
* Fill the 'bucket' with all <p> elements in the document
* Add the class 'updated' to them
* Append a <span> stating this at the end of the paragraphs
* Filter the bucket for <p> elements that used to be hidden and show
them
* Move these previously hidden <p> 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 <http://jquery.com/docs/Base/Expression/>
* CSS selectors <http://jquery.com/docs/Base/Expression/CSS/>
* XPath <http://jquery.com/docs/Base/Expression/XPath/>
* Custom selectors <http://jquery.com/docs/Base/Expression/Custom/>
* Screen cast by John Resig
<http://getjquery.org/2006/12/jquery_demo_expandable_sidebar_menu>
(the creator of jQuery) showing some of it's DOM traversing strength.
Also check out this Zebra Table Showdown
<http://jquery.com/blog/2006/10/18/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
<http://jquery.com/discuss/> which has more messages
<http://www.nabble.com/JQuery-f15494.html> then CakePHP's). Prototype
definitely lacks that. This community has also produced a great amount
of useful plugins <http://jquery.com/docs/Plugins/>, some of the best are:
* The Interface library <http://interface.eyecon.ro/>. It's kind of
scriptacoulus for jQuery and has lot's of goodies.
* Thickbox <http://jquery.com/demo/thickbox/> is jQuery's answer to
Lightbox.
* The history plugin
<http://www.mikage.to/jquery/jquery_history.html> makes it very
easy to make the back button work with AJAX
* An excellent corner plugin
<http://methvin.com/jquery/jq-corner-demo.html> 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
<http://www.sergiopereira.com/articles/prototype.js.html>, jQuery has
excellent documentation:
* Official Documentation (wiki) <http://jquery.com/docs/>
* jQuery API <http://jquery.com/api/>
* Visual jQuery <http://visualjquery.com/index.xml> an interactive
and grouped version of the API.
So if all of this has not convinced you yet, simply go over to
jQuery.com <http://www.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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---
