Slides from the London Dart Hackathon

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