Dart structured web apps

2,620 views

Published on

The slides for the presentation I made to the London Ajax User Group on 13th March 2012.

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
2,620
On SlideShare
0
From Embeds
0
Number of Embeds
942
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dart structured web apps

  1. 1. London Ajax User Group Chris Buckett
  2. 2. 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
  3. 3. 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
  4. 4. Why Dart… What do Google build? Single page web-apps Browser  Instant search Apps  Docs  Google Plus Server  Blogger side  Analytics APIs  Maps  … etc …
  5. 5. Why Dart? Complex applications Team development Easily “toolable” //process a & b. function process(a,b) { return a+b; }; document.write(process(1,2,3)); document.write(process("Hello", " World")); document.write(process({name:objectA}, {name:objectB}));
  6. 6. 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.
  7. 7. Design Goals - Flexibility Flexible, but with structure  Optional types provide flexibility  Libraries to organize code  Classes and Interfaces to provide structure  Tools catch errors
  8. 8. 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"; }
  9. 9. 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"; }
  10. 10. 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.
  11. 11. Design goals Great developer IDE experience Dart Dart Frog Language VM Native Browser
  12. 12. Dartium (Chromium with Dart VM)
  13. 13. Dart IDE (Lightweight Eclipse IDE)
  14. 14. Frog: 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();}
  15. 15. Frog: 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();}
  16. 16. 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>
  17. 17. A quick tour of some interesting language features…
  18. 18. 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());
  19. 19. 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 = Quackable();
  20. 20. 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; } }
  21. 21. 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)
  22. 22. 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.
  23. 23. 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?
  24. 24. 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
  25. 25. 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).
  26. 26. 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 }}
  27. 27. 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
  28. 28. 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 });
  29. 29. Libraries: dart:io Server side libraries:  Processes  File IO  Sockets  Http Client & Server
  30. 30. Still a technical preview Time to get involved…  www.dartlang.org  Join the active mailing list  Search #dartlang on Google + More still to be built  Reflection!  Libraries providing higher levels of abstraction:  UI frameworks  Server frameworks

×