Last Updated: February 25, 2016
·
3.019K
· eranation

Nice surprises in Dart M1

I'm a big typed JS fan, and when Dart came out last year I was very happy.
Now that TypeScript was introduced, the toolbox of the typed client side developer is just as good as it ever was.

3 interesting things I found out using the default app template in the new M1 release of the Dart Editor

import 'dart:html';
import 'package:js/js.dart' as js;

num rotatePos = 0;

void main() {
  query("#text")
    ..text = "Click me!"
    ..on.click.add((Event event){
        rotatePos += 360;
        query("#text").style
        ..transition = "1s"
        ..transform = "rotate(${rotatePos}deg)";
    });

    js.scoped(() {
      var j = js.context;
      j.alert('Hello from Dart via JS');
      j.$("#text").html("foo");
    });

}
  • Double dot notation

    used for chaining, the first . is operating on the "Click me!" string,
    however the 2nd one is referencing the query Element
    surprisingly I couldn't find reference to it (I'm sure its well documented) but it surprised me

  • Multiline anonymous function

    In the previous release of Dart, I couldn't find a way to create multi line anonymous functions, it wasn't in the examples (only ()=>... form) or the documentation, and I just assumed it's not supported.

    Whether it was supported or not, I was happy to discover it supports them indeed, and in a very intuitive way (as in the above example of the click handler)

  • JS Interoperability works, note the js.scoped wrapper, and the call to a jquery method by simply invoking it on the context object.

    This might be a little less convenient than just writing JavaScript as you would in TypeScript, but this is a very close workaround that makes Dart relevant much more.

Have more things that are perhaps documented but still was surprised to find out about? have other some td;lr show and tell about Dart? feel free to comment

1 Response
Add your response