Archive for January, 2009

Nice Framework Comparison (mostly on selector speed)

January 16th, 2009 by Aaron N.

Peter Velichkov has a nice post up comparing all the frameworks (MooTools, jQuery, Prototype, YUI and Dojo). It’s 1 part Slickspeed comparison and 1 part general round-up of links to and quotes from various articles that are comparing various frameworks and discussing their merits.

As my previous post comparing Dojo vs JQuery vs MooTools vs Prototype got quite popular and was included in the Wikipedia’s Comparison of JavaScript frameworks article I decided it is about time to update it with some fresh data and browsers.

For the performance part I used the same tool as before – Slickspeed. If you have forgotten, it tests the selectors which are essential part of any Javascript framework. Currently Slickspeed includes the following frameworks: MooTools 1.2, JQuery 1.2.6, Prototype 1.6.0.2, YUI 2.5.2 Selector beta and Dojo 1.1.1. Unfortunately some of those are not the latest versions but still are quite recent and I am sure the guys will update it soon. The good news is, as you can see from the list, now it includes YUI which is really strong competitor.

My MooTools Talk from the Ajax Experience (2008)

January 15th, 2009 by Aaron N.

Last fall I gave a talk about MooTools at the Ajax Experience in Boston. Adobe just put it online and I thought I’d share. This talk is first an overview of MooTools and what it has to offer and then delves a little bit into my pattern programming principles that I’ve been blogging about here lately.

I’ll point out that this was at 8am on the last day of the conference and it takes me a few minutes to really get going. If you’re already familiar with MooTools there’s nothing new here for you (probably). The whole thing is about an hour and twenty minutes long…

5 Advanced Techniques for MooTools Development

January 13th, 2009 by Aaron N.

The documentation for MooTools is robust and covers nearly everything in the library. There are a few items left out that are either not there on purpose (because they are not guaranteed to be supported in future releases) as well as several standard JavaScript techniques that can empower your development. Here are 5 things that you should know that aren’t obvious. Read the rest of this entry »

Comparing Prototype to jQuery

January 13th, 2009 by Aaron N.

David Nolen just posted this to the MooTools Google group:

Well thought out blog post about why Prototype is preferred over jQuery. Not a mindless flame war piece, but a reasoned argument. Interestingly enough, MooTools actually _combines_ what he likes about Prototype and jQuery into one package! In particular, MooTools has a uniform design throughout, inheritance, a great CSS selector engine, good functional aspects, supports function chaining, and of course provies a couple of things that Prototype doesn’t properly have (multiple inheritance via Implements). I pointed some of these things out in a comment.

Good recommended reading.

David

MooBugger – the MooTools JavaScript Console

January 13th, 2009 by Aaron N.

This is actually kind of old news, but it’s something that never really got released. Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).

