F1 Dashboard

Since the site is quite stable now I will share with you some technologies and ideas I used.

Platform

F1Dashboard is build and deployed on Google App Engine (GAE). I started this as an experiment and as a toy project just to learn something new.

GAE is not a new idea, it is another platform for cloud computing. Main difference from others is the Database model. GAE is using a thing called Data Store (Big Table), which is not a normal relational database that anyone used to. There is no schema defined, and querying is impossible without indexing it before. It is something like a massive bag that could store stuff in.

GAE is offered as Python and Java. The later was released long time after Python. It has limited version of JVM environment and a whole bunch of Google services to use. Lots of standard JDK types got repackaged by Google just to limit standard Java functionality, like spawning a Threads.

GAE offers standard Java servlets as web technology. This means that you could use some of the well established frameworks out there. I decided to create one myself of course Something simple and not complicated.

Language

I choose Groovy, just because I wonted to learn another dynamic language and I liked the way Groovy did closures.

Patterns

The framework I did follows MVC pattern. It has single servlet entry. Every requested URL is parsed internally and resolved into Controller and Action. I’m using String Template as rendering engine for my views.

All database operations are entirely hidden behind Repositories, and I made it simple to switch from Objectify to Data Nucleus to anything else that comes.

I choose Objectify for its simplicity. If you are starting with GAE I would very much recommend it.

UI

The design is simple and was done by fried of mine Mike from Rosslyn Digital.

I plugged in jQuery Tools for Overlay effect. It also has a nice plugin for picture gallery.

I also added automatic Twitter updates for every message that is updated on a site.

Updates

Site is automatically harvesting for new content from various of Formula 1 related sites. There is also content from Twitter, YouTube and Flickr. It is utilizing GAE cron jobs for that.

I’m trying to gather some ideas for what I can do with the site in near future. If you have an idea, drop me an email. You can also see latest updates on a site at http://blog.f1dashboard.com

Cheers, Greg

Some facts

JavaScript is object oriented language. It is “so much” object oriented that even Functions are first-class objects. It could be a surprise for a programmer (like myself) who used to classical object oriented approach, used in Java or C#.

It means that Functions can have properties, another functions, objects etc. Functions could be use to change state of the object or make calculations. They could also be used to create another Functions based on original.

Classes and Prototypes

Classical object oriented language is using types of object, or classes to describe it. In Prototypes one object is describing other, it is almost comparable to cloning.

To make it easier to understand I’d like to use this example:

1. Using classical approach if I asks someone to make me another Aston Martin, I would be asked to get technical specs for it so it could be build it.
2. Using prototypal approach if I ask for Ferrari I will be asked to bring one so they can look at it and build it.

I can define my object and if I need another copy of it I just use prototype to get the same one. In JavaScript world it also means that once I got a bunch of objects that have the same prototype, if I add new property to it I will be able to use it in all of them.

All objects have one common prototype that is Object prototype. Prototype for functions is Function prototype. One useful object method to determine if some object’s property is its own or inherited from its prototype is hasOwnProperty method.

Few examples

To create new Object in JavaScript we don’t need to describe it, just create it:

var myObject = { fooProperty: ‘some value’, barProperty: 2 };

Now if we would like another copy of it we could type something like this:

var Tmp = function(){};
Tmp.prototype = myObject;
var newObject = new Tmp();

You might wonder why is this necessary, looks messy and is not clear. Simple construction :

var newObject = {};
newObject.prototype = myObject;

should work. The reason that it is not is because in first line you are creating the object. Once it’s created it’s got Object as prototype its prototype. Adding another prototype to it’s chain of prototypes will not automatically make it inherit all the properties of another prototype.

Adding new property to prototype could be done using this contruction:

var newObject = {};
newObject.prototype.foo = “some text”;
newObject.prototype.bar = function(){
// do something
}

Multiple prototypes, chain of prototypes

It is impossible to define multiple prototypes for an object.

var objectA = { foo: ‘blah’ };
var objectB = { bar: ‘blah two’ };

var Tmp = function(){};
Tmp.prototype = objectA;
Tmp.prototype = objectB;
var newObject = Tmp.new();

In here newObject will only inherit properties of a last assign prototype and it would be objectB.

If you want to inherit multiple prototypes you have to get Function to help you.

function A(){
    this.foo = ‘blah’;
};
function B(){
    this.bar = ‘another blah’;
};
B.prototype = new A();
var c = new B();

Little help from jQuery

jQuery has a method that helps us to extend one object with some properties from another. Here how you can use it:

function A(){
   this.foo = ’some text’;
}
var anotherObject = { bar: 2 };
$.extend(A.prototype, anotherObject);

Cheers, Greg