dart presentation to svforum

7/28/2019 Dart Presentation to SVForum

1/55

DartSV Forum, 2012/03

Seth Ladd, Developer Advocate, Dart


2/55

Why Dart?

More developers writing more awesome apps for the we


3/55

#dartlang

10-100 LOC 1M LOC

Scale Lines of Code


4/55

#dartlang

Familiar


5/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);

Hug.bear() : strength = 100;

Hug operator +(Hug other) {

return new Hug(strength + other.strength);

}

void patBack({int hands: 1}) {// ...

}

String toString() => "Embraceometer reads $strength";

}


6/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


7/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


8/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


9/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


10/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


11/55

Cuddle time

#dartlang

class Hug {

final num strength;

Hug(this.strength);




}


}


}


12/55

Cuddle time

#dartlang

main() {

var small = new Hug(2);

var big = new Hug.bear();

var together = small + big;

print(together); // Embraceometer reads

}


13/55

Mixins

#dartlang

Dartabstract class Persistence {

void save(String filename) {print('saving the object as ${toJson()}

');

}

void load(String filename) {

print('loading from $filename');

}

Object toJson();

}

class Ninja extends Objectw{

Map toJson() {

return {'throwing_stars'

}

}

main() {

var snakeEyes = new Ninja(

snakeEyes.save('file.txt')

}


14/55

Easier to understand

numrecalculate(Point origin, numoffset{bool estimate: false})

...

}

Withorecalculate(origin, offset, estimate) {

...}

#dartlang


15/55

Lexical this. WYSIWYG.

#dartlang

class AwesomeButton {

int awesomeDial;

ButtonElement elem;

AwesomeButton(this.elem) {

elem.onClick.listen((e) => crankTheAwesome());

}

crankTheAwesome() {

awesomeDial = 11;

}

}


16/55

Lexical this. WYSIWYG.

#dartlang

class AwesomeButton {

int awesomeDial;

ButtonElement elem;

AwesomeButton(this.elem) {

elem.onClick.listen((e) => crankTheAwesome());

}

crankTheAwesome() {

awesomeDial = 11;

}

}


17/55

Fields evolve with getters/sette

#dartlang

class Car {bool isEngineRunning;

}

var roadster = new Car();

roadster.isEngineRunning = true;


18/55

Fields evolve with getters/sette

#dartlang

class Car {

Engine engine;

bool get isEngineRunning => engine.isRunning;

void set isEngineRunning(bool isRunning) {

engine.isRunning = isRunning;

}

}

var roadster = new Car();

roadster.isEngineRunning = true; // same as befor


19/55

Futures

#dartlang

Future lengthyComp();

// Consume a Future

Future doLengthyComputation() {return lengthyComp().then((value) => print(value))

.catchError((e) => print(e));

}

// Produce a Future

Future queryDb(String sql) {

var completer = new Completer();

dbConnection.query(sql,

(results) => completer.complete(results),

(error) => completer.completeError(error));

return completer.future;

}


20/55

Futures

#dartlang

DartFuture costlyQuery();

Future expensiveSearch();

Future lengthyCalc();

// Chaining multiple Futures

costlyQuery()

.then((results) => expensiveSearch(results))

.then((results) => lengthyCalc(results))

.then((results) => print(results))

.catchError(print);

// Or...

costlyQuery()

.then(expensiveSea

.then(lengthyCalc)

.then(print)

.catchError(print)


21/55

Streams

#dartlang

Stream hugs();

hugs().listen((hug) => embrace(hug));

// Or

hugs()

.where((hug) => !hug.isBearHug)

.map((hug) => new Hug.bear(hug))

.listen(embrace,

onError: (e) => handleError(e),

onDone: () => smile());


22/55

Streams

#dartlang

element.onClick.listen(handleClick);

HttpServer.bind('127.0.0.1', port).then((HttpServer server) {

print('listening for connections on $port');

server.listen((HttpRequest request) {

fileHandler.onRequest(request);

});

},

onError: (error) => print("Error starting HTTP server: $error"));


23/55

#dartlang

import 'dart:html';

void main() {var button = new ButtonElement();

button.id = 'activate';

button.text = 'Click me';

button.classes.add('important');

button.onClick.listen((e) => window.alert('Clic

document.body.children.add(button);

}

Cleaned up DOM


24/55

#dartlang

import 'dart:html';

void main() {var button = new ButtonElement()

..id = 'activate'

..text = 'Click me'

..classes.add('important')

..onClick.listen((e) => window.alert('Clicked

document.body.children.add(button);

}

Method Cascades


25/55

#dartlang

// Traditionally:navigator.getMedia = ( navigator.getUserMedia ||

navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia);

navigator.getMedia (// constraints{video: true, audio: true},// successCallbackfunction(localMediaStream) {

var video = document.querySelector('video');video.src = window.URL.createObjectURL(localMediaStream);video.onloadedmetadata = function(e) {

// Do something with the video here.};

},// errorCallbackfunction(err) {console.log("The following error occured: " + err);}

);

Traditional async APIs


26/55

#dartlang

// With Dart:window.navigator.getUserMedia(audio:true, video:

.then((stream) {var video = new VideoElement()..autoplay = true..src = Url.createObjectUrl(stream)..onLoadedMetadata.listen((e) => /* ... */

document.body.append(video);

}).catchError(reportIssue);

Future-based APIs


27/55

#dartlang

var req = new XMLHttpRequest();

req.onreadystatechange=function() {

if (req.readyState == 4) {

if (req.status == 200) {

var elem = document.getElementById("myDiv");

elem.innerHTML = req.responseText;

} else {

console.log(req.status);

}

}

req.open("GET", "data.txt", true);

req.send();

Traditional XHR


28/55

#dartlang

HttpRequest.getString("data.txt")

.then((String result) {var elem = query("#myDiv");

elem.text = result;

})

.catchError(print);

Future-based (X)HR


29/55

#dartlang


30/55

#dartlang

Dart source

code

dart2js

JavaScript

source code

Dart Virtual Machine


31/55

JS: 31115

JS + gzip: 7175 JS + minification: 15644

JS + minification + gzip: 5184

Generated JS size

#dartlang

import 'dart:html';

main() {var elem = query('#fooelem.text = 'hello, wor

}


32/55

#dartlang


33/55

#dartlang

Dart source codedart2js

JavaScript source

code

Source map

Ch


34/55

#dartlang

Code com

Refactorin

Debugging

Static ana

D l d i


35/55

#dartlang

Dart also supported in:


36/55

#dartlang

js.scoped(() {

var maps = js.context.google.maps;

// Allocate a new JS Map

var myOptions = js.map({

'zoom': 9,

'mapTypeId': maps.MapTypeId.ROADMAP,

'center': new js.Proxy(maps.LatLng, 47.6097, -122.3331)

});

var map = new js.Proxy(maps.Map, query('#map_canvas'), myOptions)

Dart-JavaScript Interop

You decide:


37/55

#dartlang

Please fill out the TPS re 2012-10-03

I'm going to have to ask y

Reminder: fill out that TP 2012-10-04

It's been 24 hours...

...

You decide:


38/55

#dartlang

Web UI is a polyfill for Web Components, a

Dynamic data-driven views, live two-way data Observable objects and expressions Fast developer cycles Compiles to vanilla JavaScript and HTML

D t Bi di


39/55

#dartlang

Data Binding

C diti l


40/55

#dartlang

Conditionals

It ti


41/55

#dartlang

Iteration

C t El t Th


42/55

#dartlang

Custom Elements - The page

C stom Elements


43/55

#dartlang

Custom Elements -

Custom Elements The code


44/55

#dartlang

Custom Elements - The code

D ' b dl d lib i


45/55

Dart's bundled libraries

Core lib

HTML Crypto

JSON

Mirrors

UTF

#dartlang

Unit test and mo

Math Logging

URI

I18N

More

D ' i lib i


46/55

Dart's community libraries

MongoDB

Redis BOT

vector_math

game_loop

gl_enum

#dartlang

dbcrypt

UUID Stream web serv

Widgets

OAuth2 client

Many more

Active community involvement at pub.dartlang.org

B h k t ki d tl
http://pub.dartlang.org/http://www.dartlang.org/performance/


47/55

Benchmark tracking dartlang
http://www.dartlang.org/performance/


48/55

SIMD in Dart

New types

Float32x4 Float32x4List

Uint32x4

Composable operations

Arithmetic Logical

Comparisons

Reordering (shuffling)

4 Unsigned 32-bit Integer Numbers

List of Float32x4

4 IEEE-754 32-bit Floating Point Numbers

SIMD B h k


49/55

SIMD Benchmarks


50/55

Dart on the server

Pub

Testing

Isolates (concurrency)

Core libraries

Generics

Mirrors (aka reflection)

Many other language features

Lots more...

Topics not covered


51/55

Launch 1.0 this year

VM integration with Chrome

Better lang support for async (await?) (??)

Plans for the future


52/55

Resources

Web UI Intro

Web UI Spec Style guide

Idiomatic Dart

Improving the DOM

Dart Language Tour

All articles

+Dart on Google+

dartlang.org

Read more
http://google.com/+dartlanghttp://idiomatic.dart-lang.appspot.com/articles/http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.htmlhttps://www.dartlang.org/articles/idiomatic-dart/https://www.dartlang.org/articles/style-guide/http://www.dartlang.org/articles/dart-web-components/spec.htmlhttp://www.dartlang.org/http://google.com/+dartlanghttp://idiomatic.dart-lang.appspot.com/articles/http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.htmlhttps://www.dartlang.org/articles/improving-the-dom/https://www.dartlang.org/articles/idiomatic-dart/https://www.dartlang.org/articles/style-guide/http://www.dartlang.org/articles/dart-web-components/spec.htmlhttp://www.dartlang.org/articles/dart-web-components/


53/55

#dartlang

Read more


54/55

Thank You!

Find us at dartlang.org

Dart is more ambitio s


55/55

Tree shaking

Getters and setters (though I presume

TypeScript will get those eventually)

Operator overloading

Real block scope, no hoisting, no IIFEs

A native VM

Sane equality semantics

No weird implicit conversion craziness

Lexically bound this everywhere

Dart is more ambitious

#d tl

Mixins

Annotations

An import system

User-defined subscript op

Generics, with reification

Mirrors

Better collection classes

A cleaner DOM API

dart presentation to svforum

Documents