Introduction to Dart

I N T R O D U C T I O N T O D A R T R A M E S H N A I R H I D D E N TA O . C O M ! M A Y 3 0 , 2 0 1 4 TA I P E I J A VA S C R I P T E N T H U S I A S T S

W H AT I S D A R T ? • Dynamic scripting language (runs in a VM) • lntended as successor to Javascript • Better performance, better tooling, better for larger projects • Built by people who built V8 and Java HotSpot • Oct 2011: Announced by Google • Nov 2013: Stable v1.0 release • Dec 2013: Setup ECMA TC52 for standardisation • www.dartlang.org • gist.github.com/paulmillr/1208618

G E T D A R T • dartlang.org/tools/download.html • Dart IDE (based on Eclipse) • Dartium (version of Chromium with Dart VM) • SDK • dart - command-line standalone VM • dart2js - compile to JS • dartanalyzer - static code analyzer, spots bugs • pub - community package manager • docgen - API docs generator

T H E B A S I C S L E T ’ S B E G I N …

A S I M P L E P R O G R A M // short-hand function notation + parameter type and return types double show(double v) => v * 2.0; ! // program entry point, with void return type void main() { // dynamic type var a = 2.222; print("Result: ${show(a)}"); /* Result: 4.444 */ ! // everything is an object assert(a is Object); ! // converting to other types print(a.toInt() is int); /* true*/ print(a.toString() is String); /* true */ print(double.parse(a.toStringAsFixed(1))); /* 2.2 */ }

O P T I O N A L T Y P E A N N O TAT I O N S • Help your IDE and other tools help you • Let the “static checker” warn you about potential problems, though code will still compile • Can help improve performance when compiling to JS • At runtime type annotations are only used if the Dart VM is in “Checked” mode… // either is ok int a = 12; var b = 12;

D A R T R U N T I M E M O D E S • Checked mode • VM inserts type assertion checks at runtime • Will throw exception if types don’t match up: • If expecting type A then you can use an item which is type A or any of A’s subtypes. • Will throw exception if an assert() statement fails • Production mode (default) • Ignores all type annotations • Better performance because no type checks needed • Ignores all assert() statements

F U N C T I O N D E F I N I T I O N var loudify = (msg) => '!!! ${msg.toUpperCase()} !!!'; print(loudify('hello')); /* !!! HELLO !!! */ void show({firstName: 'Foo', lastName: 'Bar'}) { print("${firstName} ${lastName}"); } ! show('Mark'); /* throws Exception */ show('Mark', 'Twain'); /* throws Exception */ show(firstName: 'Mark'); /* Mark Bar */ show(lastName: 'Twain'); /* Foo Twain */

T Y P E D E F S typedef int Compare(int a, int b); ! int comp1(int a, int b) => a - b; ! int comp2(bool a, int b) => a - b; ! String run(Compare sortFunction) => 'ok'; ! void main() { print(comp1 is Function); /* true */ print(comp1 is Compare); /* true */ ! print(run(comp1)); /* ok */ ! print(run(comp2)); /* throws TypeError */ }

A N D T H E R E S T… • Closures - similar to Javascript • Operators - Arithmetic, logic, assignment, bitwise, comparison, etc. • Collections - lists (like Javascript arrays), sets, maps • Control flow - if-else, for/do-while, switch-case • Exceptions - throw, catch, finally • Reflections API • Typed data, SIMD, etc.

O B J E C T O R I E N T E D P R O G R A M M I N G A R C H I T E C T U R E

