Structured Web Apps with Google Dart

An introduction to the Dart platform for modern web app development.

Transcript

1. Structured Web Apps with
2. AGENDA ►  What is Dart? ►  How Dart Works ►  Dart Features ►  Language Tour ►  CASE DEMOS ►  Questions
3. WHAT IS DART? “...an open-source, batteries-included developer platform for building HTML5 web apps.” dartlang.org
4. BY GOOGLE Gilad Bracha Software Engineer Lars Bak Computer Programmer ►  HotSpot  VM   ►  V8  JavaScript  Engine   ►  Dart  VM   ►  Newspeak  Language   ►  Java  Language  Spec   ►  Dart  Language  Spec  
5. TYPICAL WEB APP SCENARIO
6. “Hey, I want a web app”
7. “Hey, I want a web app” Backbone.JS
8. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js”
9. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS
10. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery
11. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...”
12. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS
13. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr
14. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI
15. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI Leaflet.JS
16. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI Leaflet.JS Jasmine BDD
17. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI Leaflet.JS Jasmine BDD Raphael.JS
18. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI Leaflet.JS Jasmine BDD Raphael.JS DOCS DOCS DOCS DOCS DOCS DOCS DOCS DOCS DOCS
19. “Hey, I want a web app” Backbone.JS “Backbone’s only hard dependency is Underscore.js” Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr jQueryUI Leaflet.JS Jasmine BDD Raphael.JS DOCS DOCS DOCS DOCS DOCS DOCS DOCS DOCS DOCS
20. CONSISTENT AND CLEAR DART SDK Packages MVC Web UI Unit test
21. OFFICIAL ECMA STANDARD ecma-international.org/publications/standards/Ecma-408.htm
22. DART BUNDLE IDE Dartium Dart SDK    
23. DART BUNDLE IDE Dartium Dart SDK ►  Eclipse-based editor ►  Supports code completion, static analysis, Checked/ Production Mode etc… ►  Plugins for third-party IDE and Text-Editors    
24. DART BUNDLE IDE Dartium Dart SDK ►  Eclipse-based editor ►  Supports code completion, static analysis, Checked/ Production Mode etc… ►  Plugins for third-party IDE and Text-Editors ►  Custom build of Chromium with the Dart VM    
25. DART BUNDLE     IDE Dartium Dart SDK ►  Eclipse-based editor ►  Supports code completion, static analysis, Checked/ Production Mode etc… ►  Plugins for third-party IDE and Text-Editors ►  Custom build of Chromium with the Dart VM ►  Dart VM, Core Libraries and Command line tools
26. COMMAND LINE TOOLS dart    
27. COMMAND LINE TOOLS     dart dartanalyzer
28. COMMAND LINE TOOLS     dart dartanalyzer docgen
29. COMMAND LINE TOOLS     dart dartanalyzer docgen pub
30. COMMAND LINE TOOLS dart dartanalyzer docgen pub dart2js    
31. HOW DART WORKS index.dart
32. HOW DART WORKS index.dart standalone or browser Dart Virtual Machine
33. HOW DART WORKS index.dart Dart-to-JavaScript compiler standalone or browser Dart Virtual Machine
34. HOW DART WORKS index.dart Dart Virtual Machine Dart-to-JavaScript compiler index.dart.js standalone or browser
35. FOR MODERN BROWSERS
36. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application
37. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application imports
38. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application calls imports
39. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application calls calls imports
40. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application calls calls imports dart2js
41. TREE-SHAKING COMPILER main   Library fn()   fn()   fn()   fn()   Source Application calls calls imports main   fn()   fn()   calls calls dart2js
42. BENCHMARKS dart dart2js js dartlang.org/performance
43. WHO USES DART? dartlang.org/community/who-uses-dart.html
44. ADOBE toolki@ordart.github.io  
45. blossom.io   BLOSSOM
46. soundtrap.com   SOUNDTRAP
47. angulardart.org   ANGULAR
48. DART FEATURES
49. ►  Object-oriented language ►  Single-threaded ►  Asynchronous Programming with Futures/Streams ►  Concurrency with Isolates ►  Lexical Scoping ►  Modularity and Scalability
50. LANGUAGE TOUR
51. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth);! }! ! void main() {! !Person person = new Person(“Joe Bloggs”, 1975);! !print(person.name);! }! !!
52. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth);! }! ! void main() {! !Person person = new Person(“Joe Bloggs”, 1975);! !print(person.name);! }! !! Shorthand Constructors
53. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth);! !Person.withDefaults() : this(‘No name’, 1768);! }! ! void main() {! !Person person = new Person.withDefaults();! !print(person.name);! }! !! Named Constructors
54. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth);! !Person.withDefaults() : this(‘No name’, 1768);! }! ! void main() {! !Person person = new Person.withDefaults();! !print(person.name);! }! !! Initialised defaults
55. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth, {String nationality: ‘unknown’});! !Person.withDefaults() : this(‘No name’, 1768);! }! ! void main() {! !Person person = new Person(“Joe Bloggs”, 1975, nationality: ‘UK’);! !print(person.name);! }! !! Optional named parameters
56. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth, [String nationality = ‘unknown’]);! !Person.withDefaults() : this(‘No name’, 1768);! }! ! void main() {! !Person person = new Person(“Joe Bloggs”, 1975, ‘UK’);! !print(person.name);! }! !! Optional positional parameters
57. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth, [String nationality = ‘unknown’]);! !Person.withDefaults() : this(‘No name’, 1768);! !! !Person operator +(Person other) {! ! !return new Person(name + ‘ and ‘ + other.name, 9999);! !}! } !! Operator overrides
58. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth, [String nationality = ‘unknown’]);! !Person.withDefaults() : this(‘No name’, 1768);! !! !Person operator +(Person other) {! ! !return new Person(name + ‘ and ‘ + other.name, 9999);! !}! ! !speak() => print(“$name is speaking”);! } !! Shorthand functions
59. class Person {! !String name;! !int yearOfBirth;! ! !Person(this.name, this.yearOfBirth, [String nationality = ‘unknown’]);! !Person.withDefaults() : this(‘No name’, 1768);! !! !Person operator +(Person other) {! ! !return new Person(name + ‘ and ‘ + other.name, 9999);! !}! ! !speak() => print(“$name is speaking”);! } !! String interpolation
60. class Person {! !String _name;! !int _yearOfBirth;! ! !Person(this._name, this._yearOfBirth);! !Person.withDefaults() : this(‘No name’, 1768);! ! !Person operator +(Person other) {! ! !return new Person(name + ‘ and ‘ + other.name, 9999);! !}! ! !speak() => print(“$_name is speaking”);! ! !String get name => _name;! ! set name(String value) => _name = value;! } !! getters and setters
61. METHOD CASCADES
62. import “dart:html”;! ! void main() {! !! !InputElement button = new InputElement();! ! ! ! !button.id = “sendButton”;! ! ! ! !button.text = “Donate Bruv!!!”;! ! ! ! !button.classes.add(‘please’);! ! ! ! !button.onClick.listen((e) => print(‘thanks!’));! ! !document.body.children.add(button);! ! ! ! ! ! } !!
63. import “dart:html”;! ! void main() {! !! !InputElement button = new InputElement();! ! ! ! !button.id = “sendButton”;! ! ! ! !button.text = “Donate Bruv!!!”;! ! ! ! !button.classes.add(‘please’);! ! ! ! !button.onClick.listen((e) => print(‘thanks!’));! ! !document.body.children.add(button);! ! ! ! ! ! } !!
64. import “dart:html”;! ! void main() {! !! !InputElement button = new InputElement()! ! ! ! !..id = “sendButton”! ! ! ! !..text = “Donate Bruv!!!”! ! ! ! !..classes.add(‘please’)! ! ! ! !..onClick.listen((e) => print(‘thanks!’));! ! !document.body.children.add(button);! ! ! ! ! ! } !! Method Cascades
65. class Person {! !String name;! !int yearOfBirth;! ! !Person({this.name, this.yearOfBirth});! ! !speak() => print(“$name is speaking”);! }! ! void main() {! !Person person = new Person()! ! ! ! !..name = “Joe Bloggs”! ! ! ! !..yearOfBirth = 1985! ! ! ! !..speak();! ! !print(person.name);! }! !!
66. MIXINS
67. class Person {! !speak() => print(“person is speaking”);! }! ! class Customer extends Person {! !String _name;! !Customer(this._name);! }! !!
68. class Person {! !speak() => print(“person is speaking”);! }! ! class VIPPermissions extends Person {! !luxuryTreatment() => print(“Your royal suite is ready!”);! }! ! class Customer extends VIPPermissions {! !String _name;! !Customer(this._name);! }! !!
69. class Person {! !speak() => print(“person is speaking”);! }! ! class VIPPermissions extends Person {! !luxuryTreatment() => print(“Your royal suite is ready!”);! }! ! class Customer extends VIPPermissions {! !String _name;! !Customer(this._name);! }! !! Customer  IS   NOT  a   VIPPermissions !!!  
70. abstract class VIPPermissions {! !luxuryTreatment() => print(“Your royal suite is ready!”);! }! ! class Person {! !speak() => print(“person is speaking”);! }! ! class Customer extends Person with VIPPermissions {! !String _name;! !Customer(this._name);! }! !!
71. abstract class VIPPermissions {! !luxuryTreatment() => print(“Your royal suite is ready!”);! }! ! class Person {! !speak() => print(“person is speaking”);! }! ! class Customer extends Person with VIPPermissions {! !String _name;! !Customer(this._name);! }! ! void main() {! !Customer customer = new Customer(‘Charles’)..luxuryTreatment();! }! !!
72. abstract class VIPPermissions {! !luxuryTreatment() => print(“Your royal suite is ready!”);! }! ! class Person {! !speak() => print(“person is speaking”);! }! ! class Customer extends Person with VIPPermissions {! !String _name;! !Customer(this._name);! }! ! void main() {! !Customer customer = new Customer(‘Charles’)..luxuryTreatment();! }! !!
73. BUT THAT’S NOT ALL! ►  Generics ►  Mirrors/Reflections ►  Transformations ►  Metadata/ Annotations ►  Factories ►  Lazy-loading ►  Interoperate with JS ►  Observatory ►  Automatic Sanitization ►  Web Components ►  SIMD ►  and lots more…
74. JOIN THE DART SIDE ►  dartlang.org/codelabs ►  api.dartlang.org ►  pub.dartlang.org ►  @dartlang on Twitter
75. CASE DEMOS
76. THANK YOU.