It supports console.log statements in the various formats that Firebug supports (“console.log(‘foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.

To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).

You can see it in action on the test page.

Note: If you have Firebug installed and enabled, it doesn’t do anything.

@MooTools on Twitter

January 12th, 2009 by Aaron N.

As of today you can now follow @mootools on Twitter to catch news about MooTools. As of now only a few people are pushing content to it but you can send content for us to consider either by contacting me here on Clientcide or by sending an @reply to @mootools.

Additionally, in case you hadn’t noticed, you can follow Clientcide on twitter via @clientcide and you can follow me personally at @anutron. The former is just a feed of posts here on Clientcide (many of which will also show up on @mootools) and the latter is everything I personally post, which includes all my posts from Clientcide, posts from OSX Journal (my other blog) as well as personal observations and the like.

The Programmer’s Delimma: When and How to Refactor your Codebase

January 9th, 2009 by Aaron N.

I’m in the middle of a big overhaul of Iminta’s JavaScript. The site has mountains of JS and it’s a big effort. Today I got an email from someone who is struggling with their own refactor and they asked me for advice. Read the rest of this entry »

My Other Blog: OSX Journal

January 9th, 2009 by Aaron N.

This is off topic, but I thought I’d share with everyone that I have kicked off another blog: OSX Journal. The nutshell is that about a year ago I installed OSX on my PC and though it took some effort to get all my hardware working it’s by far the best operating system I’ve ever run (I’ve run: DOS, Win95, WinNT, XP, Vista, and Ubuntu), especially as a developer. Read the rest of this entry »

Extending Class Families

January 6th, 2009 by Aaron N.

A common convention in MooTools is to have numerous classes that break out functionality. This allows you to build upon the functionality of classes through extension and also keep your code base small when you don’t need everything and the kitchen sink. Consequently we get Fx, Fx.Css, Fx.Tween, Fx.Morph, etc.

What happens when you want to extend numerous classes with the same functionality? For instance, I have a popup manager called StickyWin. One of my scripts is called StickyWin.Ajax.js, which adds Ajax functionality to all the popup classes, creating *.Ajax classes (so, for instance, StickyWin.Fx is extended to StickyWin.Fx.Ajax).

Consider this code:

var Foo = new Class({
  apple: 'red'
});

var Bar = new Class({
  lemon: 'yellow'
});

//If we want to extend Foo with the exact same
//functionality and create Foo.Talker, then we must
//repeat ourselves:

Foo.Talker = new Class({
  Extends: Foo,
  speak: function(prop){
    alert(prop + 's are ' + this[prop]);
    //apples are red
  }
});

Bar.Talker = new Class({
  Extends: Bar,
  speak: function(prop){
    alert(prop + 's are ' + this[prop]);
    //lemons are yellow
  }
});

Whenever you are writing code if you find yourself repeating yourself there’s almost always a way to avoid it. The solution here is to create a method that extends classes for us with the new functionality.

(function(){ //put it in a closer so we don't pollute the global namespace

  var makeTalker = function(classToExtend){
    return new Class({
      Extends: classToExtend,
      speak: function(prop){
         alert(prop + 's are ' + this[prop]);
         //apples are red
      }
    });
  };

  Bar.Talker = makeTalker(Bar);
  Foo.Talker = makeTalker(Foo);
})();

Now we’ve created both sub-classes but only written our code in one place.

Not To Be Confused with Class.Implement

The above solution is useful for creating subclasses. This shouldn’t be confused with Implementing functionality into existing classes. In the above example, we created Foo.Talker and Bar.Talker, which do not change Bar or Foo at all.

We could, instead, just add our methods directly to those classes with Class.Implement. This works well when you want to overwrite existing methods or add new ones, but remember that Class.Implement doesn’t let you reference this.parent, so you can’t add functionality to existing methods, only overwrite them. More details on Implement vs Extend in the MooTorial.

Aptana Support for MooTools

January 5th, 2009 by Aaron N.

Over on the MooTools google group, Lori (who works for Aptana) posts:

Hi gang

Last week I finally added support for MooTools 1.2.1 to Aptana Studio — apologies for the delay. To get the updated plugin, do the following:

  1. First, if you do not have it already, get Aptana Studio (http://www.aptana.com/studio). It’s free.
  2. In Aptana Studio, open the Plugins Manager by choosing Window > Show View > Other… > Aptana Standard Views > Plugins Manager.
  3. In the Plugins Manager, select MooTools 1.2.1 and click the green + icon at the top right of the panel to install.
  4. In the Updates dialog box, expand the tree until you see the available “Aptana Support for MooTools” plugins. Select Aptana Support for MooTools 1.2.1.00001 and click Next.
  5. In the Install dialog box, accept the terms of the license agreement and then click Next.
  6. In the Verification dialog box, click Install.
  7. In the next Install dialog box, click Finish.
  8. Aptana Studio will begin downloading the MooTools 1.2.1 plugin.
  9. Click Yes when you’re prompted to restart.

I’ve tested plugin installation with Aptana Studio 1.2 and 1.2.1; let me know if you have any problems. If you’re using an earlier version of Studio, you may need to upgrade (again, it’s free!) in order to
install the MooTools 1.2.1 plugin.

If you need to post questions for her you should probably do so on the thread.