This document summarizes the London Dart Hackathon. It discusses that Dart is a programming language designed for complex applications and team development. It is easily compilable to JavaScript. The document provides examples of Dart code showing functions, classes, interfaces, libraries, and optional typing. It also discusses Dart libraries for HTML, JSON, and server-side IO. In conclusion, it encourages trying Dart and provides links for more information.

1. London Dart Hackathon

2. Technical Preview…
What you see today may change
tomorrow…
Enable us (as users of Dart) to
influence the language and provide
feedback.

3. Why Dart?
 Complex applications
 Team development
 Easily “toolable” JavaScript
//process a & b.
function process(a,b) {
return a+b;
};
All valid, but
which is correct?
process(1,2,3);
process("Hello","World");
process({'name:'objectA'}, {'name':'objectB'}));

4. Design goals - Familiar
 Be Familiar
main() {
var anInt = 1;
var aStr = "String";
var anObj = new Object();
var result = doSomething(anInt,aStr,anObj);
}
doSomething(a,b,c) {
return "blah";
}

5. Design goals - Familiar
 Be 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";
}

6. Design Goals - Performance
 Performance 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.

7. Dartium (Chromium with Dart VM)

8. Dart Editor

9. 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();
}

10. 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();
}

11. Quick Demo…
Dart Editor and Dartium

12. Dart: Functions
Different
 Simple function syntax syntax, same
effect
 var myFunc = (a,b) {
return a,b;
} Functions as
 var myFunc = (a,b) => a+b; arguments
 myFunc(a,b) => a+b;
Anonymous
 doSomething(c,d, myFunc); function
 doSomething(c,d, (a,b) => a+b);
 var result = myFunc(101,202); Unsurprising
function call

13. Dart: Classes and interfaces
 Familiar (to Java and C# developers) Optional
 But a couple of nice features paramters
class Duck implements Quackable {
var colour;
Duck([this.colour="red"]) { }
Duck.yellow() { Named
this.colour = "yellow"; constructors
}
//Usage
String sayQuack() => "quack";
var duck1 = new Duck();
}
var duck2 = new Duck("blue");
Unsurprising Function var duck3 = new Duck.yellow();
this shorthand print(duck3.sayQuack());

14. Dart: Classes and interfaces
 Familiar (to Java and C# developers)
Default
 But a couple of nice features Implementation
interface Quackable default Duck {
String sayQuack();
}
//Usage
var duck1 = new Quackable();

15. Dart: Classes and interfaces
 All 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;
}
}

16. Dart: Libraries and Privacy
 Break up single source code file into multiple,
independent files. #library("myLibrary");
#import("./libs/otherLib.dart");
#source("./myFile1.dart");
#source("./myFile2.dart");
 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)

17. Dart: Optional Types
 Add documentation to code
 Documentation readable by humans and tools
 "Innocent until proven guilty"
 Type annotations have no effect on the running application
var i = 1; int i = 1;
var s = "Hello"; String s = "Hello";
String i = 1;
int s = "Hello"; Probably wrong, but
not proved to be wrong.

18. Dart: Optional Types
 Optional types can be useful when prototyping an app
class Person {
sayQuack(){
return "ouch…quack";
}
}
pokeDuck(duck) {
duck.sayQuack();
}
//Usage
But is that what the
pokeDuck(new Duck());
library designer
pokeDuck(new Person()); //runs fine
intended?

19. Dart: Optional Types
 But as you add structure, types can help you…
class Person {
sayQuack(){
return "ouch…quack";
} New method
} added to Duck,
which isn't in
pokeDuck(duck) { Person
duck.sayQuack();
duck.swimAway();
}
//Usage
This now fails with a pokeDuck(new Duck());
noSuchMethod pokeDuck(new Person()); //throws exception
exception

20. Dart: Optional Types
 Adding type info provides documentation to tools and
humans.
class Person {
sayQuack(){
return "ouch…quack";
} Type
} information
pokeDuck(Duck duck) {
duck.sayQuack();
duck.swimAway();
}
Now the tools can //Usage
provide warnings (or pokeDuck(new Duck());
errors in checked pokeDuck(new Person()); //tools warn
mode).

21. Dart: noSuchMethod
 All classes can have a noSuchMethod method
(inherited from the base Object class)
class Person {
sayQuack(){ Similar to ruby's
return "ouch…quack"; method_missing
}
noSuchMethod(name, args) { Side note: Any
if (name == "swimAway") { object can be
throw "I'm not really a duck"; thrown as an
} exception
}
}

22. Libraries: dart:html, dart:json
 Client side library for interacting with the DOM
 Uses 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 HTML5
 JSON Parsing of Maps, Lists

23. Libraries: dart:io
 Server side libraries:
 Processes
 File IO
 Sockets
 Http Client & Server

24. More to do and time to try it
www.dartlang.org #dartlang www.html5rocks.com