Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore
-
Upload
codecore -
Category
Technology
-
view
1.844 -
download
2
description
Transcript of Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore
![Page 1: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/1.jpg)
#dartlang
2014-02-01j832.com
Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/
![Page 2: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/2.jpg)
#dartlang
Me
IowaMicrosoftFreelance
DartGoogle
j832.com
![Page 3: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/3.jpg)
#dartlang
✔ Improved productivity✔ Increased performance
![Page 4: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/4.jpg)
#dartlang
Compile to JavaScript, runs across the modern web
![Page 5: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/5.jpg)
#dartlang
![Page 6: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/6.jpg)
#dartlang
Run Dart on the server with the Dart VM
![Page 7: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/7.jpg)
#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"
![Page 8: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/8.jpg)
#dartlang
Unit test
Dart SDK
Polymer
Intl
Pack
ages
"Things are consistent and
clear."
![Page 9: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/9.jpg)
#dartlang
Apps start small, but grow and scale
![Page 10: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/10.jpg)
#dartlang
Simple syntax, ceremony freeclass Hug { Familiar
![Page 11: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/11.jpg)
#dartlang
Simple syntax, ceremony freeclass Hug {
num strength;
Hug(this.strength); Terse
![Page 12: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/12.jpg)
#dartlang
Simple syntax, ceremony freeclass Hug {
num strength;
Hug(this.strength);
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
Operator overriding
![Page 13: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/13.jpg)
#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
![Page 14: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/14.jpg)
#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
![Page 15: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/15.jpg)
#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
![Page 16: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/16.jpg)
#dartlang
main() => print('Hello, World!');
![Page 17: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/17.jpg)
#dartlang
Clean semantics and behavior
![Page 18: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/18.jpg)
#dartlang
Clean semantics and behavior
● Only true is truthy● There is no undefined, only null● No type coercion with ==, +
Examples:
![Page 19: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/19.jpg)
#dartlang
Missing getter?
"hello".missing // ??
Class 'String' has no instance getter 'missing'.
NoSuchMethodError : method not found: 'missing'Receiver: "hello"Arguments: []
Logical
![Page 20: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/20.jpg)
#dartlang
String compared to number?
'hello' > 1 // ??
Class 'String' has no instance method '>'.
Logical
![Page 21: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/21.jpg)
#dartlang
Variable scope?
var foo = 'top-level';
main() {
if (true) { var foo = 'inside'; }
print(foo); // ?? What will this print?
}
top-level
Logical
No hoisting
![Page 22: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/22.jpg)
#dartlang
Scope of this?
class AwesomeButton {
AwesomeButton(button) {
button.onClick.listen((Event e) => this.atomicDinosaurRock());
}
atomicDinosaurRock() {
/* ... */
}
}
Lexical this
![Page 23: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/23.jpg)
#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) {
// ...
}
![Page 24: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/24.jpg)
#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
![Page 25: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/25.jpg)
#dartlang
Method cascadesvar button = new ButtonElement()
..id = 'fancy'
..text = 'Click Point'
..classes.add('important')
..onClick.listen((e) => addTopHat());
parentElement.children.add(button);
![Page 26: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/26.jpg)
#dartlang
Inline initialization
parentElement.children.add(
new ButtonElement()..text = 'Click Point');
![Page 27: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/27.jpg)
#dartlang
One of these things is not like the other
Object
Persistable
Hug
Hug is notis-a Persistable
Don't pollute your
inheritance tree!
![Page 28: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/28.jpg)
#dartlang
Don't inherit, mixin!
Object
PersistableHug Mixin
![Page 29: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/29.jpg)
#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.
![Page 30: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/30.jpg)
#dartlang
Context switching considered harmful,Iterate quickly
![Page 31: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/31.jpg)
#dartlang
DemoPop, Pop, Win!
![Page 32: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/32.jpg)
#dartlang
![Page 33: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/33.jpg)
#dartlang
700+ packages
![Page 34: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/34.jpg)
#dartlang
DemoNew Dart Project + Packages
![Page 35: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/35.jpg)
#dartlang
Compile Dart to JavaScript with dart2js
![Page 36: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/36.jpg)
#dartlang
main Library
baz foo bar boo
imports
callsbaz
main foo bar
Tree shaking
dart2js
![Page 37: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/37.jpg)
#dartlang
Our challenge ...
clean semantics and unsurprising behaviorwithout
extra checks when compiled to JavaScript
![Page 38: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/38.jpg)
#dartlang
![Page 39: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/39.jpg)
#dartlang
![Page 40: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/40.jpg)
#dartlang
![Page 41: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/41.jpg)
#dartlang
![Page 42: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/42.jpg)
#dartlang
![Page 43: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/43.jpg)
#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>
![Page 44: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/44.jpg)
#dartlang
<custom-element>
Structure Behavior Styles<div> <input> <p> <span></span> </p></div>
tag.verifyAccount();<style> p { color: red; }</style>
Encapsulated
![Page 45: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/45.jpg)
#dartlang
Reusable
Custom Element
HTML Page
import import import
HTML Page HTML Page
![Page 46: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/46.jpg)
#dartlang
Data binding
Data model DOM Nodes
Data model DOM Nodes
![Page 47: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/47.jpg)
#dartlang
ShadowDOM
HTML Imports
<template>
Custom ElementsNew web
specifications
Future proof
![Page 48: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/48.jpg)
#dartlang
Polymer.dart(today)
Using web components today
![Page 49: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/49.jpg)
#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>
![Page 50: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/50.jpg)
#dartlang
Angular is ported to Dart!
![Page 51: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/51.jpg)
#dartlang
<div my-controller>
<div class="well">
<click-counter count="{{ctrl.count}}"></click-counter>
</div>
</div>
Angular and Polymer together
Polymer element
Angular controller
![Page 52: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/52.jpg)
#dartlang
Dart in production
![Page 53: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/53.jpg)
#dartlang
"Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap
![Page 54: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/54.jpg)
#dartlang
"Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage
![Page 55: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/55.jpg)
#dartlang
"Dart offers a sane and consistent development experience for modern web applications." - Blossom
![Page 56: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/56.jpg)
#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
![Page 57: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/57.jpg)
#dartlang#dartlang
Export Flash movies/games to Dart from Flash Pro
![Page 58: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/58.jpg)
#dartlang
"We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google
![Page 59: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/59.jpg)
#dartlang
TC52 to standardize Dart language
![Page 60: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/60.jpg)
#dartlang
Ready to get started? Write a Dart app!
dartlang.org/codelabs/darrrt/
![Page 61: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/61.jpg)
#dartlang
Dart - for the modern web
● Platform you can use today● Easy to get started - dartlang.org● Compiles to JavaScript
![Page 62: Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore](https://reader034.fdocuments.us/reader034/viewer/2022052618/554cc2c3b4c905a5208b472a/html5/thumbnails/62.jpg)
#dartlang
Thanks! j832.com