I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
JQuery is currently extremely popular, so you're probably going to have the most luck finding recent tutorials/plugins/etc for it, as opposed to one of the other frameworks. That's probably a fairly good selling-point from the perspective of someone new to this.
ReplyDeleteMicrosoft apparently blessed JQuery, so for now that's your best bet.
ReplyDeleteJquery is probably the best of the lot, it actually lets you "do more, write less"
ReplyDeleteOne more for Jquery..Awesome plugins!!
ReplyDeleteI'm currently writing a paper on JavaScript frameworks. After all the research I've done so far, I can tell you this...
ReplyDeleteSeriously, nobody can tell you which framework is best for you. There's only one way to find out: try playing around with all the different libraries you're considering. It's a matter of personal preference.
See this excellent JavaScript Library Overview, a presentation by John Resig (who happens to be the lead developer of jQuery). It contains small code samples for all the listed frameworks. After viewing those, you'll probably know which framework to choose, depending on which coding style you prefer.
Also, this SO topic might be of interest.
I use JQuery now because it is easy and has lots of features. Before I was using prototype and scriptaculous.
ReplyDeleteBuilt in intellisense for jQuery in VS2008 (sp1 I think?) was one consideration for us, but essentially we've played with mootools, prototype, scriptaculous and jquery, and have found jquery to be the easiest for us all to understand/support.
ReplyDeleteWe have a mixed team here, and even our business logic guys can pickup the logic/approach in jquery.
We also use telerik controls, and they've now announced more support for jquery - it certainly seems its star is in the ascension.
Try all of them, but if you're from a .net background, I think it's the logical choice at the moment.
I noticed Dojo wasn't included on your list. It's a framework that's geared to heavy-weight AJAXified pages.
ReplyDeletehttp://dojotoolkit.org/
That said, JQuery appears to have the most momentum at the moment, and other frameworks (like Dojo) are working on putting more JQuery-like functionality into their product, so I would recommend learning that.
Im having a really good time with jQuery myself. Thers lots of good documentation and tutorials for it, which is excellent if your new to Javascript.
ReplyDeleteIf its only the ajax features your after I recommend checking out http://docs.jquery.com/Ajax . Also the tutorials at Themeforest is really brilliant. For example the jquery tutorial for absolute beginners day 10 is showing you the basics of jQuery + Ajax.
The best thing to consider is what you want the framework for. jQuery was designed to make manipulating the DOM easier. So if that is the main focus of what you want to be doing, then great. It is a super rad framework and it is really is amazingly natural and easy to pick up.
ReplyDeleteThat having been said, it is worth considering what the others have to offer. Other frameworks like prototype and mootools are most interested in turning javascript into a more powerful programming language with richer object oriented programming capabilities and functionality for arrays, strings and numbers. I don't know enough to be able to compare/contrast prototype and mootools, but maybe someone else could fill in on that.
This is a great article that explains the difference between mootools and jquery - jqueryvsmootools.com/
The good news is that you don't necessarily have to decide. Although you might occasionally come up with bugs, you should be able to use jQuery with either mootools or prototype (see here). Basically just call jQuery.noConflict(); before any script on which you want to use jQuery and everything should work just fine. This allows you to use jQuery for all of it's slick DOM manipulation and rad UI library while also giving access to a more powerful framework when that is what you need.
Please let me know if I've missed anything here and I hope this helps.
FORK Ajax. It does the job well, and it's very small (5KB minified) and simple.
ReplyDeleteI'll plug Mootools. Of course the reason anyone prefers any of these over another is "I started using XYZ first."
ReplyDeletejQuery is my go-to framework of choice, but you really have to look at each ones' strengths and see how they align with your project
ReplyDeleteThe important thing is, use a framework -- really any framework. The benefits of using a framework, no matter which one, are so enormous. The best ones get rid of all or most of the cross-browser headaches you are bound to experience.
When I was new to JavaScript, after a week I found out that life is much easier with a framework. Anyway, I did not even knew, what exactly they are for; I've got some glue about $() that it's a smart replacement for window.getElementById(), and I assumed that there are some other comfortable methods for other purposes, like AJAX request.
ReplyDeleteI did not wanted to spend lot of time on learning a framework, so I was decided that I will choose that which I fall in love first sight. Then I was spending about a whole month with googling. I have not missed any of the "big names", but I dropped them soon. The main reason of the dissatisfaction was their site, the documentation: after reading a whole page of text, I was yet as dumb as before. What is it for? What they do? What is the input, what is the aim, what is the output?
Then, I found DOMAssistant. It's small, perfect, and well-documented. Just take a look on the first paragraph of the opening page, it's a totally clear definition of the JS framework:
What is DOMAssistant?
The idea of DOMAssistant is to provide
a simpler and more consistent way to
script against the Document Object
Model (DOM) in web browsers. The idea
is that everything starts with the
element(s) in question, selected
through id or CSS selectors, and then
perform various methods on it, such as
adding or removing classes, events
etc.
So, I say, if you finally choose another, more fashionable framework, DOMAssistant is a must-to-see. And if you have no need for animated flying windows, it's also a good choice.