#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
Recommended
