Upload
codecore
View
1.844
Download
2
Embed Size (px)
DESCRIPTION
Kevin Moore has worn many hats. Program manager. Project manager. People manager. Evangelist. Software engineer. He started programming at 9 and was building web software professionally at 15. Spent 6 years at Microsoft working on Microsoft Windows and Windows Presentation Foundation as a Program Manager. He became a recognized expert in component design and implementation for user interfaces and provided software consulting and freelancing services targeting Open Source web technologies. He is now the Dart program manager at Google. He ran a workshop on DART at CodeCore for CodeCore's Community Week. For more educational tips and videos, visit CodeCore's blog at http://codecore.ca/news/
Citation preview
#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