15.02.2010

FizzBuzz: A JavaScript Code Kata, TDD Style (Video)

A code kata is a short programming task. Its purpose is to let you practice tools and technique. You pick a relatively small problem and practice it repeatedly. Since the task is small, you free yourself to focus on technique and speed, tools and workflows, as opposed to active problem solving.

I was inspired by the “katacasts” of Uncle Bob as well as my friend Johannes, and decided to do one of my own. I chose a very simple task for this clip: the FizzBuzz interview question.

Print digits from 0 to 100. For every digit which divides with three, print “fizz” instead. For digits dividing with five, print “buzz”. For digits which divide with both, print “fizzbuzz”.

My solution, as shown in the video below, was meant to accomplish two things:

Demonstrate simple TDD workflow in JavaScript. Many software developers tend to treat JavaScript as the redheaded stepchild of programming languages. We unit test our “real” code (Java, C#, Ruby, whatever), but for some reason, that tends to go out the window when we switch to JavaScript. This is a shame; automated regression testing becomes extremely useful once your JavaScript code grows into hundreds or thousands LOC.

Improve my technique and speed in my editor of choice - TextMate. I’m trying to use the mouse as little as possible, can you tell? I still consider myself fairly slow in TextMate, but I improved while practicing for this screencast.

Note: I generate a tiny development environment in the beginning of the clip. This setup is something I’ve put together for a JavaScript course I’m holding internally at my workplace. The environment is meant to get you started quickly with good practices and useful tools (like YUI Test, jsLint, jQuery). I’ll probably turn it into a tiny open source project once it’s somewhat more stable. Feel free to tweet me if you want a look at it.

The clip was shot using SnapzProX on OS X 10.6.2. I edited the clip with Final Cut Express. No changes were made to the kata footage itself - I only added music and intro/outro screens.


PreviousNext