Aberdeen Pavilion

The Aberdeen Pavilion at mid-day, Landsdowne Park, Ottawa.




© 2011 Darren DeRidder.

jQuery, Data-link, Knockout.JS and Microsoft

In may 2010 Microsoft contributed the template and datalink plugins to jQuery. The announcement was made on Scott Guthrie's blog:

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

On October 4 Scott G, Boris Moore and John Resig all announced these as official jQuery plugins.

http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.htmlhttp://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx

One of the comments in Scott's post suggested that his team should be working with Steve Sanderson as well.  Sanderson is the guy behind the Knockout.js templating and data-binding library.

http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx#7624049

In November 2011 Steve Sanderson announced he was joining Microsoft's ASP .NET team in the Web Platform and Tools (WPT) Developer Division. http://blog.stevensanderson.com/2010/11/

From this, and taken together with their recent Windows 8 preview, it appears that Microsoft has an interest in promoting advance templating and data-binding for application development on the web stack of Javascript / HTML / CSS, and may put their weight behind Knockout.JS in spite of the "official" status of the jQuery Templates and Data-Link plugins.

There is significant overlap between these libraries. In fact, Knockout.JS works closely with the jQuery Template plugin. However, it provides features that are missing from the jQuery data-link plugin and seems more well-suited to the new features of HTML5.  It looks like Knockout.JS used together with jQuery Templates could become a leading contender in client side templating, with jQuery and Microsoft's support.

There are many others that also look promising, including AngularJS, BackboneJS, and some that are still in development such as batman.js from Shopify.  It will be interesting to see how these shake out over the next year or so.

Marina at Dusk

Sunset over the Nepean Sailing Club, Lac Duschenes, Ottawa

© 2011 Darren De Ridder

Selenium IDE Sideflow Update 1

Once again, for your development pleasure, ladies and gentlemen, the famous Sideflow plugin for Selenium IDE!  Goto and while loops performed in Selenium, before your very eyes.

Some people were having a bit of trouble getting started, so I've updated the demo test for Sideflow (Selenium IDE flow control extension) to use the latest Selenese commands.

What's changed: no more direct access to 'storedVars'.  No more 'getEval'... uses 'runScript' instead.  Need to do some weird casting to perform counter increments.

The github repo is over here.  Everybody git on board the github train!

PS. You can find the original post here.

Spinnaker Set

We pulled off a perfect spinnaker set with a crew of first-time sailors, Canada Day long weekend. The weather couldn't have been more perfect!

Flying the spinnaker is challenging, and doing it with a crew of brand new sailors was interesting.  There's a real art to skippering a boat and helping the crew learn the ropes.  It's definitely taught me a lot about patience and leadership.

A simple introduction to TDD with Expresso in NodeJS

In the last post we made a super simple NodeJS module called hello.js and used it in app.js. We can make it better, and test it with Expresso.

First we can add to the awesomeness of hello.js by adding a farewell function, so it can say both "hello" and "goodbye".

// hello.js
var greeting="Hello World!";
var farewell="Goodbye Cruel World!";
var greet = function(){
    return greeting;
};
var leave = function() {
    return farewell;
};
exports.greet = greet;
exports.leave = leave;

So now our module can say hello, and bid farewell.  It exports the "greet" and "leave" functions, which we can use from app.js like so:

// app.js
var hello=require('./lib/hello.js'); 
console.log(hello.greet());
console.log(hello.leave());

Notice that I moved hello.js into a new directory called "lib", which is why the require statement now says "require('./lib/hello.js')".

Now suppose we want to test this module using expresso.  Since expresso is a command-line utility, we should install it globally:

npm install -g expresso

Now we can write a test.  First we make a "test" directory and then create a file called "hello.test.js".

mkdir test
vi test/hello.test.js

