Tag Archives: MooTools

Fastest JavaScript framework

Posted on by Simon

I had to implement what I call a “row selector” for a web application.

It looks something like this (try it out by clicking the checkboxes in the first column):

Now, the tricky part is that this should work for large documents, say 500 rows.

I have implemented this with jQuery, Prototype, MooTools and pure JavaScript, and these are the results I get when toggling all 500 rows in IE8 on a Windows box with 512MB RAM:

  • jQuery 1.6.1: 2000ms
  • Prototype 1.7.0: 2450ms
  • MooTools 1.3.2: 6300ms (first toggle) / 1100ms
  • JavaScript: 250ms

These are some numbers for Firefox 5, running on the same machine:

  • jQuery 1.6.1: 150ms
  • Prototype 1.7.0: 120ms
  • MooTools 1.3.2: 230ms
  • JavaScript: 100ms

We have to support IE, so choosing the pure JavaScript version was a no-brainer.

Here are the results for the jQuery version on an iMac with 2GB RAM:

  • Google Chrome 12: 380ms
  • Safari 5: 150ms
  • Firefox 5: 140ms

It looks like Chrome is falling behind…

Try it out for yourself: jQuery, Prototype, MooTools and JavaScript.

Event delegation with Prototype and MooTools

Posted on by Simon

With jQuery you’ll have event delegation out of the box, but if you are using Prototype or MooTools you are less fortunate – that’s until now!

I have implemented a generic event delegation JavaScript library. It works for change, submit, focus and blur events – along with all bubbling events.

I’m successfully using the library in a large Web Application with over 6,000 lines of JavaScript code (and 60,000 lines of Java code). Some screens are displaying huge amounts of data (over 20,000 INPUTs).

It’s used like this:

<html>
    <head>
        <title>Event Delegation with Prototype</title>
        <script type="text/javascript" src='prototype.js'></script>
        <script type="text/javascript" src='delegate-generic.js'></script>
        <script type="text/javascript" src='delegate-prototype.js'></script>
        <script type="text/javascript">
            document.observe('dom:loaded', function() {
                $('someDIV').delegate('submit', '.dont-submit', function(e) {
                    e.stop();
                    alert('The form was not submitted!');
                });
            });
        </script>
    </head>
    <body>
        <div id="someDIV">
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
        </div>
    </body>
</html>

Try it out!