Quizlet users - this is a technical post about the wonders of mootools, a programming framework I used to build Quizlet. Feel free to move along.

Short story:

mootools

Mootools is awesome because:- Above all, it's intuitive. You can read mootools code and it makes perfect sense.

  • The code is compact. With every component of the code included, mootools 1.0 is just 35.2k (compressed). I would recommend downloading your file twice, one with compression and one without, so you can employ the compressed code on your site but reference the readable code when developing.
  • The code is modular. You can choose what parts of mootools you need, and which you don't. So if you don't need accordion functionality, your own download can be even smaller than 35.2k.
  • It does everything. Effects, Ajax, JSON, drag-n-drop, cookies, DOM manipulation, and more.
  • The code is beautiful. Beautiful code saves headaches. Beautiful code is easy to change.
  • It's Object Oriented. You never need to rewrite anything, just inherit code from parent classes!
  • It's superbly documented. The documentation includes full examples and details on every parameter of every function.
  • It has a support forum and an IRC channel (freenode: #mootools).

Long story

Back in October 2005, when I started Quizlet, there was really only one JavaScript framework in the mainstream: Script.aculo.us. So that's what I started with, and it worked alright. It let me do some neat effects, and I could figure out the code enough to use the basic features. But I never used it to it's full 150k potential - I used my own AJAX code and didn't take advantage of many of its features, probably because they weren't obvious enough.

Then, last summer, I met Valerio, the creator of Mootools. He gave me a demo of the mootools code, then in its early stages. It blew my mind. Walking out of the demo, I fantasized a page of random boxes flying around, changing color and fluctuating widths, in perfect symphonic beauty.

Let's have an example, shall we?

new fx.Styles('mydiv').custom({ 'top' : [10, 200], 'opacity' : [0, 1], 'color' : ['#133ea5', '#8b1616'] });

The above code will make the element with id="mydiv" move its top position from 10px to 200px, change its opacity from 0% to 100%, and transition its text color (with beautiful hue changing) from blue to red, all at the same time!. Tell me that doesn't astound you!

So I thought to myself, screw script.aculo.us! And I began transitioning all of my Quizlet code from script.aculo.us to mootools (it wasn't a fun task, but I'm glad I did). I actually still haven't finished, as the Learn and Combine pages on Quizlet still use script.aculo.us. They'll be transitioned soon, when I figure out new specs and functionality for those pages.

Mootools is perfect for web applications. It's small and easy to use, saving developers precious time. I feel clever when I'm using it, and it saves me tons of time. If you don't believe me, how about some real-world code examples?

  • Discuss.js - for Quizlet's live discussion box feature. This code incorporates all sorts of cool mootools functionality, including JSON, Ajax, DOM manipulation, the mind-blowing pass() function, and nice height effects.
  • Familiarize.js - for Quizlet's flash card feature. It's very simple functionality.

Note: my code isn't even half as beautiful as the mootools code. If you want to see these scripts in use, grab a free Quizlet account.

So that about sums it up. Mootools is all good.

Comments

  1. identical

    You're perfectly right ;-)

    mootools is great, and it's much lighter than script.aculo.us. :D

    I heard that jquery is also a powerful javascript framework, but haven't got time to give it a try.

  2. Neil Kelty

    Interesting post Andrew. You're doing to "cutting edge " stuff with some "ultra-cutting edge" software. Not getting paid for this post are ya? :) I kid. I kid.

  3. Modrzew

    Maybe jQuery don't have so many cute and useful things, but it's ultralight - just 19kb ;) And the chainability r0x ^^
    But, as I see, mootools is also interesting library... ;)

  4. MyWebbie

    I'll start switching over to Mootools one day soon... been using prototype.. =D

  5. gemma stewart

    My teacher has assigned work for me on qizlet. I can't get in. Each time I type in my logon and password it disappears when I try to get in. I also got a message saying something about the script running too slow.
    Please help.
    Gemma

  6. MavrickDesign.com

    MooTools is by far the most powerful and developer friendly code I have seen. Your post is spot on, it's great!

  7. Irish-Guy7

    I never really like studing untill my History teacher told me about this site. now I can't ever stop :)

  8. Ursino

    He is employed.

  9. RoseKnight

    MooTools is making a MOOOOOOOOOOve to the top of the best tools list! Ha ha, get it...moo...as in MooTools...heh...

Leave a comment

Login to leave a comment