Mixbook Hackathon: Dart is Awesome!

1. It’s awesome Apr 10, 2014
2. Dan Schultz danschultz danschultzonline Lead web engineer Mixbook dan_schultz
3. montagebook.com
4. BUILDING LARGE WEB APPS TODAY IS HARD
5. SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior
7. SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior
8. SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior
9. SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior
10. SOME ISSUES… • CSS layout is painful • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior
11. http://zero.milosz.ca/ MANY TYPES OF TRUTHY [0] == ‘0’ === true [0] == [0] === false
12. WHA?!
13. 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); } };
14. KEEP ON TRUCKIN’
15. • CSS layout • Polyfills for browser differences • Inconsistent performance • No types, namespaces, standard libraries • Quirky behavior To the rescue!
16. DART
17. • Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!
18. • Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!
19. • Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!
20. • Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!
21. • Structured language • Standard libraries • Tools • Package manager • Fast VM Batteries included!
22. LANGUAGE TOUR
23. LANGUAGE TOUR • Easy to learn • Class based, single inheritance • Optional typing • Familiar
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. LEXICAL SCOPING FA M IL IA R class CustomButton { Element _hitArea; ! CustomButton() { _hitArea.onClick.listen((event) { this.sayHi(); }); } ! void sayHi() { print("Hi!"); } }
33. dart2js
34. TARGETS MODERN BROWSERS
35. PERFORMANT JAVASCRIPT www.dartlang.org/performance
36. TREE SHAKING Eliminate unused code main() foo() bar() Library funcX() funcY() Imports Calls
37. WEB COMPONENTS with Polymer.dart
38. • Create you own HTML elements • Encapsulate behavior and styling • Reusable, shareable WEB COMPONENTS
39. <polymer-element name="click-counter" attributes="count"> ! ! ! ! <script type="application/dart" src="clickcounter.dart"></script> </polymer-element> 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
40. <polymer-element name="click-counter" attributes="count"> <template> ! ! </template> <script type="application/dart" src="clickcounter.dart"></script> </polymer-element> 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
41. <polymer-element name="click-counter" attributes="count"> <template> <button on-click="{{increment}}">Click me</button> ! </template> <script type="application/dart" src="clickcounter.dart"></script> </polymer-element> 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
42. <polymer-element name="click-counter" attributes="count"> <template> <button on-click="{{increment}}">Click me</button> <span>You clicked the button {{count}} times</span> </template> <script type="application/dart" src="clickcounter.dart"></script> </polymer-element> 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
43. CUSTOM ELEMENTS <html> <head> <link rel="import" href="clickcounter.html"> </head> <body> <click-counter count="5"></click-counter> </body> </html> HTML IMPORT THE COMPONENT USE THE ELEMENT
44. THANK YOU
45. • dartlang.org • polymer-project.org • montagebook.com • mixbook.com Q&A