#dartlang

2014-02-01j832.com

Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/

#dartlang

Me

IowaMicrosoftFreelance

DartGoogle

j832.com

#dartlang

✔ Improved productivity✔ Increased performance

#dartlang

Compile to JavaScript, runs across the modern web

#dartlang

#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

main() => print('Hello, World!');

#dartlang

Clean semantics and behavior

#dartlang

Clean semantics and behavior

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

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

One of these things is not like the other

Object

Persistable

Hug

Hug is notis-a Persistable

Don't pollute your

inheritance tree!

#dartlang

Don't inherit, mixin!

Object

PersistableHug Mixin

#dartlang

Mixinsabstract class Persistable {

save() { ... }

load() { ... }

toJson();

}

class Hug extends Object 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

Context switching considered harmful,Iterate quickly

#dartlang

DemoPop, Pop, Win!

#dartlang

#dartlang

700+ packages

#dartlang

DemoNew Dart Project + Packages

#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

#dartlang

#dartlang

#dartlang

#dartlang

#dartlang

Old 'n busted New hotness<messages> <message> <subject> Please fill out the TPS report </subject> <sent>2012-10-03</sent> <summary> I'm going to have to ask you to come in... </summary> </message> <message> <subject> Reminder: fill out that TPS report! </subject> <sent>2012-10-04</sent> <summary> It's been 24 hours... </summary> </message> ...</messages>

#dartlang

<custom-element>

Structure Behavior Styles<div> <input> <p> <span></span> </p></div>

tag.verifyAccount();<style> p { color: red; }</style>

Encapsulated

#dartlang

Reusable

Custom Element

HTML Page

import import import

HTML Page HTML Page

#dartlang

Data binding

Data model DOM Nodes

Data model DOM Nodes

#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

<div my-controller>

<div class="well">

<click-counter count="{{ctrl.count}}"></click-counter>

</div>

</div>

Angular and Polymer together

Polymer element

Angular controller

#dartlang

Dart in production

#dartlang

"Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap

#dartlang

"Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage

#dartlang

"Dart offers a sane and consistent development experience for modern web applications." - Blossom

#dartlang

"The source code for this game (Escape) is 20% smaller compared to the ActionScript version (69.6 KB vs 86.5 KB). The port took only 6 hours." -- Author of StageXL

#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

Ready to get started? Write a Dart app!

dartlang.org/codelabs/darrrt/

#dartlang

Dart - for the modern web

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

#dartlang

Thanks! j832.com