ePub ‘MVC applies to JavaScript’ released

21/02/2013 § 5 Comments


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

15/04/2012 § Leave a comment


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  the article I wrote for the IBMDeveloperWork on how to get started with it.

The State of JavaScript in 2012

22/03/2012 § Leave a comment


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’s there behind a “class” in CoffeeScript?

17/03/2012 § Leave a comment


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:

// 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:

__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.

Getting started with Backbone.js

14/03/2012 § Leave a comment


Backbone.js is a great library for building single page applications and JavaScript MVC-like apps. The author of Backbone is Jeremy Ashkenas, the same guy who wrote CoffeeScript. If you are interested in knowing more around this library I just redirect to an article I wrote recently for IBM DeveloperWorks: http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html

2011 in review

01/01/2012 § Leave a comment


The WordPress.com stats helper monkeys prepared a 2011 annual report for this blog.

Here’s an excerpt:

The concert hall at the Syndey Opera House holds 2,700 people. This blog was viewed about 20,000 times in 2011. If it were a concert at Sydney Opera House, it would take about 7 sold-out performances for that many people to see it.

Click here to see the complete report.

Parsing querystring in a URL through JavaScript

30/05/2011 § Leave a comment


To parse a query string in a URL through JS, you can use a function like the following one:

function getQueryValue(param) {
  var qstring = window.location.search,
    qstringArray = qstring && qstring.substring(1).split("&"),
    i = 0,
    len = qstringArray.length;
  for (; i < len; i++) {
    var token = qstringArray[i],
	eqIndex = token.indexOf("="),
	firstPart = token && token.substring(0, eqIndex);
    if (firstPart === param ) {
      return token.substring(eqIndex + 1, token.length);
    }
  }
}

E.g. Given a URL "http://domain.com.au?aaa=bbb , you can call this function as getQueryValue("aaa") and you'll get "bbb"

I uploaded this code in a Gist on Github (bit modified to be compliant with the module pattern).

Follow

Get every new post delivered to your Inbox.