I will admit that I am not overly eager in using frameworks in general let alone ones that seem to place overhead and headaches over productivity. I will preface this blog post with my opinion on strongly type javascript languages such as CoffeeScript and Typescript are weak compared to most. In fact I have yet to use either languages and up to this point in my career have no desire to learn or investigate the reasoning behind these languages truly exist. I understand that these aforementioned languages solve problems that many other developers encounter rather frequently. What those issues may involve is not for discussion of this post.

Even though I am not a fan of using CoffeeScript and TypeScript does not mean I am against using such frameworks. My current employer uses Dart as its preferred strongly typed javascript language. After using Dart for almost a year I would say that it’s not drastically different than plain old javascript. There are a few caveats here and there, but nothing to write home about.

The biggest difference between Dart and javascript would be actually interacting with a javascript library. This page describes what you need to do in order to setup and call pure javascript methods using Dart. It’s pretty simple once you get the hang of it, but there is a tricky method in creating event handlers for  javascript libraries.

Below is a code snippet of how you actually accomplish this in normal javascript.

 d3.layout.cloud().size([800, 300])
            .words(frequency_list)
            .rotate(0)
            .fontSize(function(d) { return d.size; })
            .on("end", draw)
            .start();

This is how you would accomplish the same exact thing using Dart

 context['d3']['layout'].callMethod('cloud')
  .callMethod('size', [new JsArray.from([800, 300])])
  .callMethod('words', [new JsObject.jsify(frequency_list)]) 
  .callMethod('rotate', [0]) 
  .callMethod('fontSize', [fontSize()]) 
  .callMethod('on', new JsArray.from(['end', draw()])) 
  .callMethod('start');

I am sure you will notice the all of the callMethod calls that are being made in the Dart code. If you aren’t familiar with dart or the dart:js library then I would consider you studying up on the library itself before continuing.

For the most part this is pretty standard except whenever you are setting the event handler for the end event. I was pretty clueless at first and tried several different attempts, but the dart code snippet above works in all browsers.

If you are to set the event handler as so:

 .callMethod('on', ['end', draw()])

It will work in Chromium, but not your standard browser. It will also not show an error or any other type of warning and will definitely cause some frustration. I can speak from experience because it took me a few hours and lots of Googling to finally find a solution that works in all browsers. I hope this helps some people out there who are developing with Dart. If you are using Dart drop me a line and maybe we could sync-up sometime.