London Dart Hackathon

Technical Preview…What you see today may change tomorrow…

Enable us (as users of Dart) to influence the language and provide feedback.

Why Dart?Complex applicationsTeam developmentEasily “toolable”

//process a & b. function process(a,b) { return a+b;    };

process(1,2,3);    process("Hello","World");    process({'name:'objectA'}, {'name':'objectB'})); 

All valid, but which is correct?

JavaScript

main() { var anInt = 1; var aStr = "String"; var anObj = new Object(); var result = doSomething(anInt,aStr,anObj);}

doSomething(a,b,c) { return "blah";}

Design goals - FamiliarBe Familiar

Design goals - FamiliarBe Familiar

void main() { int anInt = 1; String aStr = "String"; Object anObj = new Object(); String result = doSomething(anInt,aStr,anObj);}

String doSomething(int a, String b, Object c) { return "blah";}

Design Goals - PerformancePerformance as a feature

Dart VM was faster at launch than V8 (chrome's JavaScript engine) was at launch.

Converted JS should be as fast as or faster than equivalent hand written JavaScript.

Dartium (Chromium with Dart VM)

Dart Editor

dart2js: Dart to JavaScript#import('dart:html');

class MyApp { MyApp() { } void run() { write("Hello World!"); }

void write(String message) { document.query('#status').innerHTML = message; }}

void main() { new MyApp().run();}

dart2js:the output JavaScript//...snip library code...// ********** Code for MyApp **************function MyApp() {}

MyApp.prototype.run = function() { this.write("Hello World!");}

MyApp.prototype.write = function(message) { get$$document().query("#status").innerHTML = message;}

// ********** Code for top level **************function main() { new MyApp().run();}

Quick Demo…Dart Editor and Dartium

Simple function syntaxvar myFunc = (a,b) { return a,b;}

var myFunc = (a,b) => a+b;myFunc(a,b) => a+b;doSomething(c,d, myFunc);doSomething(c,d, (a,b) => a+b);var result = myFunc(101,202);

Dart: FunctionsDifferent

syntax, same effect

Functions as

arguments

Anonymous function

Unsurprising function

call

Dart: Classes and interfacesFamiliar (to Java and C# developers)But a couple of nice featuresclass Duck implements Quackable { var colour;

Duck([this.colour="red"]) { } Duck.yellow() { this.colour = "yellow"; }

String sayQuack() => "quack";}

//Usagevar duck1 = new Duck();var duck2 = new Duck("blue");var duck3 = new Duck.yellow();print(duck3.sayQuack());

Optional paramters

Named constructors

Function shorthand

Unsurprising this

Dart: Classes and interfacesFamiliar (to Java and C# developers)But a couple of nice features

interface Quackable default Duck { String sayQuack();}

//Usagevar duck1 = new Quackable();

Default Implementati

on

Dart: Classes and interfacesAll classes are also interfaces

class Person implements Duck { … }Class properties can be interchanged with getters and setters

duck.colour = "yellow"; //setter, or property?

class Duck { var _colour; //private property get colour() => _colour; //getter set colour(value) { //setter _colour=value; }}

Dart: Libraries and PrivacyBreak up single source code file into multiple,

independent files.

Break logical parts of an app into libraries.Import your own and third party libraries.Privacy declarations apply at a library level

(not a class level)

#library("myLibrary");

#import("./libs/otherLib.dart");

#source("./myFile1.dart");#source("./myFile2.dart");

Dart: Optional TypesAdd documentation to code

Documentation readable by humans and tools

"Innocent until proven guilty"

Type annotations have no effect on the running applicationvar i = 1;var s = "Hello";

int i = 1;String s = "Hello";

String i = 1;int s = "Hello";Probably wrong, but

not proved to be wrong.

Dart: Optional TypesOptional types can be useful when prototyping an app

class Person { sayQuack(){ return "ouch…quack"; }}

pokeDuck(duck) { duck.sayQuack();}

//UsagepokeDuck(new Duck());pokeDuck(new Person()); //runs fine

But is that what the library designer intended?

Dart: Optional TypesBut as you add structure, types can help

you… class Person { sayQuack(){ return "ouch…quack"; }}

pokeDuck(duck) { duck.sayQuack(); duck.swimAway();}

//UsagepokeDuck(new Duck());pokeDuck(new Person()); //throws exception

This now fails with a

noSuchMethod exception

New method added to

Duck, which isn't in Person

Dart: Optional TypesAdding type info provides documentation to tools and

humans.class Person { sayQuack(){ return "ouch…quack"; }}

pokeDuck(Duck duck) { duck.sayQuack(); duck.swimAway();}

//UsagepokeDuck(new Duck());pokeDuck(new Person()); //tools warn

Now the tools can provide warnings

(or errors in checked mode).

Type information

Dart: noSuchMethodAll classes can have a noSuchMethod method

(inherited from the base Object class)

class Person { sayQuack(){ return "ouch…quack"; }

noSuchMethod(name, args) { if (name == "swimAway") { throw "I'm not really a duck"; } }}

Similar to ruby's method_missing

Side note: Any object can be thrown as an

exception

Libraries: dart:html, dart:jsonClient side library for interacting with the

DOMUses Dart constructs for DOM manipulation

var foo = elem.query("#foo"); //return a foo

var foos = elem.queryAll(".foo"); //list of foo

Events: foo.on.click.add((event) { //do something});

Autocomplete HTML5JSON Parsing of Maps, Lists

Libraries: dart:ioServer side libraries:

Processes File IOSocketsHttp Client & Server

More to do and time to try itwww.dartlang.org #dartlang

www.html5rocks.com