DART Googles JavaScript?

Transcript

1. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   (c  )h7p://flic.kr/p/jHjc  
2. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   www.web-­‐developer-­‐conference.de   Dart  –  Google´s  JavaScript?   Marcus  Ross   Zahlenhelfer  ConsulOng   @zahlenhelfer  
3. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Agenda   •  Hallo  DART  Welt   •  Was  ist  DART?   •  Dart  101  -­‐  (301)   •  Aktuelle  Bibliotheken   •  Dart  im  Browser   •  Dart  auf  dem  Server   •  Mehr  zu  Dart   •  Dart  gehostet  
4. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Hallo  DART  Welt   •  So  einfach  kann  DART  sein:! ! main() { var devcrowd = ['PHP', 'JS', 'RoR']; for (final developer in devcrowd) { print('Hallo $developer Entwickler'); } } halloWDC2012.dart  
5. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Wer  ist  DART?   •  Geboren  im  Oktober  2011  auf  der  GOTO  Conf.   •  OpenSource  (BSD-­‐Licence)   •  Source  auf  dart.googlecode.com   •  First  Stop:  www.dartlang.com   •  Ist  im  Wachstum  und  daher  im  Fluss!  
6. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Aber  was  ist  es  nun?   •  Sprache   •  eine  VM  (Dart  VM)   •  SDK  /  Bibliotheken   •  Compiler  zu  JavaScript  (Dart2JS)   •  Editor  (Dart  Editor)  
7. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   DART  101  (301)   •  Das  „glücklich“  Package   – DarOum  =  DART  VM  +  Chrome   – Dart  Editor   – Dart  SDK   •  Download  unter:     www.dartlang.org/downloads.htm   -­‐>  Zum  DartEditor!  
8. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Sprachfeatures   •  opOonal  Typisiert:   var myName = 'Aaron'; String myName = 'Aaron'; Aber  was  passiert  bei  myName=42;  ?   DartOptTypes.dart    
9. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Sprachfeatures   •  Scope  von  Variablen:   var name = "WDC Teilnehmer"; void sayHallo() { var greetings = "Hallo"; print("$greetings $name"); } void main() { sayHallo(); } DartScopes1.dart DartScopes2.dart
10. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Sprachfeatures   •  FunkOonen   JavaScript: function recalculate(origin, offset, estimate) { ... } Dart: num recalculate(Point origin, num offset, [bool estimate=false]) { ... } DartFunctions.dart
11. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Sprachfeatures   •  Klassen class WDCTeilnehmer{ String name; // Eigenschaft String mainSkill; // Eigenschaft WDCTeilnehmer(this.name,this.mainSkill); //Konstruktor String greeting(){ // Methode greeting return "Guten Tag, ich heisse $name"; } } DartObjekte.dart
12. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Sprachfeatures   •  Interfaces interface PKW { num Reifen; bremsen(); } class BMW implements PKW { num Reifen = 4; bool turbolader = false; void bremsen(){} } DartInterfaces.dart
13. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Bibliotheken   •  dart:core   –  Zextanzeige  (print())     –  CollecOons  (CollecOon,  Set,  List,  Queue)     –  Key-­‐Value  Paare  (Map)     –  Datum  und  Zeit  (Date,  TimeZone,  DuraOon,  Stopwatch)     –  Strings  (String,  Pa7ern,  RegExp)     –  Zahlen  (num,  int,  double,  Math)     –  Objektvergleiche  (Comparable)     –  IteraOonen  (Iterable)    
14. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Dart  im  Browser   •  HTML  Dateien  bleiben   •  Dart  wird  per  Script-­‐Tag  geladen   •  Bspl: #import('dart:html'); void main() { ButtonElement button = new Element.tag('button'); button.text = 'Click me'; button.classes.add('important'); button.on.click.add((e) => window.alert('Clicked!!')); document.body.elements.add(button); }
15. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Bibliotheken   •  dart:html     –  Globale  Objekte  (document,  window)   –  Finde  HTML-­‐Elemente  (Element’s  query()  and  queryAll())     –  Event  handler  (Element’s  on  property)     •  WICHTIG:     Es  gibt  nur  noch  query()  und  queryAll()  !  -­‐>Demo   HalloWebWelt.dart
16. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   DOM  Zugriff   JavaScript  (elem.)   •  .getElementById('foo');   •  .getElementsByTagName('di v');   •  .getElementsByName('foo');   •  .getElementsByClassName(' foo');   •  .querySelector('.foo  .bar');   •  .querySelectorAll('.foo  .bar‘;   Dart  (elem.)   •  elem.query('#foo');   •  elem.queryAll('div');   •  elem.queryAll('[name="foo" ]');   •  elem.queryAll('.foo');   •  elem.query('.foo  .bar');   •  elem.queryAll('.foo  .bar');  
17. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   DART  VM  wird  gebraucht   •  Also  nur  Chrome?   h7p://flic.kr/p/7Dksg1  
18. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Naja,  aktuell  bei  der  ARD   •  Weg  mit  dem  IE  –  Chrome  für  alle!   Quelle:  www.ard.de  vom  18.09.2012  
19. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Frog  bzw.  Dart2JS   •  Frog/Dart2JS  kompiliert  DART  zu  JavaScript   •  Damit  gibt  es  einen  Fallback  für  nicht  DART  Browser   •  Es  ist  Teil  vom  DART  SDK   •  DEMO   h7p://flic.kr/p/D7oDb  
20. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Dart  als  Server   •  Backend  auch  in  Dart   •  Bspl: #import('dart:io'); ... void main() { HttpServer server = new HttpServer(); server.addRequestHandler((_) => true, serveFile); server.listen("127.0.0.1", 1337); } ... DartWebServer.dart
21. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Dart  in  der  Cloud?!   •  Heroku  hostet   –  main.dart   –  Procfile  benöOgt  (web:  dart  main.dart)   –  heroku create wdc2012dart –  heroku config:add BUILDPACK_URL=https:// github.com/igrigorik/heroku-buildpack- dart.git –  git push heroku master   DartWebServer.dart
22. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Mehr  zu  DART   •  JS  Vergleich  -­‐>  h7p://synonym.dartlang.org/     •  Twi7er:  @dart_lang   •  G+:  +Dart:  Structured  web  apps   •  Hashtag:  #dartlang   •  Blogs:  h7p://dartosphere.org   •  IRC:  #dart   •  Mailing  list:  misc@dartlang.org   •  Stack  Overflow:  Tag  dart  
23. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   L8test  News  &  Infos   •  Leider  ist  das  Projekt  noch  sehr  jung   •  Die  Folien  jetzt  schon  veraltet  L   •  Alle  Beispiele:   www.github.com/zahlenhelfer/dartsample   •  Slides  auf  Speakerdeck   www.speakerdeck.com/u/zahlenhelfer  
24. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   Features  in  60  Sekunden   •  Class-­‐based,  single  inheritance,  OO  language     •  Interfaces   •  OpOonal  staOc  typing   •  Real  lexical  scoping   •  Single  threaded     •  Familiar  syntax     Quelle:  Seth  Ledd,  Structured  Webprogramming  with  Dart  
25. wdc_conference                      #wdc12   www.web-­‐developer-­‐conference.de   DANKE   Marcus  Ross  –  Zahlenhelfer  ConsulOng