Dart - en ny platform til webudvikling af Rico Wind, Google

#dartlang

#dartlang

Object oriented languageOptional typingSingle-threaded event modelIsolates for concurrency

Compiles to JavaScriptNative VM

✔ Improved productivity✔ Increased performance

#dartlang

Use the tools you already know

#dartlang

Compile to JavaScript, runs across the modern web

#dartlang

Run Dart on the server with the Dart VM

#dartlang

require.js

Backbone

Backbone Marionette

jQuery

Modernizr

moment.js

dest templates

PhantomJSJasmine

Docs

Docs

Docs

Docs

Docs

Docs

Docs

Docs

Docs

"I just want to write web

apps!"

"Hi, I want to build a web

app"

#dartlang

Unit test

Dart SDK

Polymer

Intl

Pack

ages

"Things are consistent and

clear."

#dartlang

Apps start small, but grow and scale

#dartlang

Simple syntax, ceremony freeclass Hug { Familiar

#dartlang

Simple syntax, ceremony freeclass Hug {

num strength;

Hug(this.strength); Terse

#dartlang

Simple syntax, ceremony freeclass Hug {

num strength;

Hug(this.strength);

Hug operator +(Hug other) {

return new Hug(strength + other.strength);

}

Operator overriding

#dartlang

Simple syntax, ceremony freeclass Hug {

num strength;

Hug(this.strength);

Hug operator +(Hug other) {

return new Hug(strength + other.strength);

}

void patBack({int hands: 1}) {

// ...

}

Named, optional params w/ default value

#dartlang

Simple syntax, ceremony free

// ...

Hug operator +(Hug other) {

return new Hug(strength + other.strength);

}

void patBack({int hands: 1}) {

// ...

}

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

}

One-line function

#dartlang

Simple syntax, ceremony free

// ...

Hug operator +(Hug other) {

return new Hug(strength + other.strength);

}

void patBack({int hands: 1}) {

// ...

}

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

}

String Interpolation

#dartlang

Clean semantics and behavior

#dartlang

Clean semantics and behavior

● Only true is truthy● There is no undefined, only null● No type coercion with ==, +

No invisible magic

Examples:

#dartlang

Missing getter?

"hello".missing // ??

Class 'String' has no instance getter 'missing'.

NoSuchMethodError : method not found: 'missing'Receiver: "hello"Arguments: []

Logical

#dartlang

String compared to number?

'hello' > 1 // ??

Class 'String' has no instance method '>'.

Logical

#dartlang

Variable scope?

var foo = 'top-level';

main() {

if (true) { var foo = 'inside'; }

print(foo); // ?? What will this print?

}

top-level

Logical

No hoisting

#dartlang

Scope of this?

class AwesomeButton {

AwesomeButton(button) {

button.onClick.listen((Event e) => this.atomicDinosaurRock());

}

atomicDinosaurRock() {

/* ... */

}

}

Lexical this

#dartlang

Scalable structure

Functions Classes

Libraries

Packages

Mixins Interfaces

library games;

import 'dart:math';

import 'players.dart';

class Darts {

// ...

}

class Bowling {

// ...

}

Player findOpponent(int skillLevel) {

// ...

}

#dartlang

var button = new ButtonElement();

button.id = 'fancy';

button.text = 'Click Point';

button.classes.add('important');

button.onClick.listen((e) => addTopHat());

parentElement.children.add(button);

Yikes! Button is repeated 6 times!

Too many buttons

#dartlang

Method cascadesvar button = new ButtonElement()

..id = 'fancy'

..text = 'Click Point'

..classes.add('important')

..onClick.listen((e) => addTopHat());

parentElement.children.add(button);

#dartlang

Inline initialization

parentElement.children.add(

new ButtonElement()..text = 'Click Point');

#dartlang

Persistable

One of these things is not like the other

Greeting

Hug

Hug is notis-a Persistable

Don't pollute your

inheritance tree!

#dartlang

Don't inherit, mixin!

Greeting

PersistableHug Mixin

#dartlang

Mixinsabstract class Persistable {

save() { ... }

load() { ... }

toJson();

}

class Hug extends Greeting with Persistable {

Map toJson() => {'strength':10};

}

main() {

var embrace = new Hug();

embrace.save();

}

Extend object & no constructors? You can be a mixin!

Apply the mixin.

Use methods from mixin.

#dartlang

Batteries included

● dart:core● dart:math● dart:async● dart:convert● dart:isolates● dart:mirrors● dart:typed_data

Browser:● dart:html● dart:web_gl● dart:svgServer-side:● dart:io

#dartlang

dart:async - asynchronous made simple

● No more random callback nightmare

● dart:async○ Future○ Stream

#dartlang

Futures

var future = new File(‘foo.txt’).readAsString();

future.then((content) {

// Read the file into `content`;

}).catchError((error) {

// Failed to read the file

});

computePi();

#dartlang

import 'dart:io';import 'dart:async';import 'dart:convert';

Future<String> maybeGetPub() { var file = new File('foo.txt'); return file.exists().then((exists) { return file.readAsString(); }).then((content) { if (content.contains('bard')) { return new HttpClient().getUrl(Uri.parse('http://pub.dartlang.org')); } else { return new HttpClient().getUrl(Uri.parse('http://golang.org')); } }).then((request) { return request.close(); // could send data first }).then((response) { var completer = new Completer(); var content = ""; response.transform(UTF8.decoder) .listen((data) => content = "$content$data", onDone: () => completer.complete(content)); return completer.future; }).catchError((error) { return error; // Failed to read the file });}

Future<String> getServedString(String content) { if (content.contains('dartlang.org')) return new Future.value("Served"); return Process.run('cat', ['foo.txt']) .then((result) => "No beer: ${result.stdout}");}

void main() { maybeGetPub().then(getServedString).then(print);}

#dartlang

Context switching considered harmful,Iterate quickly

#dartlang

#dartlang

#dartlang

670+ packages

#dartlang

#dartlang

Compile Dart to JavaScript with dart2js

#dartlang

main Library

baz foo bar boo

imports

callsbaz

main foo bar

Tree shaking

dart2js

#dartlang

Our challenge ...

clean semantics and unsurprising behaviorwithout

extra checks when compiled to JavaScript

#dartlang

DeltaBlueaddConstraintsConsumingTo(v, coll) {

var determining = v.determinedBy;

for (var i = 0; i < v.constraints.length; i++) {

var c = v.constraints[i];

if (c != determining && c.isSatisfied()) {

coll.add(c);

}

}

}

#dartlang

addConstraintsConsumingTo$2: function(v, coll) {

var determining, t1, t2, t3, i, t4, c;

determining = v.get$determinedBy();

t1 = v.constraints;

t2 = getInterceptor$as(t1);

t3 = getInterceptor$a(coll);

i = 0;

while (true) {

t4 = t2.get$length(t1);

if (typeof t4 !== "number") throw new IllegalArgumentError(t4);

if (!(i < t4)) break;

c = t2.$index(t1, i);

if ((c == null ? determining != null : c !== determining) && c.isSatisfied$0() === true) {

t3.add$1(coll, c);

}

++i;

}

}

Simply not good enough!

DeltaBlue: Unoptimized

#dartlang

Global optimizations

● Dart is structured and allows whole program analysis

● Understanding your program’s structure enables:○ Code navigation and great refactoring tools○ Global compile-time optimizations

#dartlang

DeltaBlue: Fully optimizedaddConstraintsConsumingTo$2: function(v, coll) {

var determining, t1, i, c;

determining = v.determinedBy;

for (t1 = v.constraints, i = 0; i < t1.length; ++i) {

c = t1[i];

if (c !== determining && c.isSatisfied$0()) {

coll.push(c);

}

}

}

262 characters, same semantics

#dartlang

Dart VM

● Up to 2x speed of JavaScript○ Well defined classes○ No hoisting, no magic

● 10x faster potential startup time compared to JavaScript○ Snapshots cache○ SDK snapshot

● Runs serverside○ Complete IO library (HTTP, Process, File System)

#dartlang

#dartlang

ShadowDOM

HTML Imports

<template>

Custom ElementsNew web

specifications

Future proof

#dartlang

Polymer.dart(today)

Using web components today

#dartlang

Custom elements everywhere!<body>

<persistable-db dbname="game" storename="sologames"></persistable-db>

<game-assets></game-assets>

<game-app></game-app>

<google-signin clientId="250963735330.apps.googleusercontent.com"

signInMsg="Please sign in"></google-signin>

#dartlang

Angular is ported to Dart!

#dartlang

Dart in production

#dartlang#dartlang

Export Flash movies/games to Dart from Flash Pro

#dartlang

"We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google

#dartlang

TC52 to standardize Dart language

#dartlang

Dart - for the modern web

● Platform you can use today● Easy to get started - dartlang.org● Compiles to JavaScript