Improving JavaScript Skills

Tuesday, November 3, 2009

A few people have asked me how to improve their  JavaScript ability. Not just learn about syntax and crazy stuff like closures, but how to apply the same design skills they have in their primary language(s) to the code they stuff into .js files.

I think the key is to submerse yourself in JavaScript for an extended period of time. So often in web development we context-switch into JavaScript mode to bang out a few client-side event handlers, then jump right back into the server code. I’m not suggesting you try to write all the JavaScript code for a web site all at once (that’s just silly), but you could try a code kata with JavaScript every now and then.

Uncle Bob has a nice bowling game Kata. It’s written in Java, however, you can play along with any other language, including JavaScript.

Here’s how to start (for ASP.NET developers):

1. In Visual Studio, select File –> New –> Web Site.

2. Delete the Default.aspx file.

3. Download jQuery and qUnit (both qUnit.js and qUnit.css). Add them all to the root of the site.

4. Add a new HTML page to the web site with the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="qunit.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="qunit.js" type="text/javascript"></script>

  <script>        
    
  </script>
  
</head>
<body>
  <h1 id="qunit-header">JavaScript Code Kata</h1>
 <h2 id="qunit-banner"></h2>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
</body>
</html>

5. Start practicing.

As an example, here is what you might have inside the script tags by slide 18 on Uncle Bob’s Bowling kata:

test("Test Gutter Game", function() {
   
    var game = new Game();
    
    for (var i = 0; i < 20; i++) {
        game.roll(0);
    }
    
    equals(0, game.score());
});

And by slide 19 you’ll make the above test pass. You might have the following code (inside the script tag, or you could put it in a separate .js file).

function Game() {

}

Game.prototype = {
    roll: function(pins) {

    },

    score: function() {
        return 0;
    }
};

Once you get to the end, try some other katas. Or, try the same kata with a different style (like avoid for loops, as an example). Everything gets easier with practice.

JavaScript submersion is fun (and makes you better too).


Comments
AspNetSpy Tuesday, November 3, 2009
This post has been spied by AspNetSpy.com
gravatar Victor Kornov Tuesday, November 3, 2009
With code catas you lern by your mistakes (i.e. there is no teacher other than yourself).

Another way is to get hold of some "application framework" for js like e.g. http://javascriptmvc.com/. It has an opinionated, "right" way of building js apps. Including unit, functional testing in browser and out of it, lots of low lever infrastructure code etc. Getting familiar with the framework allows you to learn by someones elses mistakes, which often embed years of experience.

Then you can move on to writing your own "lightweight frameworks", which include only what you really need and tailored to your particluar use case. You can start pushing yourself out of the comfort zone by trying different approaches or improving existing ones.
Nit picker Wednesday, November 11, 2009
"submerge", "practising"
gravatar ralf Tuesday, November 24, 2009
btw: you swapped the actual and expected params of the equals method.
It should be
equals( actual, expected, [message])
gravatar Scott Allen Tuesday, November 24, 2009
Argh! @ralf - thanks for catching that.
gravatar David Robbins Wednesday, November 25, 2009
Another great way to learn Javascript is throw away as many ASP.Net server side controls as possible and turn of view state. It is surprising how differently you will think about your solutions when you have to process more on the client. The experimentation and research that ensues will start the learning process.

Another hard-core approach is use an editor that does not have Intellisense for Javascript.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!