ePub - MVC Applies to JavaScript - Released

MVC applies to JavaScript

Glad to announce that Developer.press released my first ePub: ‘MVC applies to JavaScript’. The ebook is about integrating the MVC pattern into JavaScript development. It presents a pragmatic approach on how you can develop a client-side application using this pattern. Real code is possibly the best way to explain the advantages of using a design pattern and this book shows a comparison of the code needed to build a sample application adopting and not adopting MVC.

Backbone.js, one of the most popular MVC/MV* frameworks, it is also brought as term of comparison. The sample application mentioned previously is built using Backbone.js to show how the use of a framework can help and speed up your development process. Client-side applications are becoming larger and larger and having a pattern to use as a guideline can definitely be very advantageous for producing maintainable and scalable applications.

The book is available on Amazon and on Itunes for less than $2.

Get Started With Selenium WebDriver

Selenium is a well known framework for automating functional testing of web applications. The second version of this tool, named Selenium WebDriver, has been released last year merging the best part of Selenium (1) and Web Driver. If you are interested in automated functional testing and you want to know more around Selenium Web Driver, feel free to read  this article I wrote for the IBMDeveloperWork on how to get started with it.

The State of JavaScript in 2012

2012 is looking a year where JavaScript development will be more and more critical in web development. I recently wrote an article for the Safari Books online on The State of JavaScript in 2012 where I quickly introduce interesting things happening in the JavaScript world. You can also find short tips on CoffeeScript and on Node.js. Leave a comment there or here if you find them helpful.

What Is There Behind a Class in CoffeeScript?

CoffeeScript is a little language that compiles into JavaScript. CoffeeScript is gaining lots of popularity due to its simplicity and it is really popular in the Ruby community having lots of similarity with Ruby. CoffeeScript comes with the notion of ”class”. Class?? JavaScript doesn’t have class, right? True, but JavaScript has the concept of inheritance built-in the language. JavaScript doesn’t use classes for inheritance, but it uses the ”prototype” object as you may know. Prototypal inheritance can be implemented in JS as the ”Object.create” method (available in ES5) does or as in the protoInherit() in the following snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// parent object
var parentObj = {
  prop1 : "value1",
  method1 : function(){ return 1; }
};

// prototypal inheritance through the protoInherit function
function protoInherit(parentObj) {
  function Temp(){};
  Temp.prototype = parentObj;
  return new Temp();
}

// child object inherits from parent
var childObj = protoInherit(parentObj);

console.log(childObj.prop1); // returns "value1"
console.log(childObj.method1()); // return 1

Quite straightforward: the prototype linked to the new object points to the object that we want to inherit from. In this way the new object gets all the properties and methods from the parent  object name ”parentObj” in the previous snippet.

Now, let’s go back to CoffeeScript. If you visit http://coffeescript.org/ and you scroll down to the section ”Classes, Inheritance, and Super”, you can see in the right hand how the inheritance is implemented and how a CoffeeScript class is translated into JavaScript. The method that is in charge of expressing inheritance is ”__extends” and below is the implementation used:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
__hasProp = Object.prototype.hasOwnProperty,
__extends = function(child, parent) {
  for (var key in parent) {
      if (__hasProp.call(parent, key))
          child[key] = parent[key];
  }

  function ctor() {
      this.constructor = child;
  }
  ctor.prototype = parent.prototype;
  child.prototype = new ctor;
  child.__super__ = parent.prototype;
  return child;
};

Not exactly the same code as in the previous snippet. Look confusing? Let’s have a better look. The function implementing the inheritance takes the ”child” and the ”parent” function as arguments. First of all, all the properties from the “parent” are copied in the “child” function. Then, the prototype object of the “child” function points to a temporary constructor, which prototype points to the “parent“‘s prototype. The ”super” property is attached to the “child” function and it points to the parent’s prototype, in case you need to refer to the parent function. Finally the “child” function is returned.

Basically the classical inheritance pattern has been implemented here and it is an alternative to express inheritance in JavaScript. It makes sense in this context as CoffeeScript is trying here to emulate the behaviour of classes, familiar for Ruby, Java or C# developers, and to hide the prototype’s behaviour, which can be confusing for non-JavaScript developers.

I personally still like using the “prototype” object for inheritance, as it seems more a native thing from the language. Anyway, hope to have clarified the meaning of the code behind a “class” in CoffeeScript.