Structured Apps with Google Dart
•
2 j'aime•1,068 vues
A brief overview of Google's effort to bring structured programming to the web. Slides inspired by Seth Ladd's presentation.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (13)
En vedette
En vedette (13)
Similaire à Structured Apps with Google Dart
Similaire à Structured Apps with Google Dart (20)
Dernier
Dernier (20)
Structured Apps with Google Dart
- 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” jQueryUI 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
- 15. “Hey, I want a web app” jQueryUI 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 Leaflet.JS
- 16. “Hey, I want a web app” jQueryUI 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 Leaflet.JS Jasmine BDD
- 17. “Hey, I want a web app” jQueryUI Backbone.JS “Backbone’s only hard dependency is Underscore.js” Raphael.JS Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr Leaflet.JS Jasmine BDD
- 18. “Hey, I want a web app” jQueryUI DOCS DOCS DOCS Backbone.JS DOCS “Backbone’s only hard dependency is Underscore.js” Raphael.JS Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr Leaflet.JS Jasmine BDD DOCS DOCS DOCS DOCS DOCS
- 19. “Hey, I want a web app” jQueryUI DOCS DOCS DOCS Backbone.JS DOCS “Backbone’s only hard dependency is Underscore.js” Raphael.JS Underscore.JS jQuery “For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery...” Moment.JS Modernizr Leaflet.JS Jasmine BDD 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 pub docgen
- 30. COMMAND LINE TOOLS dart dartanalyzer pub docgen dart2js
- 31. HOW DART WORKS index.dart
- 32. HOW DART WORKS index.dart Dart Virtual Machine standalone or browser
- 33. HOW DART WORKS index.dart Dart-to-JavaScript compiler Dart Virtual Machine standalone or browser
- 34. HOW DART WORKS index.dart Dart Virtual Machine Dart-to-JavaScript compiler standalone or browser index.dart.js
- 36. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn()
- 37. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn() imports
- 38. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn() calls imports
- 39. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn() calls imports calls
- 40. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn() calls imports calls dart2js
- 41. TREE-SHAKING COMPILER Source Application main Library fn() fn() fn() fn() calls imports calls main calls calls fn() fn() dart2js
- 42. BENCHMARKS dart dart2js js dartlang.org/performance
- 43. WHO USES DART? dartlang.org/community/who-uses-dart.html
- 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);! !}! ! Shorthand functions !speak() => print(“$name is speaking”);! } !!
- 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);! !}! ! getters and setters !speak() => print(“$_name is speaking”);! ! !String get name => _name;! ! set name(String value) => _name = value;! } !!
- 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!’));! Method Cascades ! !document.body.children.add(button);! ! ! ! ! ! } !!
- 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.