Friday, October 26th, 2007
Category: JavaScript, jQuery
, Library
, Prototype
The presentation looks into the utility functions, selectors, DOM manipulation, DOM walking, events, Ajax transport, and browser detection.
Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...
IE 8 Crashing Problem
Hello Everyone,
Here\'s the situation:
two iSeries boxes - Dev and Prod both V5R4M0
We\'re using AJAX to dynamically load content using a tabbed...
JQuery Function Not Defined?
[div]Hi there,[/div]
[div][/div]
[div]I\'m trying to set a php session variable from a radio button. The idea is that a jquery function is called...
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
There really isn’t that much between them, unless you’re after a specific piece of functionality which has been provided via a community produced plug-in for one or the other. I’m a prototype user myself, but I would prefer consistently selecting by CSS selector rather than by ID, or having to use a different utility function for CSS selection.
I’m a Prototype user as well, but I like the ID selection… CSS selection is rather slow if you have more then a couple of items to select, so I most often end up doing $(‘parent’).getElementsBySelector(‘.something’) to narrow down the search any way.
As far as jQuery vs Prototype, it all comes down to syntax. Prototype uses names such as onComplete and onSuccess for callbacks… names that mesh better with the onClick and onMouseover events exposed to javascript. Plus, syntax like $.ajax() rather then new Ajax.Request() might be shorter, but it just plain looks weird to me.
I don’t know about jQuery (I don’t actively use it) but in Prototype:
Slide 13: [el1, el2].each(fn(el, i)) will pass the index as the second parameter.
Slide 16: Element.hasClassName for class matching.
So wich one do you recommend ?
In almost every example, the jQuery code was more concise than the Prototype code. That just goes to show how well thought out the jQuery API is.
In jQuery it’s the same in terms of speed:
$(‘#parent .something’)
$(‘#parent’).find(‘.something’)
If you’re using the 1995ish event binding via element.onclick = function() {} then maybe it’s true. ;) However, when you use modern solution basing on element.addEventListener(type, listener, useCapture) then you write:
element.addEventListener(‘click’, callback(), false)
As you can see, no “on”. OnClick & OnMouseOver remember 4.0 wars, leave them.
Interesting explanation (“weirdâ€). However, this is the result of differences in both frameworks. jQuery registers all “global†functions under $() (which can be used as selector engine, DOM creation utility or “jQueryfying†anything) aka jQuery(). Prototypes chooses to create rock-solid class-like constructs Ajax, Element, Event…
In jQuery you can pass index the same way:
$(elements).each(function(i) {if (window.console) console.log(i)
})
Um on slide #9 it could be written
$$(‘#final-speech div.final-dialogue’).hide();
which is almost identical to jQuery
Yeah, i got that from the slide. I was just pointing out that the index is also available in Prototype.js.
Also, slide #12, Prototype will also have a dom content loaded event in 1.6:
document.observe(“contentloaded”, function() { … })
JQuery is to concise. There is in JQuery a real a lack of syntax friendliness. IMHO, Prototype wins
Nobody wins.
jQuery attracts with its elegant, short and consistent style, but goes just a little way too much, imho. The concise way of doing things is its curse and blessing at the same time (some get scared, while others get ecstatic feelings)
Very helpful. One slight change: Slide 12 says that Prototype uses
Event.observe(window,’load’,function{});
but Prototype 1.6 uses
document.observe(‘contentloaded’, function {});
some of those examples are not the best (at least for prototype). instead of
$$(‘dialog’).each(Element.show)
you can do
$$(‘dialog’).invoke(‘show’);
@Marc – thanks, I’ve updated the slides and will be uploading shortly.
@Aaron – I couldn’t get that syntax to work at all – it said .hide wasn’t a function:
$$(‘final-speech div.final-dialog’).hide()
Isn’t it because the $$ method returns an array, and the hide method is on the Element object? Happy to be correct on this!
I ran my tests on the URL below (which is pulling in Prototype 1.6)
http://tinyurl.com/2b3pp7
Regarding this not working in Prototype:
$$(’final-speech div.final-dialog’).hide()
Because $$ returns an array of elements, you need to use the invoke() method to execute a method on each item.
Like this:
$$(‘final-speech div.final-dialog’).invoke(‘hide’);
@Scott – yep that definitely works. I’ve updated the slides, but somehow slideshare.net has nuked the physically location of the slides (those externally linking to the slides, as Ajaxian is doing works fine) – and also somehow missed the updated to slide 9 – which included using ‘invoke’.
Out of the two, the best choice is…
Mootools.
> which are probably the two closest to each other
Because they are both Javascript libraries with a $ function? One has an OOP approach the other one builds all around a super-magic $/jQuery function. Every better JS framework out there has DOM methods, CSS Selectors and Ajax transports. So a better comparison would show and compare them all.
@Remy: Thanks for the overview.
I use Prototype as well, as it fits well with Ruby on Rails. It also has a good pdf reference. But I am interested in jQuery, just ordered the Learning jQuery book last night. One thing is that jQuery seems to be a smaller package for end-users to download, esp. if you need some features of Script.aculo.us. Could be important for things like iPhone development.
I think this is a case of “Agreeing to Disagree” between developers. I much prefer jQuery, and find Prototype’s way of doing things long-winded and confusing. I also prefer it’s smaller file size and plugin architecture. But I’m sure prototype users (or users of any other library) will disagree.
@Tane: The problem with jQuery is that it does not have build-in support for classes and inheritance. Prototype, Ext, Dojo (and other libs) support classes and inheritance. This is the major difference between Prototype and jQuery.
IMO the fact that jQuery is concise is a good thing. Your end-users don’t care how easy of a time you had in developing your app: they just want to use it without downloading half a meg of script. Broadband doesn’t excuse you from writing tight code.
Forgive my ignorance if I’m way off base here – I have yet to write significantly large scripts with either of these libraries, e.g. 20K compressed to 16K gzipped to 4K. However, I’m always interested in comparisons since there are so many libraries to choose from and I’ll be soon be settling on one for a while (nothing more annoying to me right now then statements like – ‘mootools wins’ with no reasoning). So, this talk of the smaller size related to concise syntax and the end user’s download time has me wondering… Once scripts are compressed and gzipped – is it still a significant difference warranting choice of one over the other in this case? Many other factors seem related to personal developer style but this one is important. If the end user experience is actually impacted by one library over the other that’s a deal maker.
@Nathan Youngman: http://static.popcap.com/iphone/ The .js is packed with MooTools and their propietary code, so I can’t estimate what they used. You have an idea, however, of an iphone app.
@Eric: I think size is always a concern. Most important is speed, however, which no one seems to compare. Recently there’s been the SlickSpeed (http://mootools.net/slickspeed/) but there’s no definitive benchmark for all frameworks yet.
Many Thx Olmo! Now, clearly you have a bias but your argument still seems strong. Once again I’ve come across data that supporting MooTools as comparable, at least, to JQuery and Prototype yet getting MUCH less attention. JQuery posts here at Ajaxian – 42, Prototype – 160, MooTools – 5.
Was MooTools late on the scene? Was Prototype first on the scene? Are some just better at networking/promoting and/or having more of the right contacts?
Prototype vs jQuery, is not interesting
script.aculo.us vs jQueryUI…. ah… jQueryUI better catch up!!!
There is only one feature of Prototype keeping me using it, that is Ajax.Responders, otherwise I’d have switched to MooTools which is superior to jQuery and Prototype in every other way. I find this obsession with conciseness to be exaggerated, who cares if jQuery is sometimes 10 characters shorter than equivalent Prototype code? Much of Prototype code is more readable in my opinion, but then Prototype also has some very inconsistent code because the developers are often pioneers and change their mind about things later.. That’s why I like MooTools, it’s API is like Prototype’s but more consistent and the code is MUCH smaller.. Prototype also has lots of features that are “cool”, but so rarely used that they are just a complete waste.
I work for a web shop where we used to use Prototype and Scriptaculous for a while. Then we decided to look around. We found Dojo to be crazy, and jQuery to be amazing. Now I need only write about half as much JavaScript as I used to – jQuery is just so fast to develop with. IMO, I see a lot of people judge jQuery too early without really getting to know it.
You’re right henry. Interface isn’t any more the official interface of jQuery but it is jQueryUI (ui.jquery.com) which is totally awesome.
JQuery and prototype are both good but it is really more pleasant to write jQuery code.
Thanks for the comparison… it would be nice to see more variations between other libraries, makes porting and generally picking up the syntax of new libraries that much easier…
On a note of “Prototype vs jQuery”… from my perspective both are excellent libraries… as are MooTools, Ext, etc… and there is WAY WAY too much touting of one library over another… they each have their uses and with file sizes in the low kilobytes, who really cares which is smaller, simpler, etc… its all about what can be done… or more importantly what can be skipped when developing…
Personally right now my leaning is on EXT with YUI for application development and jQuery for website development… I choose jQuery for one simple reason… the selector-based structure is very very easy for a designer who gets CSS but not JS to tweak without messing something up… while this can be done with other languages including Prototype… the “one method fits all” approach of jQuery makes me more comfortable with handing it off to someone less capable of reading and understanding the code…
Hello,
Speaking Spanish,
and I commented that I prefer Jquery
Greetings
Just use Ext and put prototype or jquery underneath it
I believe the order of apperance (public release) was: Prototype, Scriptaculous, Moo.fx, jQuery, MooTools, and so on… Perhaps YUI before jQuery, but I’m not familiar.
I’m not sure how to explain the discrepancy, but MooTools doesn’t focus on advertising. We tend to focus on our code. Today might seem like an advertisement, but I was honestly just providing an opinion ;). Coincidently MooTools has worked on SlickSpeed. If anything YSlow is rather nice benchmark, but I haven’t spent a lot of time understanding what it does.
I’ve been working on “translation”, “localization”, “data grids”, “file dialogs”, and so on and so forth. I ended up with my own JavaScript library and I was unhappy with having to do it all by myself. That’s why I tried Prototype 1.6 beta about two months ago, and that’s why I tried it again this past week, but now it feels good to use it because I didn’t have to do anything special for adopting its new Class system for one thing. To top it all, I liked the appearance of it which was close to my home made system in the “mixins”. :-)
Prototype is a miracle as far as I am concerned. I like that it has its focus on basic JavaScript support, allowing third parties to build on top of it all the animations, UIs, etc, that they want. While Prototype can be a pain in the way it integrates with JavaScript, it might be worth it in the end. Also Prototype is one of the more solid alternatives to libraries like Ext, GWT, YUI, Dojo… Which can be much more painful to work with and “download”. :-)
Lest assured that I think jQuery has an upper hand in being easy to sell and use, which means it could well take over the leader position. Where I think jQuery fails is in appealing to the types of developers who use libraries like Ext, GWT, YUI, Dojo… Which includes me. :-)
Also, it’s my understanding that Prototype works like a solid base on which to build other libraries like Dojo, jQuery, Ext… So not all is decided yet. While the newer libraries have pushed the envelop many times and became even better than Prototype in some regards, remember the turtle’s story. :-)
Actually, the latest prototype 1.6 uses
document.observe(’dom:loaded’, function {});
instead of
document.observe(’contentloaded’, function {});
And slide 17: Prototype 1.5* already supports Element.observe
@Karl M
Go back leeching on articles that are actually about Mootools.
@Cal Jacobson
The user wouldn’t care either way, if webmasters would learn to gzip their content. It is my opinion as a developer however, that self explanatory code is much better than concise code with many comments.
@Colin
Once again, this is not an article about Mootools. It doesn’t even mention Mootools. But at least you were nice enough to provide constructive criticism. That being said, I personally use about 90% of the features prototypejs offers, so I wouldn’t call them useless. If you don’t, either use a smaller library, or just pick the components you want (prototype is split into many js files in svn) and use only those.
@Olmo Maldonado
Seriously, if you don’t focus on advertising, how do you explain people like Karl M? Every post on this site that mentions a js library other than Mootools always gets a couple of retards like him that always mention Mootools out of the blue. Even on entirely unrelated topics.
@/dev/urandom
http://mootools.net/developers — my point is self explanatory
If you have to pick winners Prototype will come out as the winner syntax wise, while jQuery will come out as getting the job done with less code.
But the reasons to use jQuery because of that are getting smaller. Using jQuery because of chaining is not a valid point anymore now that Prototype (1.6) does the same thing. Those experienced with the frameworks can write most examples in these slides even smaller. Getting both frameworks down the the same amount of code.
In the end you will want better syntax.
In the end it’s a question of scripting style. The user experience usually is the same, so every developer should use the library of his/her choice – prototype and jQuery are the best in the moment.
I like the cleaner syntax of prototype, which correlates in a better way to native JavaScript syntax. If you have learnt JS from the basics you prefer prototype because function/method names say what they do. Example:
click( ) Returns: jQuery
Triggers the click event of each matched element.
click( fn ) Returns: jQuery
Binds a function to the click event of each matched element.
The first one triggers a click, the second one adds a listener. Same names – quick but not clean.
@Andreas: Actually, I believe click( fn ) has been deprecated in favor of bind(‘click’, fn ).
Sounds like a lot of developers here don’t have to worry about handing off their js. Either they can take the time to train or they are self-appointed “supermen.” I don’t have that luxury. The more concise the framework, the more consistent its implementations. JQuery’s terseness may be inelegant to some developers, but its a common point that frees up the exchange of JS responsibility.
If I wanted to become a “Superman,” I would probably go proof of concept with any given framework, then rip the guts out of that framework until it is job-specific, obfuscate, and then put my email address in the comments and wait for that sweet, consultation dolla!
I’ve done a lot with jQuery recently, and really like the compactness of it. However, I’ve really come to dislike the way most jQuery methods stack off a new object (for the sole purpose of supporting .end() in massively chained jQuery operations). I also really like the implicit iteration, as a jQuery object is always a set, rather than a single element. (I like it better than the .invoke() syntax.) OTOH, jQuery is basically just a DOM manipulator. I’m really coming to appreciate the way Prototype extends the core JavaScript language, and that’s starting to tip the scales back to Prototype for me.
Am running a collaborative comparison of the various javascript libraries and frameworks. http://mytechrantings.blogspot.com/2007/11/comparing-prototypescriptaculous-dojo.html
please submit your valuable opinions :D
The thing I like about jquery is that looks as though it’s designed to work with the DOM. Javascript (and therefore Prototype) looks as though it was designed to look like Java (…because it was). However, when it comes to manipulating the DOM, who wants to write Java unless they have to?
Jquery’s use of CSS3 selectors (designed for the DOM) makes it all so much simpler!
down/up in prototype is not the same as children/parent in jquery. down() traverses down the entire DOM starting from the current node searching for the selector you give it, where as children only looks through the children of the current node.
I’m a PHP programmer in China.
I dont know JQuery at all,but I use PROTOTYPE and I feel very well.
my php experience is more than 4 years,
but I’m very confusing about the JS in early time,
untill I’ve met PROTOTYPE,i learn JS thery and AJAX,rapidly.
And I must say I’ve made a huge progress.
now I can write any perfect programe,either server side ,or client side effects.
I support prototype because I can only use it,I’m not CSS and FLASH player,I’m a pure PHP player,I use KOMODO IDE,I never mind the code’s length cause’ I can use the KOMODO tools/snippet.
PROTOTYPE真棒，我喜欢它。我ä¸ç¾¡æ…•JQueryï¼Œå› ä¸ºæˆ‘ä¸ä¼šç”¨ï¼Œä¹Ÿæ²¡æœ‰æƒ³ç ”究它的æ„愿。(prototype is better for me cause I cant use jquery and I have no idea to learn JQuery)
And now I learn from the script.aculo.us , a EBOOK(PDF) help me.
It’s amazing the library wars. Prototype was my first library. I loved it, then I learned jQuery. I’d consider myself an expert in both, having developed extensive projects with each language. I just finished porting a web app at work from Prototype to jQuery because I vastly prefer it.
Chaining is a big source of contention, some developers hate it, others love it. i think it is useful in many circumstances but can be taken overboard. The implied iteration in jQuery is just awesome, and the consistency of not passing in a parameter to a function to invoke it and passing one in to set it makes guessing when you don’t remember something easy.
The .click, .hover, .toggle shortcuts for the bind events rock. The automatic unbinding of events that both libraries do to prevent memory leaks in ie is very cool. Even so, I had memory leaks from .bind() in Prototype that switching over to jQuery fixed.
JQuery makes better use of ‘this’ references:
$.each(array, function() {
alert(this);
});
instead of
array.each(function(a) {
alert(a);
});
I hate that prototype extends the DOM. It provides a lot of nifty functions for arrays and strings, but those should be encapsulated in a single object instead of extending the DOM. Imagine a Java library changing the way arrays work in Java. That’s crazy talk.
In my experience, jQuery requires about 30% less code to do the same thing as the equivalent code in prototype.
I’ve also played a little bit with mootools. They approach javascript a bit differently then jQuery or Prototype but they don’t do as many things as these two do. I don’t really see a point to that library, I think that people who learned with mootools or developed for it have developed an attachment to it and it really does handle 90% of the things you need so there is no compelling reason to change from mootools if that is what you know. But if you don’t know any right now, I’d say learn jQuery.
So for me the difference between the two is with jQuery, you are writing jQuery code. With Prototype you are writing enhanced JavaScript.
jQuery is very good at manipulating and finding stuff in the DOM. But if you need to write a framework or any logic, jQuery isn’t very useful. It has a few methods for manipulating arrays, but they don’t allow you to specify the context so they aren’t always useful.
Prototype includes a lot of enhancements to JavaScript that make writing a framework, or logic, easier. Methods added to the Function object and the Enumerable class, which is used in a lot of places in Prototype, provide very advanced mechanisms for working with groups of objects. It’s DOM manipulation functions are useful, but it’s plugin ecosystem isn’t as rich as jQuerys.
Thank you very much for difference comments . I have also like JQuery.It is easy to coding.
I’m using Prototype firstly.Then change to JQuery and finally I’m using Mootool. All of them are good. http://quickmessageapp.com used one of them.
Good blog. My major concern is browser compatibility. I don’t know if anything works flawlessly across all browsers to let me know when focus leaves an input text field (this includes all the different ways that focus can leave the field…). Let me know your experience on this one specifically. I’d be satisfied with a simple solution for IE6, IE7, IE8, and Firefox.
I had a website utilizing the lightbox that utilize the ajax framework of ptototype but when I tried to load the jquery libraray the design was destroyed.
I made a choice: “Use different designs for different technologies”.
I will not leave prototype but I will not ignore jquery! They are two superpowers in the war of browsers. I wish they will merge as one! Eitherside you go you have a gulf fixed that you can not cross over safely!
I wish and hope that there is a way to bridge this technologies together and I desire for the making of another one that will establish the end of prototype and jquery unless they be reconciled!
Oliver Bob Lagumen