London Dart Community            Chris Buckett
Why unicorns and rainbows?              Unicorns for:       "Hey – look at that!"             String s = 12345;           ...
This is Dart… A language And a tool ecosystem For creating complex webapps In teams Single threaded    But isolates ...
Technical Preview… What you may see today, may change tomorrow… Enable us (as potential end users) to influence the lang...
Why Dart… What do Google build? Single page web-apps    Browser    Instant search       Apps    Docs    Google Plus  ...
Why Dart? Complex applications Team development //javascript… Easily “toolable”   //process a & b.                     ...
Why Dart – the alternatives? GWT    Still around and will be driven by Googles use cases CoffeeScript    Closer to Jav...
Design Goals - Flexibility Flexible, but with structure   Optional types provide flexibility   Libraries to organize co...
Design goals - Familiar Be Familiar    main() {      var anInt = 1;      var aStr = "String";      var anObj = new Object...
Design goals - Familiar Be Familiar    void main() {      int anInt = 1;      String aStr = "String";      Object anObj =...
Design Goals - Perfomance Performance as a feature    Currently not as fast as V8    (But D8 is faster at launch than V...
Design goals Great developer         IDE experience                          Dart     Dart              dart2js          ...
Dartium (Chromium with Dart VM)
Dart IDE (Lightweight Eclipse IDE)
Demo… debugging and dartium
Dart2js: Dart to JS Converter#import(dart:html);class MyApp {  MyApp() { }    void run() {      write("Hello World!");    ...
dart2js: Dart to JS Converter//...snip library code...// ********** Code for MyApp **************function MyApp() {}MyApp....
Embed within HTML<html><body>  <script type="application/dart">    main() {       print("Hello Dart");    }  </script></bo...
A quick tour of some interesting      language features…
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) But a couple of nice features     interface Quackable ...
Dart: Classes and interfaces All classes are also interfaces    class Person implements Duck { … } Class properties can...
Demo… classes and interfaces
Dart: Libraries and Source 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 in the early days of developing  an appclass Person {  sayQuack(){     ...
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 ...
Demo… Librariesand optional types
Dart: noSuchMethod All classes can have a noSuchMethod methodclass Person {  sayQuack(){                            Simil...
Dart: Functions Simple function syntax                      Different    main() {                               syntax, ...
Libraries: Dart:html Client side library for interacting with the DOM Uses Dart constructs for DOM manipulation       v...
Libraries: dart:io Server side libraries:    Processes    File IO    Sockets    Http Client & Server
Typical Async code withmodule.handle("data", (result) {                //on success              },              (err) {  ...
Could be re-written with FuturesFuture conn = module.handle("data");conn.then((result) { //on success});conn.handleExcepti...
Demo… futures
Still a technical preview Time to get involved…    www.dartlang.org    Join the active mailing list    Search #dartlan...
Upcoming SlideShare
Loading in …5
×

Dart, unicorns and rainbows

1,233 views

Published on

Slides from the presentation to the London Dart Community on 18th April 2012 at Campus London.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • These slides are going to be very familiar to anyone who saw the previous set of slides to the London Ajax Group :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

No notes for slide

Dart, unicorns and rainbows

  1. 1. London Dart Community Chris Buckett
  2. 2. Why unicorns and rainbows? Unicorns for: "Hey – look at that!" String s = 12345; int i = "Hello World"; print("$i $s"); //outputs "Hello World 12345" Optional Typing Rainbows for: Great Tools "Aah, thats nice!"
  3. 3. This is Dart… A language And a tool ecosystem For creating complex webapps In teams Single threaded  But isolates provide "shared-nothing" concurrency Optionally typed Runs in a Browser Virtual Machine Or a Server Virtual Machine Can be converted to JavaScript
  4. 4. Technical Preview… What you may see today, may change tomorrow… Enable us (as potential end users) to influence the language and provide feedback Eventual goal is standardization
  5. 5. Why Dart… What do Google build? Single page web-apps Browser  Instant search Apps  Docs  Google Plus Server  Blogger side  Analytics APIs  Maps  … etc …
  6. 6. Why Dart? Complex applications Team development //javascript… Easily “toolable” //process a & b. function process(a,b) { return a+b; }; //javascript document.write(process(1,2,3)); document.write(process("Hello", "World")); document.write(process({name:objectA}, {name:objectB}));
  7. 7. Why Dart – the alternatives? GWT  Still around and will be driven by Googles use cases CoffeeScript  Closer to JavaScript, syntax inspired by Ruby, Python JavaScript + Framework X  The default option Dart is not a replacement, but an option.
  8. 8. Design Goals - Flexibility Flexible, but with structure  Optional types provide flexibility  Libraries to organize code  Classes and Interfaces to provide structure  Tools catch errors
  9. 9. Design goals - Familiar Be Familiar main() { var anInt = 1; var aStr = "String"; var anObj = new Object(); var result = doSomething(anInt,aStr,anObj); } doSomething(a,b,c) { return "blah"; }
  10. 10. Design goals - Familiar Be Familiar void 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"; }
  11. 11. Design Goals - Perfomance Performance as a feature  Currently not as fast as V8  (But D8 is faster at launch than V8 was at launch)  Converted JS should be as fast as or faster than equivalent hand written JavaScript.
  12. 12. Design goals Great developer IDE experience Dart Dart dart2js Language VM Native Browser
  13. 13. Dartium (Chromium with Dart VM)
  14. 14. Dart IDE (Lightweight Eclipse IDE)
  15. 15. Demo… debugging and dartium
  16. 16. Dart2js: Dart to JS Converter#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();}
  17. 17. dart2js: Dart to JS Converter//...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();}
  18. 18. Embed within HTML<html><body> <script type="application/dart"> main() { print("Hello Dart"); } </script></body></html> <html> <body> <script type="application/dart" src="MyApp.dart"></script> </body> </html>
  19. 19. A quick tour of some interesting language features…
  20. 20. 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());
  21. 21. Dart: Classes and interfaces Familiar (to Java and C# developers) But a couple of nice features interface Quackable default Duck { String sayQuack(); } //Usage var duck1 = new Quackable();
  22. 22. 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; } }
  23. 23. Demo… classes and interfaces
  24. 24. Dart: Libraries and Source 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)
  25. 25. Dart: Optional Types Add documentation to code Documentation readable by humans and tools "Innocent until proven guilty" Types have no effect on the running application var 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.
  26. 26. Dart: Optional Types Optional types can be useful in the early days of developing 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?
  27. 27. Dart: Optional Types But as you add structure, types can help you…class Person { sayQuack(){ return "ouch…quack"; }}pokeDuck(duck) { duck.sayQuack(); duck.swimAway();} //Usage This now fails with a pokeDuck(new Duck()); noSuchMethod pokeDuck(new Person()); //throws exception exception
  28. 28. Dart: Optional Types Adding type info provides documentation to tools and humans.class Person { sayQuack(){ return "ouch…quack"; }}pokeDuck(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).
  29. 29. Demo… Librariesand optional types
  30. 30. Dart: noSuchMethod All classes can have a noSuchMethod methodclass 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 }}
  31. 31. Dart: Functions Simple function syntax Different  main() { syntax, same effect  var myFunc = (a,b) { return a,b; } Functions as  var myFunc = (a,b) => a+b; arguments  myFunc(a,b) => a+b;  doSomething(c,d, myFunc); Anonymous  doSomething(c,d, (a,b) => a+b); function  var result = myFunc(101,202); } Unsurprising function call
  32. 32. Libraries: Dart:html 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 });
  33. 33. Libraries: dart:io Server side libraries:  Processes  File IO  Sockets  Http Client & Server
  34. 34. Typical Async code withmodule.handle("data", (result) { //on success }, (err) { //on error });
  35. 35. Could be re-written with FuturesFuture conn = module.handle("data");conn.then((result) { //on success});conn.handleException((error) { //on error});
  36. 36. Demo… futures
  37. 37. Still a technical preview Time to get involved…  www.dartlang.org  Join the active mailing list  Search #dartlang on Google + Resources:  http://api.dartlang.org  http://synonyms.dartlang.org  http://try.dartlang.org

×