Slides from the presentation to the London Dart Community on 18th April 2012 at Campus London.
Dart structured web programming
Unicorns, Rainbows and
London Dart Community
Chris Buckett
Why unicorns and rainbows?
Unicorns for:
"Hey look at that!"
String s = 12345;
int i = "Hello World";
print("$i $s");
//outputs "Hello World 12345"
Rainbows for:
"Aah, that's nice!"
Optional Typing
Great Tools
This is Dart
A language
And a tool ecosystem
For creating complex webapps
In teams
Single threaded
But isolates provide "shared-nothing" concurrency
Optionally typed
Runs in a Browser Virtual Machine
Or a Server Virtual Machine
Can be converted to JavaScript
Technical Preview
What you may see today, may change tomorrow
Enable us (as potential end users) to influence the language and
provide feedback
Eventual goal is standardization
Why Dart
What do Google build?
Single page web-apps
Instant search
Docs
Google Plus
Blogger
Analytics
Maps
etc
Browser Apps
Server side APIs
Why Dart?
Complex applications
Team development
Easily toolable
//javascript
//process a & b. functionprocess(a,b){ returna+b;
};//javascriptdocument.write(process(1,2,3));
document.write(process("Hello","World"));
document.write(process({name:'objectA'}, {name:'objectB'}));
Why Dart the alternatives?
GWT
Still around and will be driven by Google's use cases
CoffeeScript
Closer to JavaScript, syntax inspired by Ruby, Python
JavaScript + Framework X
The default option
Dart is not a replacement, but an option.
Design Goals - Flexibility
Flexible, but with structure
Optional types provide flexibility
Libraries to organize code
Classes and Interfaces to provide structure
Tools catch errors
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 - Familiar
Be Familiar
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";
}
Design Goals - Perfomance
Performance as a feature
Currently not as fast as V8
(But D8 is faster at launch than V8 was at launch)
Converted JS should be as fast as or faster than equivalent hand
written JavaScript.
Design goals
Great developer experience
Dart
Language
IDE
Dart VM
Native Browser
dart2js
Dartium (Chromium with Dart VM)
Dart IDE (Lightweight Eclipse IDE)
Demo debugging and dartium
Dart2js: Dart to JS Converter
#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: Dart to JS Converter
//...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();
}
Embed within HTML
main() {
print("Hello Dart");
}
A quick tour of some interesting language features
Dart: Classes and interfaces
Familiar (to Java and C# developers)
But a couple of nice features
class Duck implements Quackable {
var colour;
Duck([this.colour="red"]) { }
Duck.yellow() {
this.colour = "yellow";
}
String sayQuack() => "quack";
}
//Usage
var 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 interfaces
Familiar (to Java and C# developers)
But a couple of nice features
interface Quackable default Duck {
String sayQuack();
}
//Usage
var duck1 = new Quackable();
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;
}}
Demo classes and interfaces
Dart: Libraries and Source
Break 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 Types
Add documentation to code
Documentation readable by humans and tools
"Innocent until proven guilty"
Types have no effect on the running application
var 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 Types
class Person {
sayQuack(){
return "ouchquack";
}
}
pokeDuck(duck) {
duck.sayQuack();
}
//Usage
pokeDuck(new Duck());
pokeDuck(new Person()); //runs fine
But is that what the library designer intended?
Optional types can be useful in the early days of developing an
app
Dart: Optional Types
class Person {
sayQuack(){
return "ouchquack";
}
}
pokeDuck(duck) {
duck.sayQuack();
duck.swimAway();
}
//Usage
pokeDuck(new Duck());
pokeDuck(new Person()); //throws exception
This now fails with a noSuchMethod exception
But as you add structure, types can help you
Dart: Optional Types
Adding type info provides documentation to tools and humans.
class Person {
sayQuack(){
return "ouchquack";
}
}
pokeDuck(Duck duck) {
duck.sayQuack();
duck.swimAway();
}
//Usage
pokeDuck(new Duck());
pokeDuck(new Person()); //tools warn
Now the tools can provide warnings (or errors in checked
mode).
Demo Libraries and optional types
Dart: noSuchMethod
All classes can have a noSuchMethod method
class Person {
sayQuack(){
return "ouchquack";
}
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
Simple function syntax
main() {
var 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: Functions
Different syntax, same effect
Functions as arguments
Anonymous function
Unsurprising function call
Libraries: Dart:html
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});
Libraries: dart:io
Server side libraries:
Processes
File IO
Sockets
Http Client & Server
Typical Async code with
module.handle("data", (result) {
//on success
},
(err) {
//on error
}
);
Could be re-written with Futures
Future conn = module.handle("data");
conn.then((result) {
//on success
});
conn.handleException((error) {
//on error
});
Still a technical preview
Time to get involved
www.dartlang.org
Join the active mailing list
Search #dartlang on Google +
Resources:
http://api.dartlang.org
http://synonyms.dartlang.org
http://try.dartlang.org