// test/hello.test.js
var assert = require('assert'),
      hello = require('hello.js);

module.exports = {
    'greet()': function() {
        assert.equal('Hello World!', hello.greet());
    }
};

This just requires node's built-in "assert" module for unit testing, plus our hello.js module that we want to test. Then, it defines a test to make sure that when we call "greet()", the response is "Hello World!". Alright! Now we can go back to the parent directory (where app.js lives) and run expresso. We tell it to look in the "lib" directory for hello.js. Expresso already knows to look in the "test" directory for tests, and will run everything it finds there.

$ expresso -I lib

    %100 1 tests

Wonderful.  Only, we didn't test the part where we say goodbye. Expresso has built-in code coverage reporting that we can enable with the "-c" flag:

$ expresso -I lib -c

   Test Coverage

   +------------------------------------------+----------+------+------+--------+
   | filename                                 | coverage | LOC  | SLOC | missed |
   +------------------------------------------+----------+------+------+--------+
   | hello.js                                 |    87.50 |   10 |    8 |      1 |
   +------------------------------------------+----------+------+------+--------+
                                              |    87.50 |   10 |    8 |      1 |
                                              +----------+------+------+--------+

   hello.js:

      1 | 1 | var greeting = "Hello World!";
      2 | 1 | var farewell  = "Goodbye Cruel World!";
      3 | 1 | var greet = function() {
      4 | 1 |    return greeting;
      5 |   | };
      6 | 1 | var leave = function() {
      7 | 0 |    return farewell;
      8 |   | };
      9 | 1 | exports.greet = greet;
     10 | 1 | exports.leave = leave; 

Cool. It tells us we haven't tested the part about leaving with a farewell. All we have to do if we want 100% code coverage is to define a test for "leave":

// test/hello.test.js
var assert = require('assert'),
    hello = require('hello.js');

module.exports = {
   'greet()': function() {
       assert.equal('Hello World!', hello.greet());
   }, 
   'leave()': function() {
       assert.equal('Goodbye Cruel World!', hello.leave());
   }
};

And now when we run expresso again, we should have 100% code coverage.

$ expresso -I lib -c

  Test Coverage

   +------------------------------------------+----------+------+------+--------+
   | filename                                 | coverage | LOC  | SLOC | missed |
   +------------------------------------------+----------+------+------+--------+
   | hello.js                                 |   100.00 |   10 |    8 |      0 |
   +------------------------------------------+----------+------+------+--------+
                                              |   100.00 |   10 |    8 |      0 |
                                              +----------+------+------+--------+

   hello.js:

      1 | 1 | var greeting = "Hello World!";
      2 | 1 | var farewell  = "Goodbye Cruel World!";
      3 | 1 | var greet = function() {
      4 | 1 |    return greeting;
      5 |   | };
      6 | 1 | var leave = function() {
      7 | 1 |    return farewell;
      8 |   | };
      9 | 1 | exports.greet = greet;
     10 | 1 | exports.leave = leave; 

Cool, eh?

Expresso offers several other assert functions that you can find in the documentation here: http://visionmedia.github.com/expresso/.

A simple intro to NodeJS modules

In preparation for an upcoming workshop at Shad Valley on NodeJS, I tried to come up with some simple examples of the CommonJS module system in NodeJS.  Felix Geisendörfer has a similar "hello world" example in his Node.js Beginner Guide.  I've put the main concepts into a short tutorial. We start with one line of Javascript, and turn it into a working NodeJS module.

Assuming you have node installed, you can run "node" from the command line to get the REPL (ie. node shell).

$ node
> console.log("Hello World!");
Hello World!

Wonderful. How about putting this in a file?

// hello.js
console.log("Hello World!")

Then run:

$ node hello.js
Hello World!

Also wonderful. Then, how about making an application that includes hello.js? Let's call it app.js. Here are the two files:

// app.js
require('./hello.js');

// hello.js
console.log("Hello World!");

Now we can run it like this.

$ node app.js
Hello World!

Again wonderful. We've written a module. Not a very fancy one, but it's a start. Now, as an aside, suppose we want to run app.js like a shell script, without specifying "node" on the command line all the time? Simply add the node command to the app.js script:

#!/usr/bin/env node
// app.js
require('./hello.js');

Oh, and make it executable.

chmod u+x app.js

Now we can run it like so:

$ ./app.js
Hello World!

Now we can begin having fun. The thing about modules is that whatever you declare in the module (hello.js) is local to that module. If you want to use it externally, you have to add it to the special variable "exports":

// hello.js
var greeting = "Hello World!";
var greet = function() {
   console.log(greeting);
}
exports.greet = greet;

#!/usr/bin/env node
// app.js
var mygreet = require('./hello.js').greet;
mygreet();

This accomplishes the same thing, but take note of a couple things. First, "var greeting" is not available outside of the hello.js file. The function "greet" is available though, because we added it to exports. So that's how you get variables, functions and objects to be available from your module. Easy peasy.