Date post: | 08-May-2015 |
Category: |
Technology |
Upload: | chrisbuckett |
View: | 2,344 times |
Download: | 0 times |
structured web appsLondon Ajax User Group
Chris Buckett
This is Dart…A language And a tool ecosystemFor creating complex webappsIn teams
Single threadedBut isolates provide "shared-nothing" concurrency
Optionally typedRuns in a Browser Virtual MachineOr a Server Virtual MachineCan be converted to JavaScript
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
Why Dart…What do Google build?Single page web-apps
Instant searchDocsGoogle PlusBloggerAnalyticsMaps… etc …
Browser Apps
Server side APIs
Why Dart?Complex applicationsTeam developmentEasily “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'}));
Why Dart – the alternatives?GWT
Still around and will be driven by Google's use cases
CoffeeScriptCloser to JavaScript, syntax inspired by Ruby,
PythonJavaScript + Framework X
The default option
Dart is not a replacement, but an option.
Design Goals - FlexibilityFlexible, but with structure
Optional types provide flexibility
Libraries to organize code
Classes and Interfaces to provide structure
Tools catch errors
main() { var anInt = 1; var aStr = "String"; var anObj = new Object(); var result = doSomething(anInt,aStr,anObj);}
doSomething(a,b,c) { return "blah";}
Design goals - FamiliarBe Familiar
Design goals - FamiliarBe 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";}
Design Goals - PerfomancePerformance 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.
Design goals
DartLangua
ge
IDE
Dart VM
Native Browse
r
Frog
Great developer experience
Dartium (Chromium with Dart VM)
Dart IDE (Lightweight Eclipse IDE)
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();}
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();}
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>
A quick tour of some interesting language features…
Dart: Classes and interfacesFamiliar (to Java and C# developers)But a couple of nice featuresclass Duck implements Quackable { var colour;
Duck([this.colour="red"]) { } Duck.yellow() { this.colour = "yellow"; }
String sayQuack() => "quack";}
//Usagevar duck1 = new Duck();var duck2 = new Duck("blue");var duck3 = new Duck.yellow();print(duck3.sayQuack());
Optional paramters
Named constructors
Function shorthand
Unsurprising this
Dart: Classes and interfacesFamiliar (to Java and C# developers)But a couple of nice features
interface Quackable default Duck { String sayQuack();}
//Usagevar duck1 = Quackable();
Dart: Classes and interfacesAll 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; }}
Dart: Libraries and SourceBreak up single source code file into multiple,
independent files.
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)
#library("myLibrary");
#import("./libs/otherLib.dart");
#source("./myFile1.dart");#source("./myFile2.dart");
Dart: Optional TypesAdd documentation to code
Documentation readable by humans and tools
"Innocent until proven guilty"
Types have no effect on the running application
var i = 1;var s = "Hello";
int i = 1;String s = "Hello";
String i = 1;int s = "Hello"; Probably wrong, but
not proved to be wrong.
Dart: Optional Types
class Person { sayQuack(){ return "ouch…quack"; }}
pokeDuck(duck) { duck.sayQuack();}
//UsagepokeDuck(new Duck());pokeDuck(new Person()); //runs fine
But is that what the library designer intended?
Optional types can be useful in the early days of developing an app
Dart: Optional Types
class Person { sayQuack(){ return "ouch…quack"; }}
pokeDuck(duck) { duck.sayQuack(); duck.swimAway();}
//UsagepokeDuck(new Duck());pokeDuck(new Person()); //throws exception
This now fails with a
noSuchMethod exception
But as you add structure, types can help you…
Dart: Optional TypesAdding type info provides documentation to tools and
humans.class Person { sayQuack(){ return "ouch…quack"; }}
pokeDuck(Duck duck) { duck.sayQuack(); duck.swimAway();}
//UsagepokeDuck(new Duck());pokeDuck(new Person()); //tools warn
Now the tools can provide warnings
(or errors in checked mode).
Dart: noSuchMethodAll classes can have a noSuchMethod method
class Person { sayQuack(){ return "ouch…quack"; }
noSuchMethod(name, args) { if (name == "swimAway") { throw "I'm not really a duck"; } }}
Similar to ruby's method_missing
Side note: Any object can be thrown as an
exception
Simple function syntaxmain() {
var myFunc = (a,b) { return a,b;}
var myFunc = (a,b) => a+b; myFunc(a,b) => a+b; doSomething(c,d, myFunc); doSomething(c,d, (a,b) => a+b); var result = myFunc(101,202);
}
Dart: FunctionsDifferent
syntax, same effect
Functions as
arguments
Anonymous function
Unsurprising function
call
Libraries: Dart:htmlClient side library for interacting with the
DOMUses 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});
Libraries: dart:ioServer side libraries:
Processes File IOSocketsHttp Client & Server
Still a technical previewTime to get involved…
www.dartlang.orgJoin the active mailing listSearch #dartlang on Google +
More still to be builtReflection!Libraries providing higher levels of
abstraction: UI frameworks Server frameworks
Thankyou!These slides will be
posted on dartwatch.com