Dart und JavaScript

1,898 views

Published on

Präsentation für eine großen Dienstleister in München. 14.12.2012

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,898
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dart und JavaScript

  1. 1. Dartund JavaScript Christian Grobmeier www.grobmeier.de @grobmeier
  2. 2. Quo Vadis?JavaScript?
  3. 3. JavaScript „false“:false, 0, „“, undefined, null
  4. 4. Batterien selbst besorgen.jQuery ist Pflicht.
  5. 5. Segen oder Fluch?Keine Typen
  6. 6. 1000 und 1 MöglichkeitVererbung
  7. 7. Patterns helfen:Namespace
  8. 8. Jeder Browserist ein Individuum.
  9. 9. Nicht nett.var a1 = new Array(1,2,3,4,5); var a2 = new Array(5);
  10. 10. Einer für alle.if(a === null || a === undefined){}
  11. 11. Fallstricke. == 0 // false0 == // true0 == 0 // truefalse == false // falsefalse == 0 // truefalse == undefined // falsefalse == null // falsenull == undefined // true trn == 0 // true
  12. 12. Nur die Harten überleben.
  13. 13. Verkaufs-argumente
  14. 14. Dart VM DartSource JavaScript dart2js Engine Überall.
  15. 15. Pub
  16. 16. Nix neues.
  17. 17. Viele Libs.
  18. 18. Isolates.
  19. 19. Serverseitig.
  20. 20. JS -> Dart Roadcrew.jsgithub.com/grobmeier/Roadcrew.js
  21. 21. Use Case<div class="page" id="tablePage"> <h1>Table Page</h1> <a href="#otherPage">Other</a></div><div class="page" id="otherPage"> <h1>Other Page</h1> <a href="#tablePage">Table</a></div>
  22. 22. .jsfunction Roadcrew() { // Constructor}Roadcrew.prototype = { // Prototyp};Roadcrew.prototype.act = function () { // Function};Roadcrew.another = function () { // Static Function};
  23. 23. class RoadcrewController { var pages; RoadcrewController() { // Constructor } void act(e) { // Method } void static another() { // Static method }}
  24. 24. .jsProperties kopierenFramework extend
  25. 25. class RoadcrewController extends C { ...}class C { ...}
  26. 26. class A implements B { ...}abstract class B { ...}
  27. 27. .jsfunction Roadcrew() { test = „blub“; var xyz = „bla“;}var act = function () { console.log(test);};
  28. 28. library Roadcrew;import dart:html;part ,RCController.dart;part RCInterceptor.dart;part RCException.dart;
  29. 29. .jsvar myobj = (function() { var name = „CG“; return { getName = function() { return name; } }}());
  30. 30. class Roadcrew { var _name = „CG“; _getTest() => name;}
  31. 31. .jsvar test = „Christian“;test = true;test = 10.32;
  32. 32. class Roadcrew { String _name = „CG“; String _getTest() => name; List<DivElement> pages;}
  33. 33. .jsfunction RcErr(m,c,r){}RcErr.prototype = new Error();RcErr.prototype.constructor =RcErr;try { interceptor(d, data);} catch (error) { ...}
  34. 34. class RcEx { String msg = "An error..."; int c; RcEx(this.msg, [this.c = 1] );}try { interceptors[pageId].act(d);} on RcEx catch(e) {}
  35. 35. .jspages = $(.page);page = $(#myPage);
  36. 36. pages = queryAll(.page);page = query(#myPage);
  37. 37. .js$("a").live( click,$.proxy(this,goto));
  38. 38. queryAll(a).forEach( (el) { el.on.click.add((e) { goto(e); }); });
  39. 39. import dart:isolate;echo() { port.receive((msg, reply) { reply.send(I received: $msg); });}main() { var sendPort = spawnFunction(echo); sendPort.call(Hello).then((reply) { print(reply); });}
  40. 40. <element name="x-click-counter" constructor="CountComponent" extends="div"> <template> … </template> <script type="…"> … </script></element>
  41. 41. <element name="x-click-counter"constructor="CountComponent" extends="div"><template> <button on-click=”inc()">Click</button> <span>{{count}}</span></template></element>
  42. 42. <element name="x-click-counter"constructor="CountComponent" extends="div”><script type="application/dart”>class CountComponent extends WebComponent { int count = 0; void inc() { count++; }}</script></element>
  43. 43. <head><link rel="components” href="click.html"></head><body><x-click-counter></x-click-counter><script type="application/dart"> main() {}</script>
  44. 44. Mehr? I/O JSONMirrorsLogging ...
  45. 45. Wo steht Dart? Diskussion
  46. 46. Danke! Christian Grobmeier www.grobmeier.de @grobmeier
  47. 47. Image Credits Omikuji: Flickr (jessleecuizon) Dollars: Flickr (401(K) 2012) Pub: Flickr (ell brown) Dog: Flickr (joshme17) Package: Flickr (lemonhalf) Threads: Flickr (The Big Quack) Server: Flickr (getButterfly) School Bus: Flickr (loop_oh) Batteries: Flickr (scalespeeder)Discussing Monks: Flickr (wonderlane)

×