Slide 1

Slide 1 text

It’s awesome Apr 10, 2014

Slide 2

Slide 2 text

Dan Schultz danschultz danschultzonline Lead web engineer Mixbook dan_schultz

Slide 3

Slide 3 text

montagebook.com

Slide 4

Slide 4 text

BUILDING LARGE WEB APPS TODAY IS HARD

Slide 5

Slide 5 text

SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior

Slide 8

Slide 8 text

SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior

Slide 9

Slide 9 text

SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior

Slide 10

Slide 10 text

SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior

Slide 11

Slide 11 text

http://zero.milosz.ca/ MANY TYPES OF TRUTHY [0] == ‘0’ === true [0] == [0] === false

Slide 12

Slide 12 text

WHA?!

Slide 13

Slide 13 text

ACCESSING NON-EXISTENT PROPERTIES It’ll run but doesn’t do the right thing var request = new XMLHttpRequest(); ! request.onreadystatechange = function() { if (request.readystate == 4) { console.log('Request done: ' + request.responseText); } };

Slide 14

Slide 14 text

KEEP ON TRUCKIN’

Slide 15

Slide 15 text

• CSS layout • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior To the rescue!

Slide 16

Slide 16 text

DART

Slide 17

Slide 17 text

• Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!

Slide 18

Slide 18 text

• Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!

Slide 19

Slide 19 text

• Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!

Slide 20

Slide 20 text

• Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!

Slide 21

Slide 21 text

• Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!

Slide 22

Slide 22 text

LANGUAGE TOUR

Slide 23

Slide 23 text

LANGUAGE TOUR • Easy to learn • Class based, single inheritance • Optional typing • Familiar

Slide 24

Slide 24 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR FA M IL IA R

Slide 25

Slide 25 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR NAMESPACES! FA M IL IA R

Slide 26

Slide 26 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR CODE IMPORTS! FA M IL IA R

Slide 27

Slide 27 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR FAMILIAR FA M IL IA R

Slide 28

Slide 28 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR TERSE FA M IL IA R

Slide 29

Slide 29 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR OPERATOR OVERLOADING FA M IL IA R

Slide 30

Slide 30 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR ONE LINE FUNCTIONS FA M IL IA R

Slide 31

Slide 31 text

library myApp.geom; ! import "package:hash/hash.dart"; ! class Point { num x; num y; ! Point(this.x, this.y); ! Point operator +(Point other) { return new Point(x + other.x, y + other.y); } String toString() => "{x: $x, y: $y}"; } LANGUAGE TOUR STRING INTERPOLATION FA M IL IA R

Slide 32

Slide 32 text

LEXICAL SCOPING FA M IL IA R class CustomButton { Element _hitArea; ! CustomButton() { _hitArea.onClick.listen((event) { this.sayHi(); }); } ! void sayHi() { print("Hi!"); } }

Slide 33

Slide 33 text

dart2js

Slide 34

Slide 34 text

TARGETS MODERN BROWSERS

Slide 35

Slide 35 text

PERFORMANT JAVASCRIPT www.dartlang.org/performance

Slide 36

Slide 36 text

TREE SHAKING Eliminate unused code main() foo() bar() Library funcX() funcY() Imports Calls

Slide 37

Slide 37 text

WEB COMPONENTS with Polymer.dart

Slide 38

Slide 38 text

• Create you own HTML elements • Encapsulate behavior and styling • Reusable, shareable WEB COMPONENTS

Slide 39

Slide 39 text

! ! ! ! CUSTOM ELEMENTS HTML @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART

Slide 40

Slide 40 text

! ! TEMPLATES HTML @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART

Slide 41

Slide 41 text

Click me ! EVENT HANDLING HTML @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART

Slide 42

Slide 42 text

Click me You clicked the button {{count}} times DATA BINDING @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } HTML DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART @CustomTag('click-counter') class ClickCounter extends PolymerElement { @published int count = 0; ! void increment() { count++; } } DART

Slide 43

Slide 43 text

CUSTOM ELEMENTS HTML IMPORT THE COMPONENT USE THE ELEMENT

Slide 44

Slide 44 text

THANK YOU

Slide 45

Slide 45 text

• dartlang.org • polymer-project.org • montagebook.com • mixbook.com Q&A