Archive

Posts Tagged ‘javascript’

jQuery vs DOM return false

March 22nd, 2011 2 comments

What does return false do inside a JavaScript event handler? What does it do in a jQuery event handler? Are they the same thing?

The short answer is “no”. return false in a native JavaScript event handler prevents the default behaviour of the event. It’s the equivalent of event.preventDefault(). This is the same for DOM level 0 event handlers like this:

element.onclick = function () { };

and DOM level 2 event handlers like this:

element.addEventListener('click', function () {});

return false in jQuery, on the other hand, will stop the default behaviour and stop the event propagating. This can be seen in the jQuery source:

if ( ret === false ) {
  event.preventDefault();
  event.stopPropagation();
}

If the return value of the handler is false, jQuery will call preventDefault and stopPropagation on the event object.

I’ve made a fiddle to demonstrate this behaviour, showing what return false does with DOM level 0 handlers and with jQuery handlers, and how to achieve the same in a DOM level 2 handler.

Categories: Programming Tags: ,

jQuery.tmpl() presentation

March 20th, 2011 No comments

Back in January I did a presentation at the Bristol Ruby User Group on jQuery.tmpl() – jQuery’s templating engine.

The presentation was filmed and is available on the BRUG website. The slides are also available.

I wrote the slideshow engine using jQuery.tmpl() – if you’re interested in viewing some real-world jQuery templating, have a look at the source on Github. I tried to use as many of the concepts introduced in the presentation as possible, so it’s a useful showcase of what can be achieved using jQuery templates.

Categories: Programming Tags: ,

Zen and the art of statefulness

February 12th, 2011 4 comments

The venerable master Qc Na was walking with his student, Anton. Hoping to prompt the master into a discussion, Anton said “Master, I have heard that objects are a very good thing – is this true?” Qc Na looked pityingly at his student and replied, “Foolish pupil – objects are merely a poor man’s closures.”

Chastised, Anton took his leave from his master and returned to his cell, intent on studying closures. He carefully read the entire “Lambda: The Ultimate…” series of papers and its cousins, and implemented a small Scheme interpreter with a closure-based object system. He learned much, and looked forward to informing his master of his progress.

On his next walk with Qc Na, Anton attempted to impress his master by saying “Master, I have diligently studied the matter, and now understand that objects are truly a poor man’s closures.” Qc Na responded by hitting Anton with his stick, saying “When will you learn? Closures are a poor man’s object.” At that moment, Anton became enlightened.

Anton van Straaten

When I first read the above koan some time ago, I didn’t really understand it. I had a very basic idea of closures, but at the time they were just a syntactic oddity to me – something you could do a few cool things with, but not particularly useful. Since then I’ve worked through quite a bit of Structure and Interpretation of Computer Programs and delved into functional programming in JavaScript, which has given me a much deeper understanding of closures. On the other side of the divide, I’ve been doing a lot of Ruby programming, which has helped me grok objects a lot better. I now feel like I can begin to comprehend what the quote was getting at.

My moment of enlightenment came today while reading Test-Driven JavaScript Development and looking at the code for a JavaScript strftime function (abbreviated here for brevity):

Date.prototype.strftime = (function () {
  function strftime(format) {
    var date = this;

    return (format + "").replace(/%([a-zA-Z])/g, function (m, f) {
      //format date based on Date.formats
    });
  }

  // Internal helper
  function zeroPad(num) {
    return (+num < 10 ? "0" : "") + num;
  }

  Date.formats = {
    // Formatting methods
    d: function (date) {
      return zeroPad(date.getDate());
    },
    //...
    //various other format methods
    //...

    // Format shorthands
    F: "%Y-%m-%d",
    D: "%m/%d/%y"
  };

  return strftime;
}());

The above code uses an IIFE (Immediately-invoked function expression) to produce a function with additional data (if Date.formats was instead declared as a local variable, this would be a better example). If it doesn’t make sense, I thoroughly recommend Ben Alman’s post on IFFEs for an overview of the technique. The code executes, and returns a function. The important thing is that one function is used to define another function and its context.

In Ruby, when you define a class, the class definition is executed as Ruby code, unlike in Java, for example, where a class definition is just a syntactic construct read at compile-time, but not executed in the way other Java code is. A Ruby class definition is read at run-time, and builds up a new class as it is interpreted.

In a lot of ways, Ruby class definitions and JavaScript function-defining functions are equivalent. I’ll give you a little example to illustrate:

zen.js

var Cat = function () {
  var age = 1;

  function catYears() {
    return age * 7;
  }

  function birthday() {
    age++;
  }

  return {
    catYears: catYears,
    birthday: birthday
  }
};

var powpow = Cat();
var shorty = Cat();

//yo shorty, it's your birthday:
shorty.birthday();

alert(powpow.catYears()); // => 7
alert(shorty.catYears()); // => 14

zen.rb

class Cat
  def initialize
    @age = 1
  end

  def cat_years
    @age * 7
  end

  def birthday
    @age += 1
  end
end

powpow = Cat.new
shorty = Cat.new

#yo shorty, it's your birthday:
shorty.birthday

puts powpow.cat_years # => 7
puts shorty.cat_years # => 14

Strictly speaking, in zen.js I’m returning an object, but the private data and methods of that object are saved in a closure. So, zen.js stores its state in a closure, while zen.rb stores its state in an object. Every time Cat() is called in zen.js, a new closure is created with a unique age. Every time Cat.new is called in zen.rb, a new object is created with a unique @age. (These two examples aren’t strictly equivalent – each cat in zen.js gets a new copy of the functions, whereas in zen.rb they share the same methods. It’s possible to make the JavaScript version function more like a Ruby class definition, but it takes a bit more code.)

