Dart - en ny platform til webudvikling af Rico Wind, Google

589 views
426 views

Published on

Oplægget blev holdt ved et seminar i InfinIT-interessegruppen Højniveausprog til indlejrede systemer den 12. marts 2014. Læs mere om interessegruppen her: http://infinit.dk/dk/interessegrupper/hoejniveau_sprog_til_indlejrede_systemer/hoejniveau_sprog_til_indlejrede_systemer.htm

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
589
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Dart - en ny platform til webudvikling af Rico Wind, Google

  1. 1. #dartlang
  2. 2. #dartlang Object oriented language Optional typing Single-threaded event model Isolates for concurrency Compiles to JavaScript Native VM ✔ Improved productivity ✔ Increased performance
  3. 3. #dartlang Use the tools you already know
  4. 4. #dartlang Compile to JavaScript, runs across the modern web
  5. 5. #dartlang Run Dart on the server with the Dart VM
  6. 6. #dartlang require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs "I just want to write web apps!" "Hi, I want to build a web app"
  7. 7. #dartlang Unit test Dart SDK Polymer Intl Packages "Things are consistent and clear."
  8. 8. #dartlang Apps start small, but grow and scale
  9. 9. #dartlang Simple syntax, ceremony free class Hug { Familiar
  10. 10. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse
  11. 11. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } Operator overriding
  12. 12. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } Named, optional params w/ default value
  13. 13. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } One-line function
  14. 14. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } String Interpolation
  15. 15. #dartlang Clean semantics and behavior
  16. 16. #dartlang Clean semantics and behavior ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + No invisible magic Examples:
  17. 17. #dartlang Missing getter? "hello".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "hello" Arguments: [] Logical
  18. 18. #dartlang String compared to number? 'hello' > 1 // ?? Class 'String' has no instance method '>'. Logical
  19. 19. #dartlang Variable scope? var foo = 'top-level'; main() { if (true) { var foo = 'inside'; } print(foo); // ?? What will this print? } top-level Logical No hoisting
  20. 20. #dartlang Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ } } Lexical this
  21. 21. #dartlang Scalable structure Functions Classes Libraries Packages Mixins Interfaces library games; import 'dart:math'; import 'players.dart'; class Darts { // ... } class Bowling { // ... } Player findOpponent(int skillLevel) { // ... }
  22. 22. #dartlang var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); Yikes! Button is repeated 6 times! Too many buttons
  23. 23. #dartlang Method cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button);
  24. 24. #dartlang Inline initialization parentElement.children.add( new ButtonElement()..text = 'Click Point');
  25. 25. #dartlang Persistable One of these things is not like the other Greeting Hug Hug is not is-a Persistable Don't pollute your inheritance tree!
  26. 26. #dartlang Don't inherit, mixin! Greeting PersistableHug Mixin
  27. 27. #dartlang Mixins abstract class Persistable { save() { ... } load() { ... } toJson(); } class Hug extends Greeting with Persistable { Map toJson() => {'strength':10}; } main() { var embrace = new Hug(); embrace.save(); } Extend object & no constructors? You can be a mixin! Apply the mixin. Use methods from mixin.
  28. 28. #dartlang Batteries included ● dart:core ● dart:math ● dart:async ● dart:convert ● dart:isolates ● dart:mirrors ● dart:typed_data Browser: ● dart:html ● dart:web_gl ● dart:svg Server-side: ● dart:io
  29. 29. #dartlang dart:async - asynchronous made simple ● No more random callback nightmare ● dart:async ○ Future ○ Stream
  30. 30. #dartlang Futures var future = new File(‘foo.txt’).readAsString(); future.then((content) { // Read the file into `content`; }).catchError((error) { // Failed to read the file }); computePi();
  31. 31. #dartlang import 'dart:io'; import 'dart:async'; import 'dart:convert'; Future<String> maybeGetPub() { var file = new File('foo.txt'); return file.exists().then((exists) { return file.readAsString(); }).then((content) { if (content.contains('bard')) { return new HttpClient().getUrl(Uri.parse('http://pub.dartlang.org')); } else { return new HttpClient().getUrl(Uri.parse('http://golang.org')); } }).then((request) { return request.close(); // could send data first }).then((response) { var completer = new Completer(); var content = ""; response.transform(UTF8.decoder) .listen((data) => content = "$content$data", onDone: () => completer.complete(content)); return completer.future; }).catchError((error) { return error; // Failed to read the file }); } Future<String> getServedString(String content) { if (content.contains('dartlang.org')) return new Future.value("Served"); return Process.run('cat', ['foo.txt']) .then((result) => "No beer: ${result.stdout}"); } void main() { maybeGetPub().then(getServedString).then(print); }
  32. 32. #dartlang Context switching considered harmful, Iterate quickly
  33. 33. #dartlang
  34. 34. #dartlang
  35. 35. #dartlang 670+ packages
  36. 36. #dartlang
  37. 37. #dartlang Compile Dart to JavaScript with dart2js
  38. 38. #dartlang main Library baz foo bar boo imports calls baz main foo bar Tree shaking dart2js
  39. 39. #dartlang Our challenge ... clean semantics and unsurprising behavior without extra checks when compiled to JavaScript
  40. 40. #dartlang DeltaBlue addConstraintsConsumingTo(v, coll) { var determining = v.determinedBy; for (var i = 0; i < v.constraints.length; i++) { var c = v.constraints[i]; if (c != determining && c.isSatisfied()) { coll.add(c); } } }
  41. 41. #dartlang addConstraintsConsumingTo$2: function(v, coll) { var determining, t1, t2, t3, i, t4, c; determining = v.get$determinedBy(); t1 = v.constraints; t2 = getInterceptor$as(t1); t3 = getInterceptor$a(coll); i = 0; while (true) { t4 = t2.get$length(t1); if (typeof t4 !== "number") throw new IllegalArgumentError(t4); if (!(i < t4)) break; c = t2.$index(t1, i); if ((c == null ? determining != null : c !== determining) && c.isSatisfied$0() === true) { t3.add$1(coll, c); } ++i; } } Simply not good enough! DeltaBlue: Unoptimized
  42. 42. #dartlang Global optimizations ● Dart is structured and allows whole program analysis ● Understanding your program’s structure enables: ○ Code navigation and great refactoring tools ○ Global compile-time optimizations
  43. 43. #dartlang DeltaBlue: Fully optimized addConstraintsConsumingTo$2: function(v, coll) { var determining, t1, i, c; determining = v.determinedBy; for (t1 = v.constraints, i = 0; i < t1.length; ++i) { c = t1[i]; if (c !== determining && c.isSatisfied$0()) { coll.push(c); } } } 262 characters, same semantics
  44. 44. #dartlang Dart VM ● Up to 2x speed of JavaScript ○ Well defined classes ○ No hoisting, no magic ● 10x faster potential startup time compared to JavaScript ○ Snapshots cache ○ SDK snapshot ● Runs serverside ○ Complete IO library (HTTP, Process, File System)
  45. 45. #dartlang
  46. 46. #dartlang ShadowDOM HTML Imports <template> Custom Elements New web specifications Future proof
  47. 47. #dartlang Polymer.dart (today) Using web components today
  48. 48. #dartlang Custom elements everywhere! <body> <persistable-db dbname="game" storename="sologames"></persistable-db> <game-assets></game-assets> <game-app></game-app> <google-signin clientId="250963735330.apps.googleusercontent.com" signInMsg="Please sign in"></google-signin>
  49. 49. #dartlang Angular is ported to Dart!
  50. 50. #dartlang Dart in production
  51. 51. #dartlang #dartlang Export Flash movies/games to Dart from Flash Pro
  52. 52. #dartlang "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google
  53. 53. #dartlang TC52 to standardize Dart language
  54. 54. #dartlang Dart - for the modern web ● Platform you can use today ● Easy to get started - dartlang.org ● Compiles to JavaScript

×