Tuesday, 21 May 2013

HTML5 programming with Dart

Another programming language

Dart is web programming language from Google designed to address some of Javascript's perceived flaws. While Javascript has its supporters, there are many who find developing with it irritating and difficult, especially for large-scale or complex projects.

Dart attempts to address these shortcomings by providing many features that are associated with the more fully-featured object-oriented languages such as Java, C#, etc. These features include classes, interfaces, generics and optional typing.

With this in mind, I decided to take a look at Dart with a view to creating a simple HTML5 canvas game, in order to try out some of the features. This means having a html canvas element as shown, with the game mechanics and UI written in Dart and then compiled into Javascript.
    <canvas id="gameCanvas" width="400" height="464">     </canvas>
Setting up your system for Dart development is straightforward, and is made easier still by the existence of the Dart Editor, which is essentially a stripped-down version of Eclipse.

Dart First Impressions

Well, the language initially looks very similar to Javascript. Much of the syntax, including for declaring variables and functions, is the same. But, if you have a knowledge of other languages such as Java, the additional features such as classes suddenly make it much easier to plan and develop your project. The notation is familiar:
class MovingObject {   ImageElement img;   int x;   int y;   int dx;   int dy;   MovingObject(this.img, this.x, this.y); }
Another nice feature is that object types can be declared, and this information can be used the editor to provide "content assist" or compile-time warnings, etc. The types are optional so if you need to do rapid initial development using Javascript-like "var"s  in your code, you still can.

The Dart Editor provides Content Assist features

The intention is that Dart can be exported to Javascript so that compatibility with the current crop of web browsers will be maintained. However, this is where I found the most problems. Even when my app would run perfectly as a native Dart app, on several occasions the exported Dart app would not function correctly. As might be expected, I got the best results when using Google Chrome. But if the intention is to compile to Javascript that works on any browser, then my experience suggests there is a way to go yet.

My first project was to create a simple canvas-based two-player strategy game called Gomoku, which you can try out. Note due to the Javascript compilation problems mentioned above, it is currently only working in Google Chrome.

In summary, after a first look, I think Dart has a lot of potential. It's unlikely that the native Dart VM will make it to all the browsers, so it's not going to be a replacement for Javascript. But if the compilation problems can be sorted out, I can imagine it being a popular choice of source language for developing both HTML5 canvas and web-form based applications.

More Dart-related stuff to come shortly...