Of course, there’s a lot you can do with JavaScript closures that you can’t do with Ruby objects. And there’s a lot you can do with Ruby objects that can’t be emulated using JavaScript closures. Any time you decide that one is better than the other, just imagine Qc Na hitting you with his stick.

Further reading

Ruby vs JavaScript: functions, Procs, blocks and lambdas

January 15th, 2011 3 comments

In my post Why JavaScript is AWESOME I compared Ruby to JavaScript like this:

A language like Ruby is a toolbox with some really neat little tools that do their job really nicely. JavaScript is a leather sheath with a really really sharp knife inside.

What I was partly getting at was how the two languages handle the passing around of code. Both have their own way of working with anonymous functions. They’ve taken very different approaches, so if you’re moving from one language to the other it can be confusing. I’d like to try to explain the differences. Let’s look at JavaScript first.

JavaScript functions

JavaScript has two ways of defining functions – function expressions (FE) and function declarations (FD). It can be a confusing distinction because they look the same. The difference is that a function declaration always has the word function as the first thing on the line.

//Function declaration:
function doSomething() {
    alert("Look ma, I did something!");
}

//Function expression:
var somethingElse = function () {
    alert("This is a different function");
};

The FE can optionally contain a name after the function keyword so it can call itself. I’m not going to go into depth on FD vs FE, but if you’re interested in learning more read Ben Alman’s piece on Immediately-Invoked Function Expressions, which has a good description and some useful links.

You can think of an FE as a function literal, just like {a: 'cat', b: 'dog'} is an object literal. So they don’t just have to be assigned to variables – they can be passed as function arguments, returned from functions, and stored in data structures (objects and arrays). In the end though, there’s only one function type – doSomething and somethingElse are the same type of object.

Ruby

Ruby is at the opposite end of the scale to JavaScript. Instead of having just the one function type, it has multiple types: blocks, Procs, and lambdas. (There are also methods and method objects but that’s a different story.)

Blocks

A block in Ruby is a chunk of code. It can take arguments via its funky pipe syntax, and its return value is whatever the last line evaluates to. Blocks aren’t first-class citizens in Ruby like functions are in JavaScript – they can only exist in one place – as the last argument to a method call. They’re very much a special syntactic construct baked right into the language. All methods can received blocks whether they include a parameter for one or not – it will be received anyway, and you can interact with it without it having a name. It can be called with the yield keyword, and you can check to see if a block was supplied with block_given?. Robert Sosinski gives a good example of using blocks from the point of view of the caller and that of the receiver in his post Understanding Ruby Blocks, Procs and Lambdas:

class Array
  def iterate!
    self.each_with_index do |n, i|
      self[i] = yield(n)
    end
  end
end

array = [1, 2, 3, 4]

array.iterate! do |n|
  n ** 2
end

Procs

If you need a block of code to act as a first-class citizen, you need to turn it into a Proc. That can be achieved with Proc.new. This takes a block and returns a Proc. Pretty cool eh? Procs are useful where you’d want to use a block but you’re not passing it as the last argument to a method. Rails provides a good example:

class Order < ActiveRecord::Base
  before_save :normalize_card_number,
    :if => Proc.new { |order| order.paid_with_card? }
end

The :if => syntax shows that we’re passing a hash to before_save. We can’t put a block as a hash value, so we need to make a Proc instead. Other callbacks can just take a raw block:

class User < ActiveRecord::Base
  validates_presence_of :login, :email

  before_create do 
    |user| user.name = user.login.capitalize if user.name.blank?
  end
end

For more discussion on Procs and blocks have a look at Eli Bendersky’s post: Understanding Ruby blocks, Procs and methods.

Lambdas

A lambda in Ruby is probably the closest thing to a function expression in JavaScript. A lambda is created similarly to Proc.new:

lambda { |x| x ** 3 }

Both lambda and Proc.new take a block and return an object. However, there are important differences in how they deal with their arguments and how they deal with return and break. To talk about that though I’ll need to go back to basics to discuss the reasons for using these self-contained chunks of code.

The reasons for using anonymous functions

There are a lot of good reasons to support anonymous functions in a programming language. In Ruby and JavaScript, the uses generally fall under two rough categories: iteration and deferred execution.

Iteration with anonymous functions

Iteration has a lot of uses – you can sort a collection, map one collection to another, reduce a collection down into a single value, etc. It basically comes down to going through a collection and doing something with each item, somehow. I’m going to show a very basic example of iteration – going through a list of numbers and printing each one.

In Ruby, there are two common ways to work through an array or other enumerable object, doing something to each item. The first is to use the for/in loop, which works like this:

arr = [1, 2, 3, 4]
for item in arr
  puts item
end

The second is to use the each iterator and a block:

arr = [1, 2, 3, 4]
arr.each do |item|
  puts item
end

Using iterators and blocks is much more common, so you’ll usually see it done like this.

JavaScript has a for/in loop as well, but it doesn’t really work very well on arrays. The standard way to iterate over an array is with the humble for loop:

