Introduction to dart - So@t - 20130410

DART
Yohan BESCHI – Java Developer
@yohanbeschi
+Yohan Beschi
2013-04-10 Introduction to Dart 1

Building UIs - Javascript ?


Building UIs - Java ?


Building UIs with Java - But how ?


Programmatic Components with GWT

CellTable<User> table = new CellTable<User>(); }
});
TextColumn<User> idColumn = new TextColumn<User>() { columnSortHandler.setComparator(firstNameColumn,
@Override new Comparator<Tester.User>() {
public String getValue(User user) { public int compare(User o1, User o2) {
return user.id; if (o1 == o2) {
} return 0;
}; }

TextColumn<User> firstNameColumn = new TextColumn<User>() { if (o1 != null) {
@Override return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1;
public String getValue(User user) { }
return user.firstName; return -1;
} }
}; });
columnSortHandler.setComparator(lasteNameColumn,
TextColumn<User> lastNameColumn = new TextColumn<User>() { new Comparator<Tester.User>() {
@Override public int compare(User o1, User o2) {
public String getValue(User user) { if (o1 == o2) {
return user.lastName; return 0;
} }
};
if (o1 != null) {
TextColumn<User> ageColumn = new TextColumn<User>() { return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1;
@Override }
public String getValue(User user) { return -1;
return user.age; }
} });
}; columnSortHandler.setComparator(ageColumn,
new Comparator<Tester.User>() {
idColumn.setSortable(true); public int compare(User o1, User o2) {
firstNameColumn.setSortable(true); if (o1 == o2) {
lastNameColumn.setSortable(true); return 0;
ageColumn.setSortable(true); }

table.addColumn(idColumn, "ID"); if (o1 != null) {
table.addColumn(firstNameColumn, "First name"); return (o2 != null) ? o1.age.compareTo(o2.age) : 1;
table.addColumn(lastNameColumn, "Lats name"); }
table.addColumn(ageColumn, "Age"); return -1;
}
ListDataProvider<User> dataProvider = new ListDataProvider<User>(); });
dataProvider.addDataDisplay(table); table.addColumnSortHandler(columnSortHandler);
table.getColumnSortList().push(firstNameColumn);
List<User> list = dataProvider.getList();
for (User user : USERS) {
list.add(user);
}

ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);
columnSortHandler.setComparator(idColumn,
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}

if (o1 != null) {
return (o2 != null) ? o1.id.compareTo(o2.id) : 1;
}
return -1;


Programmatic Components with GWT

CellTable<User> table = new CellTable<User>(); }
});
TextColumn<User> idColumn = new TextColumn<User>() { columnSortHandler.setComparator(firstNameColumn,
@Override new Comparator<Tester.User>() {
public String getValue(User user) { public int compare(User o1, User o2) {
return user.id; if (o1 == o2) {
} return 0;
}; }

TextColumn<User> firstNameColumn = new TextColumn<User>() { if (o1 != null) {
@Override return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1;
public String getValue(User user) { }
return user.firstName; return -1;
} }
}; });
columnSortHandler.setComparator(lasteNameColumn,
TextColumn<User> lastNameColumn = new TextColumn<User>() { new Comparator<Tester.User>() {
@Override public int compare(User o1, User o2) {
public String getValue(User user) { if (o1 == o2) {
return user.lastName; return 0;
} }
};
if (o1 != null) {
TextColumn<User> ageColumn = new TextColumn<User>() { return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1;
@Override }
public String getValue(User user) { return -1;
return user.age; }
} });
}; columnSortHandler.setComparator(ageColumn,
idColumn.setSortable(true); public int compare(User o1, User o2) {
firstNameColumn.setSortable(true); if (o1 == o2) {
lastNameColumn.setSortable(true); return 0;
ageColumn.setSortable(true); }

table.addColumn(idColumn, "ID"); if (o1 != null) {
table.addColumn(firstNameColumn, "First name"); return (o2 != null) ? o1.age.compareTo(o2.age) : 1;
table.addColumn(lastNameColumn, "Lats name"); }
table.addColumn(ageColumn, "Age"); return -1;
}
ListDataProvider<User> dataProvider = new ListDataProvider<User>(); });
dataProvider.addDataDisplay(table); table.addColumnSortHandler(columnSortHandler);
table.getColumnSortList().push(firstNameColumn);
List<User> list = dataProvider.getList();
for (User user : USERS) {
list.add(user);
}

ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);
columnSortHandler.setComparator(idColumn,
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}

