Dartprogramming

A Mystery Walking in the DART Side

Ali Parmaksız
@parmaksiza
March 19, 2013 ali.parmaksiz@eu.sony.com

http://aliparmaksiz.blogspot.com/

Agenda
• Motivation
• DART Language Properties
• DART Compilation Cycle
• Discussion

Current WEB
• Good Parts
o Javascript is flexible and incremental development
o Platform independent, write and runs everywhere
o No installation of any application.

• Bad Parts
o Weak tool support
o Writing large well-performing applications is hard
o Difficult to document the intent
o Backward compatibility
o No static type
o Unpredictable performance and results ( http://wtfjs.com/ )

Dart is…..
Structured Web Programming
• New language

• New tools

• New libraries

• Open source

• Announced in early October 2011

• Being developed on dart.googlecode.com

• Currently milestone version, technology preview…

What is Dart as a Language ?
• A simple, unsurprising OO language

• Class based, single inheritance with interfaces

• Optional static typing

• Real lexical scoping and closures

• Single threaded

• Familiar syntax (to the Java[Script] developer)

Dart Type Checker
• Traditional Type Checker
o Tries to prove program obey the rules
o If checker finds a breaking rule concept, it considers program is invalid
and becomes angry
• GUILTY UNTIL YOU PROVEN INNOCENT

• Dart is Different
o INNOCENT UNTIL PROVEN YOUR GUILTY

Optional Static Types
• Increases the productivity of the developer
• Communication to the other developer becomes
more efficient
• Machine code performance can be better

Isolates
• Operating process concurrently
• No shared-memory threads.
• Code runs in isolates, which communicate via
message passing

• JavaScript Web Worker

Isolates
• The content of a message can be any of the following
o A primitive value (null, num, bool, double, String)
o An instance of SendPort
o A list or map whose elements are any of the above, including other lists
and maps
o An object of any type

• ReceivePort as a <<port>> variable object

• No isolate can see or manipulate values owned by another
isolate.

Isolates
import 'dart:isolate';
runInIsolate() {
print('hello from an isolate!');
}

main() {
spawnFunction(runInIsolate); // Note: incomplete. // Use a
//ReceivePort (details below) to keep the root isolate alive // long enough for

runInIsolate() to perform its work.
}

Isolates

echo() {
port.receive((msg, reply) {
print('I received: $msg');
});
}

main() {
var sendPort = spawnFunction(echo);
sendPort.send('Hello from GDG Istanbul March');
}

Isolates

echo() {
print(msg);
reply.send("Receiver, Ali Parmaksiz: What about tomorrow morning? :P");
});
}

main() {
sendPort.call("Sender, Murat Yener: Hey dude, when do we have a
breakfast").then((reply) {
print(reply);
});
}

Isolates

echo() {
msg="Murat Yener: Hey dude, when will i prepare you a delicious breakfast :P";
print(msg);
reply.send("Ali Parmaksiz: What about tomorrow morning? :P"); });
}

main() {
String message="Murat Yener: Hey dude, when do we have a breakfast";

sendPort.call(message).then((reply) {
print(reply);
print(message);
});

}

echo() {
print(msg);
String msgStr=msg;

if(msgStr.startsWith("This is the second message")==true) {
reply.send("Message is not changed, $msg ");
} else {
msg="message is changed inside isolate";
reply.send("Message is changed :P $msg");
}
});
}
main() {
String message="This is the first message";
print("reply comes 1st: $reply");
print("message comes 1st: $message");
});

message="This is the second message";
print("reply comes 2nd: $reply");
print("message comes 2nd: $message");
});
}

Mirror in Dart
• Reflection is done via mirror objects.
• dart2js, it is only taken the first baby steps toward a similar implementation

import 'dart:mirrors';

class MyClass {
int i, j;
void my_method() { }
int sum() => i + j;
MyClass(this.i, this.j);
static noise() => print("42");
static var s;
}
main() {
MyClass myClass = new MyClass(3, 4);
InstanceMirror myClassInstanceMirror = reflect(myClass);
ClassMirror MyClassMirror = myClassInstanceMirror.type;
for (var m in MyClassMirror.members.values) print(m.simpleName);
MyClassMirror.invoke('noise', []);
}

