Dart Flight School SF: Intro to Dart

An introduction to the Dart language and SDK. Presented at the Dart Flight School event in SF.

Transcript

1. Introduction Feb 22, 2014
2. Dan Schultz danschultz danschultzonline Lead frontend engineer Mixbook
3. montagebook.com
4. MY BACKGROUND
6. BUT TODAY… THE WEB IS A DIFFERENT WORLD
7. OPEN IS AWESOME!
8. BUT IT’S LACKING
9. ? DART JAVASCRIPT
10. JAVASCRIPT
11. LIBRARY OVERLOAD
13. NO CUSTOM TYPES
14. KEEP ON TRUCKIN’
15. 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); } };
16. INADEQUATE FOR BUILDING LARGE WEB APPS
17. DART
18. • Structured language • Libraries • Tools • VM
19. TARGETS ALL MAJOR BROWSERS
20. LANGUAGE TOUR
21. 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
22. 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
23. 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
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 FAMILIAR 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 TERSE 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 OPERATOR OVERLOADING 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 ONE LINE FUNCTIONS 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 STRING INTERPOLATION FA M IL IA R
29. LEXICAL SCOPING FA M IL IA R class CustomButton { Element _hitArea; ! CustomButton() { _hitArea.onClick.listen((event) { this.sayHi(); }); } ! void sayHi() { print("Hi!"); } }
30. MIXINS N E W IS H OBSERVABLE Don’t pollute your inheritance trees PERSON USER Wait, dude.. am I really a Persistable? PERSISTABLE
31. MIXINS N E W IS H PERSON Don’t pollute your inheritance trees PERSISTABLE USER MIXIN OBSERVABLE
32. MIXINS N E W IS H Don’t pollute your inheritance trees class Persistable { save() { … } load() { … } toJson() { … } } class } class Observable { Stream get changes { … } ! void changed(property, value) { … } } void var user }
33. MIXINS N E W IS H Don’t pollute your inheritance trees class User extends Person with Persistable, Observable { } void var user } APPLY THE MIXIN class save() { … } load() toJson() } class Stream get changes ! }
34. MIXINS N E W IS H Don’t pollute your inheritance trees class User extends Person with Persistable, Observable { } void main() { var user = new User(); user.save(); } APPLY THE MIXIN USE THE MIXIN’S METHODS class save() { … } load() toJson() } class Stream get changes ! }
35. ANNOTATIONS N E W IS H METADATA
36. ANNOTATIONS N E W IS H WARNING
37. ANNOTATIONS N E W IS H Create your own! class User extends Person with Persistable, Observable { @bindable String name; } FIND TAGS USING REFLECTION
38. CORE LIBRARIES
39. CORE LIBRARIES Better interoperability between packages PERSISTENCE.dart import 'dart:async'; ! class Persistable { Future save() { … } } S3.dart import ‘dart:async'; ! class S3Object { Future store() { … } }
40. CORE LIBRARIES DART SDK ASYNC COLLECTIONS CORE HTML IO JS INTEROP MIRRORS …
41. ASYNC FUTURES AND STREAMS
42. ASYNC Nesting callbacks, yuck! api.getCurrentUser((user) { api.loadUserProjects(user.id, (projects) { api.loadProject(projects.first.id, (project) { showProject(project); }, printError); }, printError); }, printError);
43. ASYNC Futures: I promise you a value api.getCurrentUser() .then((user) => api.loadUserProjects(user.id)) .then((projects) => api.loadProject(projects.first.id)) .then((project) => showProject(project)) .catchError((error) => printError(error));
44. ASYNC Streams: A series of async events • Clicks from a button • DOM events • Rows loaded from a database • Bytes from a file
45. ASYNC Streams: A series of async events document.onKeyPress .takeWhile((event) => event.keyCode != 13) .map((event) => new String.fromCharCode(event.keyCode)) .toList() // Returns a Future of characters .then((keys) => print(keys.join(",")));
46. HTML Out of the box jQuery-esque APIs
47. HTML Event listeners are Streams document.onClick.listen((event) => print(event.client)); document.onKeyPress.listen((event) => print(event.keyCode));
48. HTML Querying Elements elem.querySelector('#foo'); elem.querySelector('.foo'); elem.querySelector('div'); elem.querySelectorAll('#foo'); elem.querySelectorAll('.foo'); elem.querySelectorAll('div'); Single Element Element List
49. HTML XMLHttpRequest = HttpRequest HttpRequest.request("/users", method: "POST", sendData: user.toJson(), requestHeaders: {'Content-Type': 'application/json'}) .then((request) { users.add(JSON.decode(request.responseText)); }) .catchError((error) => print(error));
50. dart2js
51. ALL MAJOR BROWSERS!
52. PERFORMANT JAVASCRIPT
53. TREE SHAKING Eliminate unused code main() foo() bar() Library funcX() funcY() Imports Calls
54. TREE SHAKING Eliminate unused code main() foo() bar() Library funcX() funcY() Imports Calls
55. TREE SHAKING Eliminate unused code main() foo() bar() Library funcX() funcY() Imports Calls
56. LESS CODE DELIVERED TO THE CLIENT
57. DART VM
58. SPEED ENABLES APPLICATIONS
59. MORE STRUCTURE BETTER PERFORMANCE
60. JS PERFORMANCE IS UNPREDICATBLE http://www.youtube.com/watch?v=huawCRlo9H4
61. SNAPSHOTS: 10X FASTER STARTUP PERFORMANCE
62. LESS COMPILATION QUICKER EDIT/REFRESH DEVELOPMENT
63. THANK YOU
64. Q&A