Category Archives: JQuery (JavaScript)

Prototype vs JQuery or Where did Prototype go?

First of all, no, Prototype isn’t completely gone, yet. I know I didn’t expect it either 😀

In general Prototype shouldn’t really be compared with JQuery, because JQuery is just an easy way to write JavaScript and  Prototype type is entirely different abstraction of the JavaScript language but for the sake of argument let’s say that they are comparable.

Several years ago Prototype was the popular framework for JavaScript and then JQuery appeared and Prototype was kinda forgotten.

Now popular applications that were using Prototype in the past are switching to JQuery.

And here comes my question: why? What happened with Prototype?

Well my theory is simple: Prototype is just too complex.

Prototype brings OOP into the JS world. The plain arrays, objects and primitive types that you previously had with Prototype are gathered into doing-stuff classes.

On theory, sure, it sounds cool – you have objects on the back-end you have objects on the JS front-end,  you can reuse functionality and structure logic and etc.

On practice though is more redundancy than good design concept (in my opinion), because you need to program (more or less) the same models twice.

If Prototype was more like ClojureScript and gave you possibility to transfer automatically the domain objects to JS front-end object I would actually understand the point of having Prototype but as it is right now in my opinion – having objects just to gather properties and functionality is not good enough reason to have them.

Btw  if you haven’t check out ClojureScript before please do, it is awesome (on a concept level at least :D)

JQuery Performance Tests – Bazaar

JQuery is currently the most popular JavaScript library on the world. Therefore apparently everybody seems to be an expert on it.

I just spend some time reading articles from ‘experts’ and what they advise you to do.

NB! All tests which follow are executed on the 3 browsers: Chrome 35, IE 11 and Firefox 30-32.

1. $(“#id”).find(“p”); JQuery performance is 2 times faster than $(“#id p”); .

After running tests on those 2 I can conclude only that he must be one passionate  IE user :)

For the 2 other browsers the process time for the both functions is nearly the same.

For those who want to try the test on their own: http://jsperf.com/jquery-performance-test-2

 

2. Learn the entire library.

The example that was given in this article to support this theory was the following.

You shouldn’t use that:

a.hasClass('b') ? a.removeClass('b') : a.addClass('b');

You should use that:

a.toggleClass('b');

I agree that the second one is obviously shorter but that is pretty much all advantages to it.

Let’s prove it though instead of leaving empty statements in the air.

I run the both pieces of code in 3 browsers and here is the results.

The JQuery performance for all browsers is better with the manual and add/remove of class functionality than the toggle one.

Here is the actual test so you can try it on your own: http://jsperf.com/jquery-toggle-class-test

3. $(“#id p”);  performs faster than $(“p”);

The only browser on which that is true is Chrome. And in IE actually $(“p”); performs much better.

Here is the test http://jsperf.com/jquery-single-vs-nested-description

4. Id vs Class selectors vs HTMLselectors

This one is really old advice from the time when JavaScript was still not popular and the experts on it weren’t that many.

Since JQuery is built on JavaScript we would only expect that the  JQuery performance for IDs should be also the fastest.

In this test we have clearly faster ID search for all the browsers.

On second place is the class selector and the last place remains for the HTML selectors.

JQuery Multiselect – Abbreviation List

Recently I had a struggle with jQuery Multiselect Widget.

As general it is really flexible and easy to use, but I was willing to have a list with abbreviation of all selected values (separate with commas)

More or less it should look like that at the end:

Continue reading JQuery Multiselect – Abbreviation List