if (o1 != null) {
return (o2 != null) ? o1.id.compareTo(o2.id) : 1;
}
return -1;


The Dart Way
Table<User> table = new Table (sorting:true)
..addColumn('ID', new TextCell((User o) => o.id))
..addColumn('First name', new TextCell((User o) => o.firstName))
..addColumn('Last name', new TextCell((User o) => o.lastName))
..addColumn('Age', new TextCell((User o) => o.age))
..setData(objs);


The Dart Way
Table<User> table = new Table (sorting:true)
..addColumn('ID', new TextCell((User o) => o.id))
..addColumn('First name', new TextCell((User o) => o.firstName))
..addColumn('Last name', new TextCell((User o) => o.lastName))
..addColumn('Age', new TextCell((User o) => o.age))
..setData(objs);

6 lines


Dart is the winner


Once upon a time…


Programmer productivity


Application scalability


Raw execution speed


Startup performance


And here we are!

⦿ Open Source (BSD)
⦿ Structured
⦿ Anti-Revolutionary
⦿ Same goals as new Javascript frameworks
⦿ The goal is to not break the web


Dart Ecosystem

Dart Editor
Dartium
Tools dart2js
pub
Dart dartdoc

Server dart:io
VMs
Browser dart:html


Virtual Machines


Dartium


DartEditor


Plugins


dart2js


dart2js

⦿ Target HTML5
⦿ Tree Shaking
⦿ Aggregation/Minification
⦿ Optimization


pub


pub

pubspec.yaml
name: pacifista_rocks
description: The best application in the whole world
version: 0.0.1
dependencies:
great_lib: any


dartdoc

/// This is a single-line documentation comment.

/**
* This is a multi-line documentation comment.
* To generate the documentation:
* $ dartdoc <filename>
*/
void main() {

}


dartdoc


Dart – The Language

https://github.com/yohanbeschi/lang.dart

Entry Point
void main() {

}


Comments
void main() {
// This is a single-line comment.

/*
* This is a
* multi-line
* comment.
*/
}


Types - Boolean
var boolean1 = true;
var boolean2 = false;

bool boolean3 = true;
bool boolean4 = false;


Types - String
String singleQuotes = 'Single quotes.';
String doubleQuotes = "Double quotes.";

// String interpolation
print('Hello $singleQuotes ${doubleQuotes.toUpperCase()}');

// Multi-line String
print('''With
triple simple quotes
I can define
a string
over multiple
lines''');

// Raw String
print(r'Hello n $singleQuotes ${doubleQuotes.toUpperCase()}');


Types - Numbers
num integer = 30;
print('integer is num: ${integer is num}'); // true
print('integer is int: ${integer is int}'); // true
print('integer is double: ${integer is double}'); // false

num intgerToo = 3.0;
print('intgerToo is num: ${intgerToo is num}'); // true
print('intgerToo is int: ${intgerToo is int}'); // true
print('intgerToo is double: ${intgerToo is double}'); // false

num doubl = 1.1;
print('doubl is num: ${doubl is num}'); // true
print('doubl is int: ${doubl is int}'); // false
print('doubl is double: ${doubl is double}'); // true


Types - Numbers
int realInt = 3;
print('realInt is num: ${realInt is num}'); // true
print('realInt is int: ${realInt is int}'); // true
print('realInt is double: ${realInt is double}'); // false

double realDouble = 1.1;
print('realDouble is num: ${realDouble is num}'); // true
print('realDouble is int: ${realDouble is int}'); // false
print('realDouble is double: ${realDouble is double}'); // true


Types – Lists
List realList = [1, true, 'String', 5.6e5];

// Creating an extendable list
List dynamicList = new List();
//dynamicList[0] = 1; // throws an exception
dynamicList.add(1);
dynamicList.add(true);
dynamicList.add('String');
dynamicList.add(5.6e5);

// Creating an empty fixed size list
// List fixedList = [null, null, null, null];
List fixedList = new List(4);
//fixedList.add(1); // throws an Exception
fixedList[0] = 1;
fixedList[1] = true;
fixedList[2] = 'String';
fixedList[3] = 5.6e5;


Types – Maps
Map realMap = {'key': 'value', '1': 1};

Map newMap = new Map();
newMap[1] = true;
newMap['1'] = false;
print(newMap);
print('${newMap[1]} ${newMap['1']}');

Map<String, int> genericMap = new Map();
genericMap['one'] = 1;
genericMap[2] = '2'; // Warning, but doesn't really matter
print(genericMap);