Future in Dart
• Handle asynchronous callback driven programs
• Unlock the UI thread
• Callbacks are typical ways to make UI responsive and keep expensive
processes off the main thread

Assume you have a code like below

button.on.click.add((e) { button.on.click.add((e) {
costlyQuery(); costlyQuery(() {
expensiveWork(); expensiveWork(() {
lengthyComputation(); lengthyComputation(() {
print("done!"); print("done!");
}); });
});
});
});

void costlyQuery(); void costlyQuery(onComplete());
void expensiveWork(); void expensiveWork(onComplete());
void lengthyComputation() void lengthyComputation(onComplete());

Future in Dart
• The Completer
The Completer makes it easy to create and signal when a Future is complete

Future<Results> costlyQuery() {
var completer = new Completer();

database.query("SELECT * FROM giant_table", (results) {
// when complete
completer.complete(results);
});

// this returns essentially immediately,
// before query is finished
return completer.future;
}

Future in Dart
main() {
var completer = new Completer<String>();
var future = completer.future;
future.then((message) {
print("Future completed with message: " +
message); });
completer.complete("foo");
// ? completer.complete("bar"); ?//

}

Mixins
• What is purpose of mixins?
• How they make developer's live easier?
class Collection<E> {
abstract Collection<E> newInstance();
Collection<E> map(f) (
var result = newInstance();
this.forEach((e){result.add(f(e))});
return result;
}
}

class DOMElementList<E> mixin Collection<E> extends DOMList {
DOMElementList<E> newInstance() {
return new DOMElementList<E>;
}
}

Web UI Package
• Web Components
o Template

<div id="mytemplate" hidden> <template id="mytemplate">
<img src="logo.png"> <img src="">
<div class="comment"></div> <div class="comment"></div>
</div> </template>
var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'http://...';
document.body.appendChild(t.content.cloneNo
de(true));

o Decorator

o Shadow DOM

o Custom DOM Element

Data binding
• One-way data binding with DART
o Embed data into your UI
<html>
<body>
<div>Hello {{dataValue}}!</div>
<script type="application/dart">
String dataValue;
main() {
var today = new DateTime.now();
dataValue = 'world ${today.year}-${today.month}-${today.day}';
}
</script>
</body>
</html>
• UI is up-to-date when the data’s value changes
o watchers.dispatch();

Data binding
• Watcher Dart Library ( Direct invocation)
<html>
<body>
<div>Hello counter: {{count}}</div>
import 'dart:html';
import 'package:web_ui/watcher.dart' as watchers;
int count;
main() {
count = 0; window.setInterval(() { count++;
watchers.dispatch(); }, 1000); }
</script>
</body>
</html>

Data binding
• Two way data-binding

o DOM element’s value is to be kept in sync with the value of a Dart variable
(an input box or a check box)
<html>
<body>
<div> Input: <input type="text" bind-value="str" placeholder="type something
here">
<div> Value: {{str}}</div>
<div> Length: {{str.length}}</div>
</div>
String str = '';
main() {}
</script>
</body>
</html>

Data binding
• Conditionals

<template if="langChoice != null && !langChoice.isEmpty">
<div>
<h3>{{ langChoice }}</h3>
<code><pre>{{ example }}</pre></code>
</div>
</template>

• <div>
<span>Search for something:</span>
<input type="text" bind-value="query">
<div>
<template instantiate='if noMatches'>
<span>No matches</span>
</template>
<template instantiate='if !noMatches'>
<span>Top results:</span>
</template>
</div>
<div>
<ul>
<template iterate='fruit in results'> <li>{{fruit}}</li> </template>
</ul>
</div>
</div>


String query = '';

