JavaScript – Two function styles

There are two different styles of defining functions (and hence classes) in JavaScript. The first style is like defining a function variable. For example, you could define a class and a private method inside that class like this:

Person = function(fname, lname, age) {
...
    var getFirstName = function() {
    ...
    };
};

The second style is defining functions directly. So, the previous example becomes like this:

function Person(fname, lname, age) {
...
    function getFirstName() {
    ...
    };
};

Syntactically, I prefer the second style. It’s simpler and feels more natural. However, in my previous post about JavaScript classes, I used the first style for a reason. The reason is that even though you could use the second style for constructors and private methods, you cannot use it for privileged or public methods. You need to set privileged methods to “this” and public methods to protototype. So, the Person class from my previous post looks like this when I use the second style:

// Constructor
function Person(fname, lname, age) {

    // Private variables
    var _fname = fname;
    var _lname = lname;
    var _age = age;

    // Private method
    function getFirstName() {
        return _fname;
    };

    // Public variable
    this.fullName = fname + ' ' + lname;

    // Privileged method - exposes private variables and methods publicly.
    this.getFirstNameAndAge = function() {
        return getFirstName() + ", " + _age;
    };

    Person.numberOfPeople++;
};

// Public static variable
Person.numberOfPeople = 0;

// Public method
Person.prototype.getFullNameAndNumberOfPeople = function () {
    return this.fullName + " --> " + Person.numberOfPeople;
};

Notice how some functions are defined directly and some of them are defined as function variables. Even though this is not too bad, I prefer to stick with a single style, so I always go with the first style for consistency.

JavaScript – Class and Visibility Control

Classes and visibility control in JavaScript are a little different from the traditional object oriented languages like Java. Here’s a simple JavaScript class I use as a cheat-sheet from time to time to remind myself the JavaScript syntax.

// Constructor
Person = function(fname, lname, age) {

    // Private variables
    var _fname = fname;
    var _lname = lname;
    var _age = age;

    // Private method
    var getFirstName = function() {
        return _fname;
    };

    // Public variable
    this.fullName = fname + ' ' + lname;

    // Privileged method - exposes private variables and methods publicly.
    this.getFirstNameAndAge = function() {
        return getFirstName() + ", " + _age;
    };

    Person.numberOfPeople++;
};

// Public static variable
Person.numberOfPeople = 0;

// Public method
Person.prototype.getFullNameAndNumberOfPeople = function () {
    return this.fullName + " --> " + Person.numberOfPeople;
};

And here’s the test output for the class:

var person = new Person('Mete', 'Atamel', 29);
var person2 = new Person('John', 'Smith', 50);
console.log(person._fname); // undefined
console.log(person.fullName); // Mete Atamel
console.log(person.getFirstNameAndAge()); // Mete, 29
console.log(Person.numberOfPeople); // 2
console.log(person.getFullNameAndNumberOfPeople()) // Mete Atamel --> 2

DataServices JavaScript Client – HelloWorld Messaging

Let’s continue exploring the new DataServices JavaScript Client. This time, we write a simple HTML/JavaScript chat application that talk to other Flex/Flash based chat applications using DataServices.

If you want to run the HTML/JavaScript chat sample, put Chat.html next to Chat.swf along with dataservices-client.js that’s under resources/client-sdk/javascript folder of DataServices installation.

DataServices JavaScript Client – HelloWorld Remoting

In this video, I talk about how you can convert a simple Flex remoting application talking to DataServices into a JavaScript/HTML application.

If you want to run the sample yourself, here is the productRO.html file that I talked about in the video. Copy it where productRO.swf is along with dataservices-samples.js provided in resouces/client-sdks/javascript folder of DataServices installation.

Dart: The new language of the web?

Google recently announced Dart, a new programming language aimed for serious web apps. I can’t tell you how excited I am with this announcement.

If you’ve been following my posts recently, I had a series of posts on JavaScript (part1, part2, part3, part4, conclusion) where I concluded that JavaScript is not ready for serious development on the web. My main complaints were lack of true object oriented support, lack of visibility control, lack of type support, lack of tooling, and overall primitive nature of JavaScript language. If you look at Dart Technical Overview, Google is tackling the exact issues I outlined in my previous posts. There will be classes, optional types, libraries in Dart with extensive tooling.

This is quite exciting but not that exciting for me because ActionScript and the Flash ecosystem around it already provides all of these. I think the more exciting part of Dart (that ActionScript does not provide) is its flexibility. The type system in Dart is optional, so you can use it if you want strongly typed code (which will surely help with tooling) but you don’t have to and you can simply revert back to JavaScript style of everything being a var. Similarly, you can run Dart in its own VM that Chrome will surely provide and other browsers might follow but if some browser doesn’t support Dart VM, no worries, you will be able to compile Dart into JavaScript.

If Google can truly implement this kind of flexibility across browsers, I think Dart can be a serious contender to be the new language of the web. It’ll also be interesting how ActionScript will evolve as Dart materializes. Good times for web development for sure!