London Dart Hackathon
Technical Preview…What you see today may change tomorrow…Enable us (as users of Dart) to influence the language and prov...
Why Dart? Complex applications Team development Easily “toolable”                  JavaScript           //process a & b...
Design goals - Familiar  Be Familiarmain() {  var anInt = 1;  var aStr = "String";  var anObj = new Object();  var result...
Design goals - Familiar  Be Familiarvoid main() {  int anInt = 1;  String aStr = "String";  Object anObj = new Object(); ...
Design Goals - Performance Performance as a feature   Dart VM was faster at launch than V8   (chromes JavaScript engine)...
Dartium (Chromium with Dart VM)
Dart Editor
dart2js: Dart to JavaScript#import(dart:html);class MyApp {  MyApp() { }    void run() {      write("Hello World!");    } ...
dart2js:the output JavaScript//...snip library code...// ********** Code for MyApp **************function MyApp() {}MyApp....
Quick Demo…Dart Editor and Dartium
Dart: Functions                                            Different Simple function syntax                  syntax, same...
Dart: Classes and interfaces   Familiar (to Java and C# developers)                 Optional   But a couple of nice feat...
Dart: Classes and interfaces Familiar (to Java and C# developers)                                                      De...
Dart: Classes and interfaces All classes are also interfaces    class Person implements Duck { … } Class properties can...
Dart: Libraries and Privacy Break up single source code file into multiple,  independent files.    #library("myLibrary");...
Dart: Optional Types Add documentation to code Documentation readable by humans and tools "Innocent until proven guilty...
Dart: Optional Types Optional types can be useful when prototyping an appclass Person {  sayQuack(){     return "ouch…qua...
Dart: Optional Types But as you add structure, types can help you…class Person {  sayQuack(){     return "ouch…quack";  }...
Dart: Optional Types Adding type info provides documentation to tools and  humans.class Person {  sayQuack(){     return ...
Dart: noSuchMethod All classes can have a noSuchMethod method (inherited from the base Object class)  class Person {    s...
Libraries: dart:html, dart:json Client side library for interacting with the DOM Uses Dart constructs for DOM manipulati...
Libraries: dart:io Server side libraries:    Processes    File IO    Sockets    Http Client & Server
More to do and time to try itwww.dartlang.org   #dartlang   www.html5rocks.com
Upcoming SlideShare
Loading in …5
×

Dart London hackathon

1,012 views

Published on

Slides from the London Dart Hackathon

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

  • Be the first to like this

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

No notes for slide
  • We can see the problem when we look at an example in JavaScript
  • Show Hello World, Generate JavaScript, Debugging in Dartium
  • Dart London hackathon

    1. 1. London Dart Hackathon
    2. 2. Technical Preview…What you see today may change tomorrow…Enable us (as users of Dart) to influence the language and provide feedback.
    3. 3. Why Dart? Complex applications Team development Easily “toolable” JavaScript //process a & b. function process(a,b) { return a+b; }; All valid, but which is correct?process(1,2,3);process("Hello","World");process({name:objectA}, {name:objectB}));
    4. 4. Design goals - Familiar  Be Familiarmain() { var anInt = 1; var aStr = "String"; var anObj = new Object(); var result = doSomething(anInt,aStr,anObj);}doSomething(a,b,c) { return "blah";}
    5. 5. Design goals - Familiar  Be Familiarvoid main() { int anInt = 1; String aStr = "String"; Object anObj = new Object(); String result = doSomething(anInt,aStr,anObj);}String doSomething(int a, String b, Object c) { return "blah";}
    6. 6. Design Goals - Performance Performance as a feature  Dart VM was faster at launch than V8 (chromes JavaScript engine) was at launch.  Converted JS should be as fast as or faster than equivalent hand written JavaScript.
    7. 7. Dartium (Chromium with Dart VM)
    8. 8. Dart Editor
    9. 9. dart2js: Dart to JavaScript#import(dart:html);class MyApp { MyApp() { } void run() { write("Hello World!"); } void write(String message) { document.query(#status).innerHTML = message; }}void main() { new MyApp().run();}
    10. 10. dart2js:the output JavaScript//...snip library code...// ********** Code for MyApp **************function MyApp() {}MyApp.prototype.run = function() { this.write("Hello World!");}MyApp.prototype.write = function(message) { get$$document().query("#status").innerHTML = message;}// ********** Code for top level **************function main() { new MyApp().run();}
    11. 11. Quick Demo…Dart Editor and Dartium
    12. 12. Dart: Functions Different Simple function syntax syntax, same effect  var myFunc = (a,b) { return a,b; } Functions as  var myFunc = (a,b) => a+b; arguments  myFunc(a,b) => a+b; Anonymous  doSomething(c,d, myFunc); function  doSomething(c,d, (a,b) => a+b);  var result = myFunc(101,202); Unsurprising function call
    13. 13. Dart: Classes and interfaces  Familiar (to Java and C# developers) Optional  But a couple of nice features paramters class Duck implements Quackable { var colour; Duck([this.colour="red"]) { } Duck.yellow() { Named this.colour = "yellow"; constructors } //Usage String sayQuack() => "quack"; var duck1 = new Duck(); } var duck2 = new Duck("blue");Unsurprising Function var duck3 = new Duck.yellow(); this shorthand print(duck3.sayQuack());
    14. 14. Dart: Classes and interfaces Familiar (to Java and C# developers) Default But a couple of nice features Implementation interface Quackable default Duck { String sayQuack(); } //Usage var duck1 = new Quackable();
    15. 15. Dart: Classes and interfaces All classes are also interfaces  class Person implements Duck { … } Class properties can be interchanged with getters and setters  duck.colour = "yellow"; //setter, or property?  class Duck { var _colour; //private property get colour() => _colour; //getter set colour(value) { //setter _colour=value; } }
    16. 16. Dart: Libraries and Privacy Break up single source code file into multiple, independent files. #library("myLibrary"); #import("./libs/otherLib.dart"); #source("./myFile1.dart"); #source("./myFile2.dart"); Break logical parts of an app into libraries. Import your own and third party libraries. Privacy declarations apply at a library level (not a class level)
    17. 17. Dart: Optional Types Add documentation to code Documentation readable by humans and tools "Innocent until proven guilty" Type annotations have no effect on the running applicationvar i = 1; int i = 1;var s = "Hello"; String s = "Hello"; String i = 1; int s = "Hello"; Probably wrong, but not proved to be wrong.
    18. 18. Dart: Optional Types Optional types can be useful when prototyping an appclass Person { sayQuack(){ return "ouch…quack"; }}pokeDuck(duck) { duck.sayQuack();} //Usage But is that what the pokeDuck(new Duck()); library designer pokeDuck(new Person()); //runs fine intended?
    19. 19. Dart: Optional Types But as you add structure, types can help you…class Person { sayQuack(){ return "ouch…quack"; } New method} added to Duck, which isnt inpokeDuck(duck) { Person duck.sayQuack(); duck.swimAway();} //Usage This now fails with a pokeDuck(new Duck()); noSuchMethod pokeDuck(new Person()); //throws exception exception
    20. 20. Dart: Optional Types Adding type info provides documentation to tools and humans.class Person { sayQuack(){ return "ouch…quack"; } Type} informationpokeDuck(Duck duck) { duck.sayQuack(); duck.swimAway();} Now the tools can //Usage provide warnings (or pokeDuck(new Duck()); errors in checked pokeDuck(new Person()); //tools warn mode).
    21. 21. Dart: noSuchMethod All classes can have a noSuchMethod method (inherited from the base Object class) class Person { sayQuack(){ Similar to rubys return "ouch…quack"; method_missing } noSuchMethod(name, args) { Side note: Any if (name == "swimAway") { object can be throw "Im not really a duck"; thrown as an } exception } }
    22. 22. Libraries: dart:html, dart:json Client side library for interacting with the DOM Uses Dart constructs for DOM manipulation  var foo = elem.query("#foo"); //return a foo  var foos = elem.queryAll(".foo"); //list of foo Events:  foo.on.click.add((event) { //do something }); Autocomplete HTML5 JSON Parsing of Maps, Lists
    23. 23. Libraries: dart:io Server side libraries:  Processes  File IO  Sockets  Http Client & Server
    24. 24. More to do and time to try itwww.dartlang.org #dartlang www.html5rocks.com

    ×