B A S I C C L A S S E S class StrRep { String str; String finalStr; num count; // constructor with initializer list StrRep(this.str, this.count); ! build() => finalStr = str.trim().toUpperCase() + count.toString(); void display() => print(this.finalStr); } ! void main() { // use the cascade operator (..) new StrRep('NaN ', 3) ..build() ..display(); /* NAN3 */ }

G E T T E R S A N D S E T T E R S class Box { num _top; ! Box(this._top); num get top => _top; set top(num value) => _top = value * 2; } ! main() { var box = new Box(5); print(box.top); /* 5 */ box.top = 5; print(box.top); /* 10 */ }

FA C T O RY / S I N G L E T O N class Store { var data; static Store _cache = null; // visible constructor factory Store() { if (null == _cache) { _cache = new Store._internal(); } return _cache; } // hidden constructor Store._internal(); } ! void main() { new Store().data = 'secret stuff'; var b = new Store(); print(b.data); /* secret stuff */ }

O P E R AT O R O V E R L O A D class Vector { final int x; final int y; Vector(this.x, this.y); ! // Override + (a + b). Vector operator +(Vector v) { return new Vector(x + v.x, y + v.y); } } ! main() { // final = cannot modify this variable after this final v = new Vector(2,3); final w = new Vector(2,2); ! assert((v+w).x == 4 && (v+w).y == 5); // v+w == (4,5) }

S I M P L E I N H E R I TA N C E class Shape { void draw() => print('shape'); } ! class Rectangle extends Shape {} ! class Square extends Rectangle { void draw() => print('square'); } ! void main() { new Rectangle().draw(); /* shape */ new Square().draw(); /* square */ }

G E N E R I C S class Cache<T> { Map<String,T> _m; Cache() { _m = new Map<String, T>(); } T get(String key) => _m[key]; set(String key, T value) => _m[key] = value; } ! void main() { var c = new Cache<String>(); c.set('test', 'value'); print(c.get('test') == 'value'); c.set('test', 43); // fails in checked mode } Love this? read C++ Template Metaprogramming

M O R E O O P… • Implicit Interfaces - if you implement a class then it becomes a specification • Abstract classes - if you don’t want the parent class to ever be instantiated make it abstract • Mixins - if you want to inherit from more than one class this helps

L I B R A R I E S A N D PA C K A G E S S H A R I N G C O D E

L I B R A R I E S NOTE: Identifiers that start with underscore (_) are not visible outside the library library calc; // optional ! int _add(int x, int y) => x + y; ! int sum3(int x, int y, int z) => _add(_add(x,y), z); import './calc.dart'; ! void main() { print(sum3(11, 12, 13)); /* 36 */ print(_add(11, 12)); /* throws NoSuchMethodError */ }

B U I LT- I N L I B R A R I E S // only show certain items import "dart:math" as Math show PI; ! // hide certain items import "dart:collection" as Collection hide LinkedList; ! void main() { print(Math.PI); /* 3.14 */ print(Math.E); /* throws exception */ new Collection.LinkedList(); /* throws exception */ } • dart:core is always automatically imported • More at: https://api.dartlang.org/apidocs/channels/ stable/dartdoc-viewer/home

C O M M U N I T Y L I B R A R I E S name: example description: A sample command-line application dependencies: quiver: any • pub.dartlang.org • Command-line package manager: pub $ p u b g e t ! Resolving dependencies... Got dependencies! • Step 1 - specify dependencies in pubspec.yaml: • Step 2 - install dependencies:

A S Y N C H R O N O U S P R O G R A M M I N G A L L A T O N C E …

A D D I N G A M I C R O TA S K • Can directly add to the microtask queue • Use scheduleMicrotask(fn) • Will ensure your task runs before the next event queue item ! • BUT this delays event processing • Use the event queue (i.e. a Future) when possible.

F U T U R E S • Known as “Promises” in Javascript • Futures get added to the event queue • API can wrap sync methods, wait for multiple Futures, etc. import “dart:async"; ! Future result = costlyQuery(); ! result .then((value) => expensiveWork(value)) .then((value) => lengthyComputation(value)) .then((value) => print(value)) .catchError((exception) => print('DOH!')) .whenComplete(closeConnection); // may return a Future

S T R E A M S • Produce one or more events that listeners receive • Two types • Broadcast - multiple listeners, doesn’t wait for listeners before sending • Single-subscription - one listener, queues events and awaits a listener • Can be paused (will buffer events until unpaused) • Can be proxied and transformed (e.g. music processing) • Auto-unsubscribe listeners when ‘done’ event sent

E X A M P L E S T R E A M import 'dart:async'; ! main() { var data = [1,2,3,4,5]; // some sample data var stream = new Stream.fromIterable(data); ! // subscribe to the streams events stream.listen((value) { // print("Received: $value"); // onData handler }); // }

I S O L AT E S • Isolate - light-weight unit of concurrency • Each has its own memory and “thread of control” • Uses message passing to communicate with others • Main app always runs within its own isolate • Standalone Dart VM always runs isolates in parallel, using all available CPU cores (yay!) • Browser Dart VM may use web workers, thought not every browser implementation may do this

// alice.dart ! import "dart:async"; import "dart:isolate"; ! void main() { var response = new ReceivePort(); Future<Isolate> remote = Isolate.spawnUri(Uri.parse("bob.dart"), ["foo"], response.sendPort); remote.then((_) => response.first) .then((msg) { print("received: $msg"); }); } // bob.dart ! import "dart:isolate"; ! void main(List<String> args, SendPort replyTo) { replyTo.send(args[0]); }

O T H E R A S Y N C S T U F F… • Futures - delaying execution, waiting for multiple • Streams - testing event before handling it • Zones - asynchronous dynamic extents • Timers • I/O

B U I L D I N G W E B A P P S H T M L + J A VA S C R I P T

E M B E D I N H T M L  <script type='application/dart' src='app.dart'></script> !  <script src="packages/browser/dart.js"></script> 1. Compile into JS $ d a r t 2 j s - o a p p . d a r t . j s a p p . d a r t 2. Add to end of HTML body • main() invoked after DOM content is loaded. • One Dart script per page. Do not use inline scripts, async/ defer, or rely on injection of code or ordering of scripts

K N O W Y O U R B L O AT void main() { print('Hello, World!'); } • dart2js output: 14,334 bytes • Browser package (dart.js): 1,270 bytes ! • Total: 15,645 bytes (~15 KB) • And don’t forget app startup time • Dart source: 41 bytes

C A L L I N T O J AVA S C R I P T import 'dart:js'; ! void main() { var p1 = new JsObject(context['Point'], [5, 1]); ! p1['x'] = 100; print(p1['x']); // Prints 100. var p2 = new JsObject(context['Point'], [1, -2]); print(p1.callMethod('distanceFrom', [p2])); } var Point = function(x, y) { this.x = x; this.y = y; this.distanceFrom = function(otherPoint) { return Math.sqrt(Math.pow(otherPoint.x - this.x, 2) + Math.pow(otherPoint.y - this.y, 2)); }; };

D O M I N T E R A C T I O N S import "dart:html"; ! void main() { // returns List<Element> var buttons = document.querySelectorAll('.clearfix'); // attributes = Map<String,String> buttons[0].attributes.remove('name'); var newElem = new ButtonElement() ..id = 'mozillaBtn' ..classes.add('mozilla') // Set<String> ..text = 'Mozilla'; document.nodes.add(newElem); // events are streams newElem.onClick.listen( (event) => print('click!') ); }

C H E C K O U T… • Polymer - web components • AngularDart (port of Angular.js) • JSON serialization/de-serialization • HttpRequest (like XMLHttpRequest) • IndexedDB • SVG • Web audio, WebGL

P E R F O R M A N C E V S J AVA S C R I P T D A R T …

J AVA S C R I P T C O M PA R I S O N • https://www.dartlang.org/performance/ • Dart always faster than Javascript • dart2js output mostly slower than Javascript • http://www.techempower.com/benchmarks/ • Server-side Dart still mostly slower than Node.js But why does Dart perform better?

W H Y D A R T P E R F O R M S B E T T E R • Simpler object model • Straightforward language semantics • Fewer special corner cases to worry about • e.g. Can’t modify Object prototype at runtime • More predictable performance • Better memory utilisation • Less generated code

F I N D O U T M O R E … • https://www.youtube.com/watch?v=huawCRlo9H4 • Google I/O 2013 talk on Dart and JS VM performance • Also talks about work needed to ship Dart VM with Chrome browser

PA R A L L E L P R O C E S S I N G • SIMD • “Single Instruction Multiple Data” • Float32x4, Int32x4 • Operate on numbers in parallel • Efficient CPU usage • Potential speedup of 400% over non-parallel computation • Useful for 3D graphics, audio processing, etc.

T H E F U T U R E L O O K T O …

W H O I S U S I N G I T N O W ? • drone.io - Continuous integration server • worktrail.net - time tracking app • Spark - Chrome app-based IDE • anionu.com - cloud security • …many more ! • https://www.dartlang.org/community/who-uses-dart.html

B R O W S E R S U P P O R T • Chrome: Coming soon, need to implement new DOM-to-VM memory management model first. • Firefox: "Most browsers have no reason to include Dart because doing so would not only be extremely difficult for engineers to accomplish in each major browser, it would also result in a quality hit,” • Safari: ”Two runtimes sharing the DOM adds both bug habitat and a performance tax” • IE: "In practice, JavaScript performance is not the bottleneck in real-world performance”. • Microsoft are banking on TypeScript, a language which translates to Javascript

@ H I D D E N TA O That’s all folks!

Introduction to Dart

More Related Content

What's hot

Viewers also liked

Similar to Introduction to Dart

More from RameshNair6

Recently uploaded

Introduction to Dart