Dartprogramming

March, GDG 2013

A Mystery Walking in the DART Side

Ali Parmaksız

March 19, 2013

http://aliparmaksiz.blogspot.com/

@parmaksiza

[email protected]

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 Partso 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/ )

http://wtfjs.com/

http://wtfjs.com/

http://wtfjs.com/

Dart is…..

• New language

• New tools

• New libraries

• Open source

• Announced in early October 2011

• Being developed on dart.googlecode.com

• Currently milestone version, technology preview…

Structured Web Programming

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 Checkero 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 Differento 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

• The content of a message can be any of the followingo 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

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.

}


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() {

var sendPort = spawnFunction(echo); 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);

});

}

Isolates

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());

• 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"); ?//

}

Future in Dart

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

o Decorator

o Shadow DOM

o Custom DOM Element

<template id="mytemplate"><img src=""> <div class="comment"></div>

</template>

<div id="mytemplate" hidden><img src="logo.png"> <div class="comment"></div>

</div>

var t = document.querySelector('#mytemplate'); t.content.querySelector('img').src = 'http://...'; document.body.appendChild(t.content.cloneNode(true));

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 changeso 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 somethinghere">

<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>

Web Components<html>

<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….

http://api.dartlang.org/html.html

http://api.dartlang.org/json.html

http://api.dartlang.org/html/HttpRequest.html

https://developer.mozilla.org/en/XMLHttpRequest

Dart Tree Shaking• Minification, but why?

• Pruning unused code?

• Shake it !!!!!!!

func1

func2

main ?

Example of Tree ShakingString 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 Shakingmain() {

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 Shakingdart2js --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

JavascriptEngine

SnapshotDART VM

Browser

Some Dart BundledLibraries

• 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

Documents

Transcript of Dartprogramming