Conditionals – if/else
if (/* condition */) {
//
} else if (/* other condition */) {
//
} else {
//
}


Conditionals – switch
switch(variable) {
case 1:
case 2:
//
break;
case 8:
case 9:
//
break;
default:
//
break;
}


Loops – For in
void main() {
List<int> list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
int sum = 0;

for (int element in list) {
sum += element;
}

assert(sum == 45);
}


Functions – Top-level functions
void main() {
int squaredNum = square(2);
assert(squaredNum == 4);
}

int square(int i) {
return i * i;
}


Functions – First-class functions
void main() {
List operation1 = ['+', '5', '2'];
num result1 = compute(operation1);
assert(result1 == 7);
}

num compute(List operation) {
Function operator = findOperator(operation[0]);
double left = double.parse(operation[1]);
double right = double.parse(operation[2]);

return operator(left, right);
}


Functions – typedef
void main() {
List operation1 = ['+', '5', '2'];
int result1 = computeList(operation1);
assert(result1 == 7);
}

typedef int Operator(num left, num right);

int computeList(List operation) {
Operator operator = findOperator(operation[0]);
int left = int.parse(operation[1]);
int right = int.parse(operation[2]);

return operator(left, right);
}


Classes abstraites

abstract class Validatable {

}


Classes abstraites

abstract class Validatable {
List<Object> valuesToValidate();
}


Classes abstraites

abstract class Validator<T extends Validatable> {

}


Classes abstraites

bool validate(T object) {

}
}


Classes abstraites

for (Object obj in object.valuesToValidate()) {

}
}
}


Classes abstraites

if (StringUtils.isEmpty(obj.toString())) {

}
}
}
}


Classes abstraites

if (StringUtils.isEmpty(obj.toString())) {
return false;
}
}

return true;
}
}


Classes concrètes

class User {

}


Classes concrètes

class User implements Validatable {

}


Classes concrètes

String username;
String password;

}


Classes concrètes

String username;
String password;

User(this.username, this.password);

}


Classes concrètes

String username;
String password;

User(this.username, this.password);

List<Object> valuesToValidate() {
return [username, password];
}
}


But there is more…

⦿ Mixins
⦿ Optionally typed
⦿ Top level functions
⦿ Mono process


Dart Reference API

⦿ Core ⦿ TU et Mocks
⦿ HTML ⦿ Math
⦿ Async ⦿ Logging
⦿ IO ⦿ URI
⦿ Crypto ⦿ I18N
⦿ JSON ⦿ etc.
⦿ Mirrors
⦿ UTF


Isolates


Uses

⦿ Single-page Web Apps
⦿ Client and server side applications
⦿ HTML Games


Roadmap

Today : M3 ?? : M4 Summer 2013 : V1 !


UIs


Objectives
<ul>
<li>School 1</li>
<li>School 2
<ul>
<li>Grade 2.1</li>
<li>Grade 2.2
<ul>
<li>Person 2.2.1</li>
<li>Person 2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>School 3
<ul>
<li>Grade 3.1</li>
</ul>
</li>
<li>School 4</li>
</ul>


Classes
class School { class Grade {
String schoolName; String schoolGrade;
List<Grade> grades; List<Student> students;

School(this.schoolName, Grade(this.schoolGrade,
[this.grades]); [this.students]);
} }

class Student {
String firstname;
String lastname;

Student(this.firstname,
this.lastname);
}


The Old-Fashioned Way


void main() {
String tree = '<ul>';

for (School school in schools) {
tree += '<li>${school.schoolName}';

// Grades

tree += '</li>';
}

tree += '</ul>';

query('body').insertAdjacentHtml('afterBegin', tree);
}


var grades = school.grades;
if (grades != null) {
tree += '<ul>';

for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';

// Students

tree += '</li>';
}

tree += '</ul>';
}


var students = grade.students;
if (students != null) {
tree += '<ul>';

for (Student student in students) {
tree +=
'<li>${student.firstname} ${student.lastname}</li>';
}

tree += '</ul>';
}


void main() { tree += '</ul>';
String tree = '<ul>'; }

for (School school in schools) { tree += '</li>';
tree += '<li>${school.schoolName}'; }

var grades = school.grades; tree += '</ul>';
tree += '<ul>'; query('body')
.insertAdjacentHtml('afterBegin', tree);
for (Grade grade in grades) { }