var arr = [1, 2, 3, 4];
for (var i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

Many libraries offer support for something like Ruby’s each iterator – here is the jQuery version:

var arr = [1, 2, 3, 4];
$.each(arr, function(index, value) { 
    console.log(value); 
});

There’s an important difference here between the way Ruby and JavaScript handle the each iterator. Blocks in Ruby are specially designed for this kind of application. That means that they’ve been designed to work more like a looping language construct than an anonymous function. What does this mean practically? I’ll illustrate with an example:

arr = [1, 2, 3, 4]
for item in arr
  break if item > 2 #for non Rubyists, this is just like a compact if statement
  puts item
end

arr.each do |item|
  break if item > 2
  puts item
end

These two code snippets do the same thing – if item is greater than 2 iteration stops. On one level, this makes perfect sense – the each iterator takes a block of code, and if you want to stop iterating you break, as you would in any other language’s native foreach loop. On another level though, this doesn’t make any sense – break is used for loops, not anonymous functions. If you want to leave a function, you use return, not break.

Interestingly, if you use return inside a Ruby block, you don’t just return from the block, but the containing method. Here’s an example:

def find_first_positive_number(arr)
  arr.each do |x|
    if x >= 0
      return x
    end
  end
end

numbers = [-4, -2, 3, 7]
first = find_first_positive_number(numbers)

When arr.each gets to 3, find_first_positive_number will return 3. This demonstrates that in blocks in Ruby, the break and return keywords act as if the block was just a looping construct.

jQuery.each, on the other hand, is working with normal functions (there’s nothing else to work with in JavaScript). If you return inside the function passed to each, you’ll just return from that function, and each will move onto the next value. It’s therefore the equivalent of continue in a loop. To break out of the each entirely, you must return false.

So, in Ruby, break, continue and return work in the same way whether you’re using the for/in looping construct or using an iterator with a block. With a jQuery iterator, return is the equivalent of continue, return false is the equivalent of break, and there’s no equivalent of return without putting extra logic outside the loop. It’s easy to see why Ruby blocks were made to work this way.

Deferred execution

This is where a function is passed to another function for later use (this is often called a callback). For example, in jQuery.getJSON:

$.getJSON('ajax/test.json', function(data) {
    console.log(data);
});

The anonymous function isn’t executed until the JSON data comes back from the server. Similarly, with Rails:

class User < ActiveRecord::Base
  validates_presence_of :login, :email

  before_create do |user|
    user.name = user.login.capitalize
  end
end

The block won’t be executed immediately – it’ll be saved away, ready to be executed as soon as a new User is created. In this case, break no longer makes sense – there’s no loop to break out of. return generally also doesn’t make sense in this case, as it may try to return to a function that has already returned. For more details on this see my question on Stack Overflow. This is where lambdas come to the rescue. A lambda in Ruby works much more like a Ruby method or a JavaScript function: return just leaves the lambda; it doesn’t try to exit the containing method.

So why use a block as a callback? Probably the best reason is that Ruby makes blocks so easy, so it’s simpler just to pass a block to the before_create method than to create a lambda and pass that (the before_create internals will be simpler as well).

Pros and cons

As I said at the beginning, Ruby and JavaScript have taken two extremely different approaches to functions. There’s a whole different discussion about methods across the two languages as well (JavaScript uses the same function type for methods, whereas Ruby has yet another type) but I’m not going to go there. Ruby has something different for every situation, and each one is optimised for its primary use-case. This can lead to confusion but can also make code easier to read. On the other hand, in JavaScript, a function is a function is a function. Once you know how they work, it’s easy.

There’s no point arguing about which of these two approaches is better – there’s no answer to that. Some people will prefer one over the other, but I like them both. I love the way blocks in Ruby make certain kinds of functional-like programming just roll off the fingers, but I also love the way JavaScript doesn’t complicate things, and makes proper functional programming much more possible.

If you made it this far, good on ya. I didn’t mean to write such a mammoth post, but sometimes these things happen. Cheers!

Clearing up the confusion around JavaScript references

December 27th, 2010 6 comments

One question that seems to come up everywhere in discussions of JavaScript is:

Is JavaScript pass-by-reference or pass-by-value?

This is often asked by people who don’t really understand what pass-by-reference or pass-by-value really mean. One of the stock answers is:

Objects are passed by reference; primitives are passed by value.

I really don’t think this is the best way to describe the situation, so I’m going to try a new way.

What is a reference? (with cats)

I’m going to explain references with cats. Don’t worry, it’ll make purrfect sense.

Let’s say you have two cats, Bloopy and Floopy. Bloopy is a boy cat and Floopy is a girl cat. One day you announce to the world:

My favourite cat is Bloopy.

Let’s say you live your life as if you were inside a JavaScript interpreter. So you declare a new variable to hold your cat:

var fav_cat = Bloopy;

Imagine that this concept of “favourite” is like an invisible wire that links you to Bloopy. As long as Bloopy is your favourite cat you’ll be linked.

You can use this link to send messages to Bloopy. Say you bought Bloopy a new collar for Christmas. If you wanted him to wear it, you could say:

fav_cat.wear_collar();

You’re sending a message down your invisible wire telling Bloopy to wear his new collar. Because you’re living inside a JavaScript interpreter that works out fine.

One day, Bloopy makes a mess on your carpet. This upsets you, to the point that you decide that Floopy is now your favourite cat:

fav_cat = Floopy;

You’ve now re-assigned your favouritism. In terms of the invisible wire, you’ve detached it from Bloopy and attached it to Floopy. You can now ask Floopy to try on the new slippers you got her for her birthday:

fav_cat.wear_slippers();

One day, Floopy does something unmentionable. You now have no favourite cat:

fav_cat = null;

Mutability

So, what does that story tell us? Well, fav_cat is a JavaScript variable. At the beginning, it holds a reference to Bloopy. Later on, it holds a reference to Floopy. Don’t worry, nothing happened to Bloopy, but there wasn’t a reference to him stored in fav_cat any more. At two points in the story, we called methods on fav_cat. These methods mutated the underlying cat, in the first case to make it wear a collar, and in the second to make it wear slippers.

So, there’s two completely different things happening here; mutation and assignment. Mutation modifies the underlying object without affecting the link between the variable and the object, whereas assignment changes the link to a different object, but doesn’t modify any objects.

Immutability

Let’s continue the story. One day, you look up at the blue sky, and it inspires you to declare to the world that your favourite colour is blue:

var fav_col = "blue";

The next day you look at the grass, and declare that, in fact, this is the most beautiful colour:

fav_col = "green";

You can still think of this as there being an invisible wire between you and your favourite colour, but as colours (and JavaScript strings) are immutable, you can’t modify them using the wire – all you can do is re-assign your favourite colour to a new string.

So what does pass-by-reference mean?

In JavaScript, you never hold an object in a variable, you hold a reference to that object. It’s that invisible wire. You can send messages along the wire and you can tell the wire to attach to a different object, but that’s all. Let’s now look at passing a variable to a function:

function mutate(obj) {
    obj.name = 'Mutated';
}

var my_cat = { name: 'Floopy' };
mutate(my_cat);
alert(my_cat.name);

So, what’s happening here? When my_cat is passed into mutate, the parameter obj is given a reference to the same object that my_cat contains a reference to. So now my_cat and obj both have an invisible wire that links them to the object named ‘Floopy’. Inside the function, the name is changed to ‘Mutated’. The object that my_cat contained a reference to has been mutated by the function, so the last line will alert ‘Mutated’.

So, if that’s what happens with mutation, what happens with assignment? Here’s an example:

function reassign(obj) {
    obj = {};
}

var my_cat = { name: 'Floopy' };
reassign(my_cat);
alert(my_cat.name);

Ok, what’s going on here? When my_cat is passed into reassign, both obj and my_cat hold an invisible wire connecting them to the object named ‘Floopy’. Inside reassign, obj is reassigned to an empty object. So reassign has severed the invisible wire connecting obj to Floopy, and reattached the wire to a new, empty object. reassign doesn’t have any control over the link between my_cat and its object, so my_cat.name remains ‘Floopy’.

But what about pass-by-value?

Here’s what I say: forget what anyone ever told you about pass-by-value.

Another example:

function changeColour(col) {
    col = 'green';
}

var fav_col = 'blue';
changeColour(fav_col);
alert(fav_col);

I don’t think you’re going to be surprised that fav_col remains ‘blue’. That’s because chageColour reassigned – it didn’t mutate. And why is this called pass-by-value when the object example was called pass-by-reference? Because strings are immutable. You can’t mutate a string inside a function so there’s no way to change fav_col from inside changeColour.

And finally, the conclusion (with no cats)

The point is, it doesn’t matter whether the JavaScript interpreter holds a reference to the string ‘blue’, and passes a reference into changeColour or whether it passes the actual string into the function – either way the string can’t be mutated. The only way to change fav_col is to reassign fav_col.

There’s no point making a distinction between objects and primitive types when you’re passing into a function. The important distinction to make is between mutable and immutable types. A function can mutate a mutable object passed in (making changes to an object the caller passed in) but it can’t mutate an immutable object. A function can reassign a mutable or an immutable object, but the caller won’t see these changes, because all reassignment does is move the invisible wire attached to the parameter.

Further reading

Ecma-262-5 in detail: Name binding Dmitry Soshnikov talks about the same issues here but in a lot more detail. He uses the more strictly correct term “rebinding” where I have said reassignment, as the variable name is “bound” to an object. Definitely worth reading if you want a more in-depth discussion.

ECMA-262-3 in detail: Evaluation strategy A discussion of all the different types of evaluation strategy, including call by value, call by reference, and call by sharing. JavaScript is noted to be call by sharing, or “call by value where value is the reference copy”.

Call by sharing on Wikipedia Wikipedia notes that the Python community is the only one to have widespread use of this term, even though the same semantics are shared by Java, Ruby, Scheme, JavaScript etc.

Categories: Programming Tags: ,

JS1k: Making a very small game in JavaScript part 2 – optimisations

December 2nd, 2010 2 comments

This is part 2 of a series. See part 1 here.

Two types of optimisation

There are three types of optimisation when you’re trying to reduce the size of the code. The first two are “defactoring” techniques: they change the code but not the functionality. The third changes code and functionality.

1. Optimising for the compiler

One of the major optimisations the Closure compiler carries out is the renaming of identifiers. Closure will, wherever possible, rename your variables and functions with one letter names. This means you can keep using the nice long descriptive names and know that in the final file they won’t take up any more space than if you called everything x and y. So, how can you help with this?

One tiny optimisation I discovered was that I was using the literal 50 in a number of places. I defined a new variable fifty in the global scope and assigned it the value 50. Replacing all appearances of 50 with fifty increased the size of my un-minified code, but when minified, fifty became a single letter identifier and saved me a byte each time. Of course, there’s some extra code overhead to allow this, so there have to be enough occurrences for it to be worth it. Even a single byte’s worth it though.

I discovered I was using a.lineTo(x,y); a lot, where a is the canvas context. Closure can’t rename a.lineTo, so I needed to give it something it could rename:

function lineTo(x,y) {
  a.lineTo(x,y);
}

Again, there’s some overhead involved in setting this up, but with enough use of a.lineTo it’s well worth it.

I had to work round a bug with the compiler here. When it gets to the definition of lineTo it makes the assumption that inlining it will save space. So every occurrence of lineTo(x,y) in the code is replace by a.lineTo(x,y), and it removes the lineTo definition. To stop it doing this, I had to add the following line:

window['lineTo'] = lineTo;

This line forces the compiler to keep the lineTo definition, and when compiled produces window.x=x;. This is good and bad news – lineTo is now kept (in minified form) but there’s a useless line added. The way I got round that was to add a post-compilation step to my Makefile:

    sed -i 's/window\.[a-zA-Z]*=.;//g' kave-min.js

(Yes, I learned sed for this. That’s dedication.)

2. Optimising the code

Some code optimisations just make the code size smaller, full stop. One is true and false. In a lot of cases, 1 and 0 will do just fine, at a quarter of the size.

Code organisation matters too. You may be used to writing nice modular code with no global variables and loose coupling between each module. All those good intentions need to be completely suppressed. Make everything a global unless it absolutely has to be local. Everything should know about everything else. Couple wherever possible.

An example of coupling comes in the rendering stage of the game loop. The context fillstyle is set to white. After this, the snowball is rendered, followed by the snow. Then the fillstyle is set to blue, and the icicles and walls are rendered. The order of these rendering functions is tightly coupled in terms of order of execution. Trying to render the icicles before the snow would make the icicles white, unless we changed the fillstyle to blue then back to white for the snow.

3. Changing the behaviour

I said that the first two techniques “defactored” the code, leaving the behaviour unchanged. Sometimes the current behaviour is essentially complex, and needs to be simplified to reduce its code size. The simplest solution is to just leave out functionality, but sometimes that’s a compromise too far. Following are some less drastic options.

Here’s a really simple example. I picked a nice blue for the icicles with the following line:

a.fillStyle = "rgb(190,230,255)";

Unfortunately, the syntax for writing arbitrary rgb colours is relatively verbose. Much shorter are the colour names, like “yellow” or “blue”. “blue” was the wrong colour, but using Doug Crockford’s nice CSS colour chart I was able to find “lightblue”, which was pretty close to the original colour, but saved me 7 valuable bytes over “rgb(190,230,255)”.

The snow falls diagonally, but with a little bit of added randomness. I wanted it to follow a sinusoidal curve as it fell, but the additional code to enable this was too long, so I cut it. The snow’s not as natural as I’d like, but I had to compromise.

The collision detection algorithm’s pretty simple. I used the context.isPointInPath(x,y) method, passing the front middle point of the snowball. I could then call the detectCollision() function every time I drew a new path that I wanted to check (i.e. the walls and the icicles). It would be nice to check the top, front and bottom points of the snowball, but that would have been too much code.

Don’t try this at home

Coding is usually about weighing things up: readability/maintainability, execution speed, memory use, code size, etc. When you’re doing a JS1k submission, the only one of these that matters is code size (well, execution speed can matter as well, but only as a secondary concern). The important thing to remember though, is that this kind of optimisation is wrong, just plain wrong. It’s almost never a good idea to sacrifice maintainability for code size. If it were, we’d all be writing Perl. I’ll leave you with that thought.

Categories: Programming Tags: ,

JS1k: Making a very small game in JavaScript part 1 – tools

December 2nd, 2010 No comments

Well, that was fun. I’ve just submitted my JS1k Xmas edition demo. I only heard late on when the first JS1K happened, and I wasn’t up to coding anything decent at that stage anyway. So when I heard about this new one, I jumped on the task, working all weekend on it (except when I had to help move a piano). By the end of Sunday it was done, and I was mostly happy with it.

Before I started, I wanted to see if there were any good resources out there for this kind of thing, so I asked on Stack Overflow. I got a few good tips there, but the most useful one was probably:

You need to have the extreme small file size in mind when you write the code. So in part, you need to learn all the tricks yourself.

Show me the code!

Here’s the minified source of my submission. Trying to read minified JavaScript is a bit like reading assembly language when you’re used to C, or bytecode when you’re used to Java, so don’t try to understand it too much. Have a look at the un-minified code to see what it originally looked like.

It’s all up on github as well if you want to see the commit history.

Tools of the trade

I realised early on that I needed to have a quick way of minifying my code and checking its size. I started off playing with the Google Closure Compiler web interface but it was too slow to continually copy-paste my code in there. I downloaded it as a CLI app. Next off, I wrote this Makefile:

default:
    java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js kave.js --js_output_file kave-min.js
    stat -c%s kave-min.js

The first line uses Closure to compile with advanced optimisations, and the second outputs the size of the minified file. With this, all I had to do was type make to see what the minified filesize would be. Being able to do this after every tiny optimisation was extremely useful, as I could quickly experiment with new techniques and see if they were worthwhile.

Learning the tools

It’s important to understand what the compiler is actually doing, and what it’s able to do. Reading through the Advance Topics in the Closure docs was essential. Closure will do some pretty advanced optimisations, but it needs help. For example, it doesn’t touch strings (thankfully). That means if you refer to a method in one place as obj.meth and in another as obj['meth'], it can’t rename obj.meth.

Another big no-no is with, which is good, because it just confuses things anyway. Using with means Closure can’t distinguish between properties and local variables, so there are a lot of name shortenings it just can’t do.


In Part 2, I’ll look at some of the specific optimisations that I used.

Categories: Programming Tags: ,

A brief introduction to closures

November 22nd, 2010 10 comments

In this post, I’m going to attempt to explain what closures are and how to use them. Many modern (and some not-so-modern) programming languages contain support for closures, but for the purposes of this article I’m going to be using JavaScript. I’ve chosen JavaScript for a few reasons:

  • Ubiquity: If you have a web browser then you have a JavaScript interpreter
  • Simplicity: JavaScript is conceptually a fairly simple language (especially if you limit yourself to its Good Parts), compared to other dynamic scripting languages such as Python and Ruby
  • Familiarity: If you’ve used any of the C family of languages (e.g. C++, Java or C#) then JavaScript will look fairly familiar.

There may be some differences between languages with the mechanics, but deep down, closures are the same across all languages which allow them, so if you can understand the concept in JavaScript, you’ll understand it in any capable language.

Functional programming

Before I can get onto closures, I need to give a very brief introduction to functional programming.

Functional programming is all about functions (I doubt that comes as much of a surprise). In a language that surports functional programming, functions are generally first-class objects. That means they can be assigned to variables, stored in data structures, passed into functions and returned from functions.

In JavaScript, it’s important to distinguish between referencing a function and calling a function. To reference a function, just use the function name. To call a function, append parentheses (with optional arguments). Here’s an example:

function f() {
    alert('f called!');
}

f(); // calls f
var x = f; // f is a reference to the function, and now x is too
x(); // calls f (or x - they're the same thing)

It’s also possible to create anonymous functions in JavaScript (aka lambdas). If you want to create an anonymous function, leave out the name:

function () {
    alert('I have no name');
}

Another name for an anonymous function is a function literal. If you imagine it like a string literal you’ll see it’s an expression just like any other literal, and so it can be assigned to a variable:

var str = "string"; //string literal
var arr = [1, 2, 3]; //array literal
var obj = { 'JS': 1,
            'is': 2,
            'awesome': 3 }; //object literal
var f = function () {
    alert("I've been assigned to f");
}; //function literal

Note that there is very little difference between assigning an anonymous function to a variable called f and defining a function called f – the end result of both is a function that can be referred to by the name f, and can be called with f().

Another capability of functional languages is the ability to nest functions. It’s perfectly valid in JavaScript to define one function within another. Here’s another example:

function outer() {
    function inner() {
        alert('In ur function');
    }
    inner(); // we can call inner here as it is defined in outer's scope
}
inner(); // Error - but not here - inner is not defined in this scope

It’s this ability, coupled with the first-class nature of functions, that enables closures.

A real-life closure

A closure is a function with access to variables in its containing scope (the function “closes over” the variables). The thing that can be tricky to wrap your head round is that the inner function still has access to the outer function’s variables after the outer function has returned. Here’s an example:

function outer() {
    var counter = 0;
    function inner() {
        alert(counter);
        counter++;
    }
    return inner;
}

var x = outer(); // As we're calling outer here, x is a reference to inner 
x(); // alerts 0
x(); // alerts 1
x(); // alerts 2

In this code, outer is called once, and returns inner. x is a reference to inner. Because inner is a closure, it has access to outer‘s local variable, counter. Even though outer has returned, inner still has access to outer‘s variables. Be careful though – if outer were called again, we’d get a new version of inner. To continue the previous example:

var y = outer(); // Call outer again
y(); // alerts 0 - this is a different closure to the previous one.

The closure has access to any arguments in the containing scope as well:

function outer(x) {
    function inner() {
        alert(x);
    }
    return inner;
}

var func = outer(5);
func(); //alerts 5 - inner has access to the argument

A more advanced example

You should now know enough about the basics of closures to understand a more complex example. Here’s a way to give a JavaScript object private variables:

function CatMaker(name) {
    var age = 10;

    //construct an object on the fly with three methods.
    //All methods have access to age, but age cannot be
    //directly accessed outside of this function.
    return { 
        "sayHello": function () { //first method
            alert("Miaow");
        },
        "getAge": function (inCatYears) { //second method
            if (inCatYears) {
                return age * 7;
            }
            else {
                return age;
            }
        },
        "makeOlder": function () { //third method
            age++;
        }
    };
}

var mycat = CatMaker('Snuffles');
mycat.getAge(true); //returns 70
mycat.makeOlder();
mycat.getAge(true); //returns 77

The ONLY way to make changes to the private variable age is through the method makeOlder. All the methods share the same age variable, because they were all made in the same call of CatMaker. If we called CatMaker again to produce a new cat, it would have its own age variable.

The infamous lambda-in-a-loop problem

Consider the following example:

function attachListeners() {
    for (var i = 0; i < 10; i++) {
        $('#id-' + i).click(function () {
            alert("I am element number " + i);
        });
    }
}

It’s using jQuery. To understand this example you’ll need to know a tiny amount of how jQuery works. jQuery creates a global function called jQuery, aliased to $. The jQuery function takes (among other things) a CSS selector. It returns a jQuery object representing the HTML elements matching that selector. A click handler can be added by calling .click() on the returned object. .click() takes a function to be executed when the matched elements are clicked on. $('#myid').click(function () { alert('hello'); }); will show an alert when the HTML element with an id of ‘myid’ is clicked on.

The example selects 10 elements on the page, with the ids id-0, id-2 up to id-9. Each time round the loop, a new click handler is created. When you click on these elements, an alert box comes up. Some would think that each click handler has its own version of i but you know better. All the click handlers share the same i. Because of the way the for loop works, this value is one past the end of the loop, i.e. 10. So each element proudly announces that it is element number 10, which is clearly incorrect.

The problem here is that although a new closure is being produced each time round the loop, each closure shares the same environment, so i in each closure is the same i as in all the others.

Take a look at a working demonstration of the above code using jsFiddle. Have a play with it so you can get a feel for what’s going on.

The only way around this is to use another function:

function addOneListener(i) { //Each time i is bound to a different value
    $('#id-' + i).click(function () {
        alert("I am element number " + i);
    });
}

function addEventListeners() {
    for (var i = 0; i < 10; i++) {
        addOneListener(i); 
    }
}

Here’s the above as a fiddle. emehrkay in the comments has an alternative implementation of the above using raw DOM methods – it’s often useful to see different ways of achieving the same thing.

The key to understanding the new example is that every time addOneListener is called, a new closure is produced, and each of these closures has a different i. When you start using closures in JavaScript, this will bite you eventually, so beware. It’s such a common issue that bobince of HTML-parsing regex fame put it at number three in his list of common questions on Stack Overflow:

At number three it’s a new entry for “Why is my (Python, JavaScript, …) function getting the same value of the variable every time around the loop?”, by Clint Forloop and the Closures

JavaScript and jQuery for programmers

October 1st, 2010 3 comments

I’ve been thinking a bit about JavaScript and jQuery. To some, jQuery is the spawn of the devil – to others it’s the greatest thing since sliced bread, and possibly better. A lot of JavaScript developers hold a lot of hostility towards jQuery, which I don’t fully understand.

The other issue is whether to learn jQuery without learning JavaScript first. Received wisdom is that this is a Bad Thing® – you should learn the basics before you come to rely too much on a framework.

In the interests of avoiding religion, I’m going to suggest a middle way. I think it’s possible to learn JavaScript through jQuery. And I mean properly know JavaScript – understand what it’s doing – not just learn the syntax for an event handler.

In these posts I want to teach JavaScript through jQuery idioms. By that, I mean I’m going to show some common jQuery idioms and explain what they mean in JavaScript. Teaching JavaScript is going to be the primary purpose – learning jQuery will come for free on top. I’ll be assuming some prior programming experience (that’s why I wrote “for programmers” in the title). The main reason for that is because I really can’t be bothered to explain assignment.

jQuery sucks ass man

Some will say that jQuery hides too much of what JavaScript does, and you should learn the JavaScript way before the jQuery way. I partially agree with that, but I think it’s important to remember one thing: JavaScript is not the DOM. For those that only read code:

JavaScript != DOM;

JavaScript is a programming language. The DOM is the API for interacting with web pages. JavaScript interacts with the DOM API. Unfortunately, the DOM is really messy. It’s also not the same on all browsers, which means any code for interacting with the DOM will be littered with if and else statements.

JavaScript, on the other hand, is a beautiful programming language. It doesn’t deserve to be dirtied with all that DOM crap. I don’t think there’s much point in learning how to use the DOM directly, as it’s a messy, incomplete, inconsistent interface. It brings nothing but pain, and the more people I can save from ever having to deal with it, the better.

A brief (and partially fabricated) history of JavaScript

Old Skool JavaScript

Back in the day, selecting HTML objects with JavaScript wasn’t necessary. If you wanted a link to open a popup when you clicked on it, you’d just add it in in the HTML:

<a href="#" onclick="popup()">Annoy me!</a>

Here’s a real life example.

Nu Skool JavaScript

One day, a Real Programmer came into the world of web developers. And he spake thus:

Thou shalt not allow the mixing of content and behaviour. Thou shalt write semantic HTML. Above all, thou shalt avoid code duplication, lest a plague of locusts be cast upon your land!

The web developers were given two years to adopt web standards. And adopt them they did. By the end of those two years, there was a new world-wide web.

To avoid duplication and the mixing of content and behaviour, the inline JavaScript in HTML had to go. But selecting DOM elements was tricky – nobody likes to type getElementById more than twice a day, but some developers were writing it ten or twenty times before lunch! Something had to give.

Out of the shadows came a man by the name of Resig. This Resig man saw getElementById and saw that it was bad. He saw CSS selectors and was impressed by their succinct clarity. And he said:

Every .man, .woman and :nth-child should be able to select their elements with CSS selectors!

and jQuery was born.

Back to the truth, back to reality

Back to the here and now yeah. Yeah, anyway. The point I was trying to get at was that JavaScript is a language, the DOM is a badly designed API, and jQuery is a wrapper around that API. That’s all. It’s not a replacement for JavaScript. Personally, I think it complements JavaScript really nicely most of the time. So if you’re going to learn JavaScript, and you’re going to want to interact with web pages, you might as well learn jQuery at the same time.

Why jQuery? Why not another library?

Yes, I knew you’d ask that. Well, here’s my rationale. jQuery won. That’s it. jQuery has a huge community, with a lot of experts. More and more are moving to jQuery every day. Even in Rails, where for ages Prototype was bundled by default, there’s been a huge push towards using jQuery. I’m not saying it’s the best. But it’s got the best support. And it’s probably going to be the most developed for the foreseeable future.

Lesson plan

I’m going to assume that you’ve got this far, seeing as you’re reading this. Hopefully that means that you’re at least vaguely interested in learning JavaScript through jQuery. Below is a list of likely topics I’ll end up talking about. I reserve the right to edit this list, reorder it, remove items and generally monkey about with it.

  • Part 1: Anonymous functions
  • Part 2: Object literals
  • Part 3: Evented programming model
  • Part 4: Closures

Why JavaScript is AWESOME

September 3rd, 2010 20 comments

JavaScript is an awesome language. Now, a few years ago, you’d be marked out as a weirdo for saying something like that. I think there’d probably be some kind of witch-burning ceremony or something, because JavaScript was this stupid language which had stupid syntax and stupid scope and was used to do stupid things by stupid people and just led to awful spaghetti code and killed kittens.

These days people are more understanding, and more and more are coming out of the JavaScript closet. It’s starting to become cool. And I don’t mean cool as in “look at this cool bouncing text” (only works in Internet Explorer 4+ and Netscape 3+); I mean cool as in “hey, check out that cool guy over there writing JavaScript, look how cool he is!”. These days John Resig is a ninja and Douglas Crockford is Chuck Norris.

Douglas Crockford with guns

If Crockford builds JSON without quotes around the labels, it's still valid JSON. - TheReincarnator

Seriously though, what’s so great about JavaScript?

Functions or lambdas

A rose by any other name would smell as sweet, and JavaScript’s functions are sweet like chocolate. I tried to explain to a friend recently just what was so great about JavaScript. What I decided was that it was the functions. JavaScript’s functions can act like lambdas, functions and methods. They can be used to create modules, namespaces, classes and objects. A language like Ruby is a toolbox with some really neat little tools that do their job really nicely. JavaScript is a leather sheath with a really really sharp knife inside. That knife can cut anything, and with it you can do anything. You can kill a bear. You can catch fish. You can whittle a piece of wood into a pony. It’s even a toothpick.

So what makes JavaScript functions so great? It’s two things I think: first-class citizenship and closures.

Functions as first-class citizens

Functions are people too you know? Well, no they’re not actually, but they are objects. They can be passed around like any other object. They can be assigned to variables, passed as arguments, and even returned. And because you can write function literals in JavaScript, you can return a function without even naming it:

function outer() {
    return function () {
        alert("I'm in ur function, accessin' ur local variablez");
    };
}

This kind of thing is really powerful. I’m not going to try to give any clever examples because it’s the kind of thing you only truly get once you’ve done it yourself and suddenly the whole universe opens up in your mind.

Closures

A closure is a funny thing to get your head around. If you’re used to a static language, then it just won’t make sense. Really it’s another one of those things that you have to do until you transcend, but I’m going to have a go explaining it.

Closures are intimately related to first-class functions. One of the things you can do with a function in JavaScript is define it within another function. You can nest functions as deep as you like. Here’s an example of a nested function:

function outer() {
    var name = 'Bob';
    function inner() {
        alert(name);
    }
    inner();
}

So, in this example, when outer is called, it defines name and inner as a local variable and function, respectively (i.e. they are not visible outside of outer). Then inner is called, which alerts name (‘Bob’). That’s not very exciting though – all it shows is that a function can access variables defined in an enclosing scope. But look what happens here:

function outer() {
    var name = 'Dave';
    function inner() {
        alert(name);
    }
    return inner;
}
var something = outer();
something();

Now outer is called, and it defines name and inner like in the previous example. This time, however, inner is returned (alternatively, I could’ve just returned it as a function literal like earlier). When outer is called, its return value is assigned to something. something is now the same function as inner. But what happens when we call something? outer has returned, so when something tries to access it it’ll probably segfault or something. Well, no, it won’t. That’s where the magic happens. When inner was returned, it somehow magically “closed over” its containing scope, essentially keeping it all available even after outer returned. You can do this with arguments as well:

function outer(arg) {
    return function () {
        alert(arg);
    }
}
outer(5)();

This time the returned function has access to the argument of the outer function. That last crazy line there with all the parentheses isn’t Lisp, it’s JavaScript, believe it or not (Lisp parentheses are nested, in case you ever need to tell the difference). outer is getting called with an argument of 5, and then the return value of that call is called itself.

These two things, first-class functions and closures, are what make JavaScript functions so powerful and flexible. Again, this power needs to be felt to be believed, and the only way to feel it is to write it.

Douglas Crockford

Another thing that’s great about JavaScript is Douglas Crockford. He not only wrote the best book on JavaScript – he’s also given the best talks on the language.

Dynamic typing

I’m a big fan of dynamic typing. It adds so much flexibility, agility and speed to programming. It also makes programming much more fun. I’ve written a few posts on the subject so no need to go into more detail here.

Conceptual purity

If I went back ten years and told anyone (myself included) that one of the great things about JavaScript was its conceptual purity, I’d be laughed out of my time machine. But it’s true, there’s something really pure about the language. What can be achieved with such simple language constructs is amazing. There are just objects and arrays (and arrays are just specialised objects). There are literals for objects and arrays. There are functions, and loops. And that’s pretty much it. No classes, no modules, no iterators, no generators, no templates or generics, no macros. None of these things because they just aren’t necessary when functions are allowed to be free as nature intended. You’d think that it would feel limiting not having these features, but it’s actually liberating. It feels clean, and pure. But powerful. Like a polar bear.

Why JavaScript isn’t awesome

There are a few small things that I don’t like about JavaScript (and are generally considered a Bad ThingTM).

Implied globals

If you don’t declare a variable as local with var, you’re making it global. I don’t need to go into why global variables are a bad thing, because everyone else has.

Semicolon insertion

There was a programme on TV once and they showed all these x-rays with weird things in like toy cars and bottles and stuff, and … oh yeah, semicolon insertion. That’s where the JavaScript interpreter makes it easier for non-programmers to write JavaScript that works and makes it harder for programmers to write JavaScript that’s correct. Silly. Here’s what happens:

return {
    javascript : "fantastic"
}; //This will return an object with a single property

//the interpreter sees this as an empty return statement so inserts a semicolon:
return //this line is interpreted as "return;" - with a semicolon
{
    javascript : "fantastic"
}; //this is just an empty block now.

But I love it really

It’s easy to mitigate those two things with decent coding practices. Basically, always use var, always use semicolons where necessary, and always put the opening brace at the end of the previous line, not at the beginning of the next. Finally, put anything you write through JSLint. It’s like a compiler, without the necessity.

Further reading

JavaScript: The Good Parts: This is Douglas Crockford’s book on JavaScript, and it’s brilliant. It’s only 176 pages, but manages to pack a lot into those pages. By the end you’ll know how to write a recursive descent parser for parsing JSON in JavaScript (some really beautiful code).

Move over Java, I have fallen in love with JavaScript: Miško Hevery usually writes great things about testing – here he talks about JavaScript, from the perspective of a Java programmer.

Best resources to learn JavaScript: This is a useful list of resources for learning JavaScript (as suggested by its title).

Structure and Interpretation of Computer Programs: If you still don’t understand what all the fuss is with functional programming, read this book. I’m only half-way through, but it’s already taught me more about programming than any other book. It’s also probably the reason I love JavaScript so much, because deep down, JavaScript is just Scheme in C’s clothing.

Categories: Programming Tags: ,