List<String> fruits = const [ 'Apple', 'Apricot', 'Avocado', 'Banana', 'Blackberry',
'Blackcurrant', 'Blueberry', 'Currant', 'Cherry‘];

List<String> get results {
var lQuery = query.toLowerCase();
var res = fruits.where((v) => v.toLowerCase().contains(lQuery));
return (res.length <= 20) ? res.toList() : (res.take(20).toList()..add('... and many more')); }

bool get noMatches => results.isEmpty;

main() {}

</script>

Event Listeners
<html>
<body>
<div>
<button on-click="increment()">Click me</button>
<span>(click count: {{count}})</span>
</div>
int count = 0;
void increment(e) { count++; }
main() {} </script>
</body>
</html>

<html>
Web Components
<body>
<element name="x-click-counter" constructor="CounterComponent"
extends="div">
<template>
<button on-click="increment()">Click me
</button>
<span>(click count: {{count}})</span>
</template>
import 'package:web_ui/web_ui.dart';
class CounterComponent extends WebComponent {
int count = 0;
void increment(e) { count++; }
}
</script>
</element>
</body>
</html>

Web Component
• Instantiating and passing data
<html>
<body>

<div is="x-click-counter"></div>
main(){}
</script>
</body>
</html>

Web Component
• Instantiating and passing data
<html>
<body>

<div is="x-click-counter" count="{{myNumber}}"></div>
<div is="x-click-counter" count="{{5}}"></div>
int myNumber = 12;
main(){}
</script>
</body>
</html>

Web Components
• Passing child nodes to components

Web Components
• Importing web components
<html>
<head>
<link rel="components" href="clickcounter.html">
</head>
<body>
<div is="x-click-counter" count="{{myNumber}}"></div>
<div is="x-click-counter" count="{{5}}"></div>
int myNumber = 12;
main(){}
</script>
</body>
</html>

Dart in Server Side
• RESTful web services that send and receive data
encoded as JSON

• dart:html library and parsing JSON data using
the dart:json

• HttpRequest API && XMLHttpRequest

• Let’s investigate in some code….

Dart Tree Shaking
• Minification, but why?
• Pruning unused code?
• Shake it !!!!!!!

func1

main ?

func2

Example of Tree Shaking
String convert2UpperCase(msg) {
if (msg == null) {
throw new ArgumentError("must not be null"); }
return msg.toUpperCase();
}

String convert2LowerCase(String msg) {
if (msg == null) {
throw new ArgumentError("must not be null"); }
return msg.toLowerCase();
}

Example of Tree Shaking
main() {
var args = new Options().arguments;
if (args.length == 0) {
print("Usage: dart embiggen.dart phrase");
return;
}
var phrase = args[0];
print(convert2UpperCase(phrase));
}

After Tree Shaking
dart2js --minify --output-type=dart embiggen.dart

main() {
var args=new Options().arguments;
if (args.length == 0) {
print("Usage: dart embiggen.dart phrase");
return;
}
var phrase=args[0];
print(convert2UpperCase(phrase));
}

String convert2UpperCase (String msg) {
if (msg == null) {
throw new ArgumentError("must not be null");
}
return msg.toUpperCase();

Dart Snapshot Model
• a sequence of bytes that represents a serialized
form of one or more Dart objects
• Speeding up initial startup time
• Passing objects from one to other isolate
• A Full Snapshot
• A Script Snapshot
• Object Snapshot

Dart Execution Model
DART Source Code

Dart Tools

DART VM
Javascript Snapshot
Engine

Browser

Some Dart Bundled
Libraries
• Core lib
• HTML
• Crypto
• JSON
• Mirrors
• UTF
• Unit test and mocks
• Math
• Logging
• URI
• I18N
• More……

Discussion
• Why do i use DART instead of other flexible and
structured languages?
• Does IE, Mozillla, Apple accepts DART?
• Hey javascript is proved itself. Why do i prefer
another non-standart technology?
• Google has also GWT? So why DART?
• It aims to code on both server and client side. There
is also node.js, so why DART?

Dartprogramming

More Related Content

What's hot

Similar to Dartprogramming

Dartprogramming