var students = grade.students;
if (students != null) {
tree += '<ul>';

for (Student student in students) {
tree += '<li>${student.firstname}
${student.lastname}</li>';
}

tree += '</ul>';
}
tree += '</li>';
}


Introducing reusable components


Is there a pattern here ?
tree += '<ul>';


// Students

tree += '</li>';
}

tree += '</ul>';
}



tree += '<ul>';

tree += '</ul>';
}



tree += '<ul>';


tree += '</li>';
}

tree += '</ul>';
}



tree += '<ul>';


// Do the same with children

tree += '</li>';
}

tree += '</ul>';
}


Recursive Pattern
String doSomething(/* parameters */) {
String tree = '';

tree += '<ul>';

tree += doSomething(/* parameters */);
tree += '</li>';
}

tree += '</ul>';
}

return tree;
}


Side note – Functions & sugar syntax
int length(String s) {
return s.length;
}


Side note – Functions & sugar syntax
int length(String s) { int length(String s)
return s.length; => s.length;
}


Easy use of reusable components
void main() {
final Tree tree = new Tree(...);
}


void main() {
final Tree tree = new Tree(...);
tree.setData(schools);
tree.addTo('body', 'afterBegin');
}


void main() {
final Tree tree = new Tree(
[new TreeConfig((School s) => s.schoolName,
(School s) => s.grades),
new TreeConfig((Grade g) => g.schoolGrade,
(Grade g) => g.students),
new TreeConfig((Student s) =>
'${s.firstname} ${s.lastname}')]
);
tree.setData(schools);
tree.addTo('body', 'afterBegin');
}


class School { class Grade {
String schoolName; String schoolGrade;
List<Grade> grades; List<Student> students;

School(this.schoolName, Grade(this.schoolGrade,
[this.grades]); [this.students]);
} }

class Student{
String firstname;
String lastname;

Student(this.firstname,
this.lastname);
}


Implementing a reusable components
typedef dynamic Accessor(dynamic data);

class TreeConfig {
Accessor _value;
Accessor _children;

TreeConfig(Accessor this._value,
[Accessor this._children]);

Accessor get value => _value;
Accessor get children => _children;
}



class TreeConfig {
Accessor _value;
Accessor _children;


}


class Tree {
List<TreeConfig> treeConfigs;

String tree;

Tree(this.treeConfigs);

String setData(final List data) {
// Build tree
}

void addTo(String selector,
[String where = 'afterEnd']) {
query(selector).insertAdjacentHtml(where, this.tree);
}
}


class Tree {

String tree;


// Build tree
}

}
}


String buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
String tree = '';

if (data != null && !data.isEmpty) {

}

return tree;
}


String tree = '';


final TreeConfig treeNode = treeNodes[depth];

tree += '<ul>';

for (dynamic element in data) {

}

tree += '</ul>';

}

return tree;
}


String tree = '';


tree += '<ul>';


tree += '<li>${treeNode.value(element)}';

tree += '</li>';

}

tree += '</ul>';
}

return tree;
}


String buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,
String tree = '';


tree += '<ul>';

tree += '<li>${treeNode.value(element)}';

if (treeNode.children != null) {
tree += buildOneLevelTree(treeNode.children(element),
treeNodes, depth + 1);
}

tree += '</li>';
}

tree += '</ul>';
}

return tree;
}


class Tree {
String tree;



this.tree = buildOneLevelTree(data, this.treeConfigs);
return this.tree;
}

// Implementation
}
}
}


Getting ride of Strings
Element buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,
Element tree; // String tree = '';


tree = new UListElement(); // tree += '<ul>';

final LIElement li = new LIElement(); // <li>;
li.text = treeNode.value(element); // ${treeNode.value(element)}

if (treeNode.children != null) {
final UListElement ulChild = //
buildOneLevelTree(treeNode.children(element), treeNodes, depth + 1);

if (ulChild != null) { //
li.append(ulChild); // tree += buildOneLevelTree(...)
} //
}

tree.append(li); // tree += '<li>${treeNode.value(element)}';
}
}

return tree;
}


Getting ride of Strings
class Tree {
Element tree; // String tree;


Element setData(final List data) {
this.tree = buildOneLevelTree(data, this.treeConfigs);
return this.tree;
}

Element buildOneLevelTree(final List data,
// Implementation
}

query(selector).insertAdjacentElement(where, this.tree);
}
}


web_ui


