dart structured web apps

structured web appsLondon Ajax User Group

Chris Buckett

This is Dart…A language And a tool ecosystemFor creating complex webappsIn teams

Single threadedBut isolates provide "shared-nothing" concurrency

Optionally typedRuns in a Browser Virtual MachineOr a Server Virtual MachineCan 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 searchDocsGoogle PlusBloggerAnalyticsMaps… etc …

Browser Apps

Server side APIs

Why Dart?Complex applicationsTeam developmentEasily “toolable”

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

document.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

CoffeeScriptCloser to JavaScript, syntax inspired by Ruby,

PythonJavaScript + Framework X

The default option

Dart is not a replacement, but an option.

Design Goals - FlexibilityFlexible, 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 - 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 - PerfomancePerformance 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

DartLangua

ge

IDE

Dart VM

Native Browse

r

Frog

Great developer experience

Dartium (Chromium with Dart VM)

Dart IDE (Lightweight Eclipse IDE)

Frog: 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();}

Frog: 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<html><body> <script type="application/dart"> main() { print("Hello Dart"); } </script></body></html>

<html><body> <script type="application/dart" src="MyApp.dart"></script></body></html>

A quick tour of some interesting language features…

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 = Quackable();

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 SourceBreak 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"

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 "ouch…quack"; }}

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

//UsagepokeDuck(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 "ouch…quack"; }}

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

//UsagepokeDuck(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 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).

Dart: noSuchMethodAll classes can have a noSuchMethod method

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

Simple function syntaxmain() {

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: FunctionsDifferent

syntax, same effect

Functions as

arguments

Anonymous function

Unsurprising function

call

Libraries: Dart:htmlClient 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});

Libraries: dart:ioServer side libraries:

Processes File IOSocketsHttp Client & Server

Still a technical previewTime to get involved…

www.dartlang.orgJoin the active mailing listSearch #dartlang on Google +

More still to be builtReflection!Libraries providing higher levels of

abstraction: UI frameworks Server frameworks

Thankyou!These slides will be

posted on dartwatch.com

dart structured web apps

Technology