web_ui
⦿ Based on HTML5 Web Components Spec
⦿ Syntax and uses similar to JSP tags
⦿ Template Engine – Compilation needed
⦿ Reusable components
⦿ CSS encapsulation
⦿ Data-binding
⦿ Complex for real life use-cases
⦿ Doesn’t solve layouting problems


web_ui and Single-Page Webapps
<!DOCTYPE html>

<html>
<head>
<title>01_web_ui</title>
</head>

<body>
<script type="application/dart" src="01_web_ui.dart">
</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>


web_ui - The template
<!DOCTYPE html>

<html>
<body>

</body>
</html>


<!DOCTYPE html>

<html>
<body>
<element>

</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<element name="x-click-counter">

</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<element name="x-click-counter" constructor="CounterComponent">

</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">

</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<template>

</template>
</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<template>
<div>
<button>Click me</button><br />
<span>(click count: {{count}})</span>
</div>
</template>
</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<template>
<div>
</div>
</template>
</element>
</body>
</html>


<!DOCTYPE html>

<html>
<body>
<template>
<div>
</div>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
</body>
</html>


web_ui – Extending WebComponent
class CounterComponent {

}


class CounterComponent extends WebComponent {

}


@observable
int count = 0;

}


@observable
int count = 0;

void increment(Event event) {
count++;
}
}


@observable
int count = 0;

void increment(Event event) {
count++;
}

void inserted() {
this.query('button').onClick.listen(increment);
}
}


web_ui and Single-Page Webapps
<!DOCTYPE html>

<html>
<head>
<title>01_web_ui</title>
<link rel="components" href="xclickcounter.html">
</head>

<body>
<script type="application/dart" src="01_web_ui.dart">
</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>


web_ui – The application
void main() {

}


void main() {
var element = new Element.html(
'<x-click-counter id="click_counter"></x-click-counter>'
);
}


void main() {
);
var counter = new CounterComponent()
..host = element
..count = 25;
}


void main() {
);
..host = element
..count = 25;

var lifecycleCaller = new ComponentItem(counter)
..create();
query('body').append(counter.host);
lifecycleCaller.insert();
}


void main() {
);
..host = element
..count = 25;

var lifecycleCaller = new ComponentItem(counter)..create();
query('body').append(counter.host);
lifecycleCaller.insert();

var button = new ButtonElement()
..text = 'Update'
..onClick.listen((e) {
counter.count = 100;

watchers.dispatch();
});
query('body').append(button);
}


A word about Layouts


builder()
..div({'id' : 'banner'})
..div({'id' : 'head'}, 'Dart Playground')
..div({'id' : 'controls'})
..span(null, 'Environment: ')
..addElement(listboxEnv)
..addElement(runButton)
..end() // controls
..end() // banner
..div({'id':'wrap'})
..addElement(e(linedTextarea.element))
..end() // wraps
..addElement(output);


builder()
..end() // controls
..end() // banner
..end() // wraps


The Future of Dart ?


Want to know more ?
DartLangFR
⦿ Mailing-list : dartlangfr (https://groups.google.com/forum/?fromgroups=&hl=en#!forum/dartlangfr)
⦿ Google+ : DartlangFR (https://plus.google.com/u/0/communities/104813951711720144450)
⦿ Twitter : @dartlang_fr
⦿ Blog : dartlangfr.net

DartLang
⦿ Official website: www.dartlang.org
⦿ Mailing-list : dartlang
(https://groups.google.com/a/dartlang.org/forum/?fromgroups&hl=en#!forum/misc)
⦿ Google+ : Dart (https://plus.google.com/+dartlang)
⦿ Google+ : Dartisans (https://plus.google.com/communities/114566943291919232850)
⦿ Twitter : @dart_lang
⦿ Blog : blog.dartwatch.com
⦿ Newsletter : Dart weekly


Github
⦿ Paris JUG
⦿ https://github.com/yohanbeschi/parisjug_20130409.dart

⦿ DevoxxFR 2013
⦿ https://github.com/yohanbeschi/devoxxfr_20130327.dart

⦿ Widgets
⦿ https://github.com/yohanbeschi/pwt_proto.dart

⦿ Web Editor for Dart
⦿ https://github.com/yohanbeschi/web_editor.dart


What’s next ?

https://github.com/yohanbeschi/soat_20130410.dart


Questions ?


Introduction to dart - So@t - 20130410

Recommended

More Related Content

Similar to Introduction to dart - So@t - 20130410 (20)

More from yohanbeschi (6)

Recently uploaded (20)

Introduction to dart - So@t - 20130410