introduction to dart par yohan beschi
Post on 19-May-2015
708 Views
Preview:
DESCRIPTION
TRANSCRIPT
2013-04-10 Introduction to Dart 1
DART
Yohan BESCHI – Java Developer
@yohanbeschi
+Yohan Beschi
2013-04-10 Introduction to Dart 2
Building UIs - Javascript ?
2013-04-10 Introduction to Dart 3
Building UIs - Java ?
2013-04-10 Introduction to Dart 4
Building UIs with Java - But how ?
2013-04-10 Introduction to Dart 5
Programmatic Components with GWT
2013-04-10 Introduction to Dart 6
CellTable<User> table = new CellTable<User>();
TextColumn<User> idColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.id;
}
};
TextColumn<User> firstNameColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.firstName;
}
};
TextColumn<User> lastNameColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.lastName;
}
};
TextColumn<User> ageColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.age;
}
};
idColumn.setSortable(true);
firstNameColumn.setSortable(true);
lastNameColumn.setSortable(true);
ageColumn.setSortable(true);
table.addColumn(idColumn, "ID");
table.addColumn(firstNameColumn, "First name");
table.addColumn(lastNameColumn, "Lats name");
table.addColumn(ageColumn, "Age");
ListDataProvider<User> dataProvider = new ListDataProvider<User>();
dataProvider.addDataDisplay(table);
List<User> list = dataProvider.getList();
for (User user : USERS) {
list.add(user);
}
ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);
columnSortHandler.setComparator(idColumn,
new Comparator<Tester.User>() {
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;
}
});
columnSortHandler.setComparator(firstNameColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1;
}
return -1;
}
});
columnSortHandler.setComparator(lasteNameColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1;
}
return -1;
}
});
columnSortHandler.setComparator(ageColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.age.compareTo(o2.age) : 1;
}
return -1;
}
});
table.addColumnSortHandler(columnSortHandler);
table.getColumnSortList().push(firstNameColumn);
Programmatic Components with GWT
2013-04-10 Introduction to Dart 7
CellTable<User> table = new CellTable<User>();
TextColumn<User> idColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.id;
}
};
TextColumn<User> firstNameColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.firstName;
}
};
TextColumn<User> lastNameColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.lastName;
}
};
TextColumn<User> ageColumn = new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.age;
}
};
idColumn.setSortable(true);
firstNameColumn.setSortable(true);
lastNameColumn.setSortable(true);
ageColumn.setSortable(true);
table.addColumn(idColumn, "ID");
table.addColumn(firstNameColumn, "First name");
table.addColumn(lastNameColumn, "Lats name");
table.addColumn(ageColumn, "Age");
ListDataProvider<User> dataProvider = new ListDataProvider<User>();
dataProvider.addDataDisplay(table);
List<User> list = dataProvider.getList();
for (User user : USERS) {
list.add(user);
}
ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);
columnSortHandler.setComparator(idColumn,
new Comparator<Tester.User>() {
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;
}
});
columnSortHandler.setComparator(firstNameColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1;
}
return -1;
}
});
columnSortHandler.setComparator(lasteNameColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1;
}
return -1;
}
});
columnSortHandler.setComparator(ageColumn,
new Comparator<Tester.User>() {
public int compare(User o1, User o2) {
if (o1 == o2) {
return 0;
}
if (o1 != null) {
return (o2 != null) ? o1.age.compareTo(o2.age) : 1;
}
return -1;
}
});
table.addColumnSortHandler(columnSortHandler);
table.getColumnSortList().push(firstNameColumn);
The Dart Way
2013-04-10 Introduction to Dart 8
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
2013-04-10 Introduction to Dart 9
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
2013-04-10 Introduction to Dart 10
Once upon a time…
2013-04-10 Introduction to Dart 11
Programmer productivity
2013-04-10 Introduction to Dart 12
Application scalability
2013-04-10 Introduction to Dart 13
Raw execution speed
2013-04-10 Introduction to Dart 14
Startup performance
2013-04-10 Introduction to Dart 15
And here we are!
⦿Open Source (BSD)
⦿Structured
⦿Anti-Revolutionary
⦿Same goals as new Javascript frameworks
⦿The goal is to not break the web
2013-04-10 Introduction to Dart 16
Dart Ecosystem
2013-04-10 Introduction to Dart 17
Dart
Tools
VMs
Dart Editor
Dartium
dart2js
pub
dartdoc
Server
Browser
dart:io
dart:html
Virtual Machines
2013-04-10 Introduction to Dart 18
Dartium
2013-04-10 Introduction to Dart 19
DartEditor
2013-04-10 Introduction to Dart 20
Plugins
2013-04-10 Introduction to Dart 21
dart2js
2013-04-10 Introduction to Dart 22
dart2js
2013-04-10 Introduction to Dart 23
dart2js
⦿Target HTML5
⦿Tree Shaking
⦿Aggregation/Minification
⦿Optimization
2013-04-10 Introduction to Dart 24
pub
2013-04-10 Introduction to Dart 25
pub
2013-04-10 Introduction to Dart 26
name: pacifista_rocks
description: The best application in the whole world
version: 0.0.1
dependencies:
great_lib: any
pubspec.yaml
dartdoc
2013-04-10 Introduction to Dart 27
/// This is a single-line documentation comment.
/**
* This is a multi-line documentation comment.
* To generate the documentation:
* $ dartdoc <filename>
*/
void main() {
}
dartdoc
2013-04-10 Introduction to Dart 28
Dart – The Language
2013-04-10 Introduction to Dart 29
https://github.com/yohanbeschi/lang.dart
Entry Point
2013-04-10 Introduction to Dart 30
void main() {
}
Comments
2013-04-10 Introduction to Dart 31
void main() {
// This is a single-line comment.
/*
* This is a
* multi-line
* comment.
*/
}
Types - Boolean
2013-04-10 Introduction to Dart 32
var boolean1 = true;
var boolean2 = false;
bool boolean3 = true;
bool boolean4 = false;
Types - String
2013-04-10 Introduction to Dart 33
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
2013-04-10 Introduction to Dart 34
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
2013-04-10 Introduction to Dart 35
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
2013-04-10 Introduction to Dart 36
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
2013-04-10 Introduction to Dart 37
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
2013-04-10 Introduction to Dart 38
if (/* condition */) {
//
} else if (/* other condition */) {
//
} else {
//
}
Conditionals – switch
2013-04-10 Introduction to Dart 39
switch(variable) {
case 1:
case 2:
//
break;
case 8:
case 9:
//
break;
default:
//
break;
}
Loops – For in
2013-04-10 Introduction to Dart 40
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
2013-04-10 Introduction to Dart 41
void main() {
int squaredNum = square(2);
assert(squaredNum == 4);
}
int square(int i) {
return i * i;
}
Functions – First-class functions
2013-04-10 Introduction to Dart 42
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
2013-04-10 Introduction to Dart 43
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
2013-04-10 Introduction to Dart 44
abstract class Validatable {
}
Classes abstraites
2013-04-10 Introduction to Dart 45
abstract class Validatable {
List<Object> valuesToValidate();
}
Classes abstraites
2013-04-10 Introduction to Dart 46
abstract class Validator<T extends Validatable> {
}
Classes abstraites
2013-04-10 Introduction to Dart 47
abstract class Validator<T extends Validatable> {
bool validate(T object) {
}
}
Classes abstraites
2013-04-10 Introduction to Dart 48
abstract class Validator<T extends Validatable> {
bool validate(T object) {
for (Object obj in object.valuesToValidate()) {
}
}
}
Classes abstraites
2013-04-10 Introduction to Dart 49
abstract class Validator<T extends Validatable> {
bool validate(T object) {
for (Object obj in object.valuesToValidate()) {
if (StringUtils.isEmpty(obj.toString())) {
}
}
}
}
Classes abstraites
2013-04-10 Introduction to Dart 50
abstract class Validator<T extends Validatable> {
bool validate(T object) {
for (Object obj in object.valuesToValidate()) {
if (StringUtils.isEmpty(obj.toString())) {
return false;
}
}
return true;
}
}
Classes concrètes
2013-04-10 Introduction to Dart 51
class User {
}
Classes concrètes
2013-04-10 Introduction to Dart 52
class User implements Validatable {
}
Classes concrètes
2013-04-10 Introduction to Dart 53
class User implements Validatable {
String username;
String password;
}
Classes concrètes
2013-04-10 Introduction to Dart 54
class User implements Validatable {
String username;
String password;
User(this.username, this.password);
}
Classes concrètes
2013-04-10 Introduction to Dart 55
class User implements Validatable {
String username;
String password;
User(this.username, this.password);
List<Object> valuesToValidate() {
return [username, password];
}
}
But there is more…
2013-04-10 Introduction to Dart 56
⦿Mixins
⦿Optionally typed
⦿Top level functions
⦿Mono process
Dart Reference API
⦿Core
⦿HTML
⦿Async
⦿ IO
⦿Crypto
⦿ JSON
⦿Mirrors
⦿UTF
⦿TU et Mocks
⦿Math
⦿ Logging
⦿URI
⦿ I18N
⦿etc.
2013-04-10 Introduction to Dart 57
Isolates
2013-04-10 Introduction to Dart 58
Uses
⦿Single-page Web Apps
⦿Client and server side applications
⦿HTML Games
2013-04-10 Introduction to Dart 59
Roadmap
2013-04-10 Introduction to Dart 60
Today : M3 ?? : M4 Summer 2013 : V1 !
UIs
2013-04-10 Introduction to Dart 61
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>
2013-04-10 Introduction to Dart 62
Classes
2013-04-10 Introduction to Dart 63
class School {
String schoolName;
List<Grade> grades;
School(this.schoolName,
[this.grades]);
}
class Grade {
String schoolGrade;
List<Student> students;
Grade(this.schoolGrade,
[this.students]);
}
class Student {
String firstname;
String lastname;
Student(this.firstname,
this.lastname);
}
The Old-Fashioned Way
2013-04-10 Introduction to Dart 64
The Old-Fashioned Way
2013-04-10 Introduction to Dart 65
void main() {
String tree = '<ul>';
for (School school in schools) {
tree += '<li>${school.schoolName}';
// Grades
tree += '</li>';
}
tree += '</ul>';
query('body').insertAdjacentHtml('afterBegin', tree);
}
The Old-Fashioned Way
2013-04-10 Introduction to Dart 66
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
// Students
tree += '</li>';
}
tree += '</ul>';
}
The Old-Fashioned Way
2013-04-10 Introduction to Dart 67
var students = grade.students;
if (students != null) {
tree += '<ul>';
for (Student student in students) {
tree +=
'<li>${student.firstname} ${student.lastname}</li>';
}
tree += '</ul>';
}
The Old-Fashioned Way
2013-04-10 Introduction to Dart 68
void main() {
String tree = '<ul>';
for (School school in schools) {
tree += '<li>${school.schoolName}';
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
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>';
}
tree += '</ul>';
}
tree += '</li>';
}
tree += '</ul>';
query('body')
.insertAdjacentHtml('afterBegin', tree);
}
Introducing reusable components
2013-04-10 Introduction to Dart 69
Is there a pattern here ?
2013-04-10 Introduction to Dart 70
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
// Students
tree += '</li>';
}
tree += '</ul>';
}
Is there a pattern here ?
2013-04-10 Introduction to Dart 71
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
tree += '</ul>';
}
Is there a pattern here ?
2013-04-10 Introduction to Dart 72
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
tree += '</ul>';
}
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
tree += '</li>';
}
Is there a pattern here ?
2013-04-10 Introduction to Dart 73
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
tree += '</ul>';
}
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
tree += '</li>';
}
// Do the same with children
Recursive Pattern
2013-04-10 Introduction to Dart 74
String doSomething(/* parameters */) {
String tree = '';
var grades = school.grades;
if (grades != null) {
tree += '<ul>';
for (Grade grade in grades) {
tree += '<li>${grade.schoolGrade}';
tree += doSomething(/* parameters */);
tree += '</li>';
}
tree += '</ul>';
}
return tree;
}
Side note – Functions & sugar syntax
2013-04-10 Introduction to Dart 75
int length(String s) {
return s.length;
}
Side note – Functions & sugar syntax
2013-04-10 Introduction to Dart 76
int length(String s) {
return s.length;
}
int length(String s)
=> s.length;
Easy use of reusable components
2013-04-10 Introduction to Dart 77
void main() {
final Tree tree = new Tree(...);
}
Easy use of reusable components
2013-04-10 Introduction to Dart 78
void main() {
final Tree tree = new Tree(...);
tree.setData(schools);
tree.addTo('body', 'afterBegin');
}
Easy use of reusable components
2013-04-10 Introduction to Dart 79
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');
}
Easy use of reusable components
2013-04-10 Introduction to Dart 80
class School {
String schoolName;
List<Grade> grades;
School(this.schoolName,
[this.grades]);
}
class Grade {
String schoolGrade;
List<Student> students;
Grade(this.schoolGrade,
[this.students]);
}
class Student{
String firstname;
String lastname;
Student(this.firstname,
this.lastname);
}
Implementing a reusable components
2013-04-10 Introduction to Dart 81
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;
}
Implementing a reusable components
2013-04-10 Introduction to Dart 82
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;
}
Implementing a reusable components
2013-04-10 Introduction to Dart 83
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;
}
Implementing a reusable components
2013-04-10 Introduction to Dart 84
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;
}
Implementing a reusable components
2013-04-10 Introduction to Dart 85
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);
}
}
Implementing a reusable components
2013-04-10 Introduction to Dart 86
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);
}
}
Implementing a reusable components
2013-04-10 Introduction to Dart 87
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);
}
}
Implementing a reusable components
2013-04-10 Introduction to Dart 88
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);
}
}
Implementing a reusable components
2013-04-10 Introduction to Dart 89
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);
}
}
Implementing a reusable components
2013-04-10 Introduction to Dart 90
String buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
String tree = '';
if (data != null && !data.isEmpty) {
}
return tree;
}
Implementing a reusable components
2013-04-10 Introduction to Dart 91
String buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
String tree = '';
if (data != null && !data.isEmpty) {
}
return tree;
}
final TreeConfig treeNode = treeNodes[depth];
tree += '<ul>';
for (dynamic element in data) {
}
tree += '</ul>';
Implementing a reusable components
2013-04-10 Introduction to Dart 92
String buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
String tree = '';
if (data != null && !data.isEmpty) {
final TreeConfig treeNode = treeNodes[depth];
tree += '<ul>';
for (dynamic element in data) {
}
tree += '</ul>';
}
return tree;
}
tree += '<li>${treeNode.value(element)}';
tree += '</li>';
Implementing a reusable components
2013-04-10 Introduction to Dart 93
String buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,
[final int depth = 0]) {
String tree = '';
if (data != null && !data.isEmpty) {
final TreeConfig treeNode = treeNodes[depth];
tree += '<ul>';
for (dynamic element in data) {
tree += '<li>${treeNode.value(element)}';
tree += '</li>';
}
tree += '</ul>';
}
return tree;
}
if (treeNode.children != null) {
tree += buildOneLevelTree(treeNode.children(element),
treeNodes, depth + 1);
}
Implementing a reusable components
2013-04-10 Introduction to Dart 94
class Tree {
List<TreeConfig> treeConfigs;
String tree;
Tree(this.treeConfigs);
String setData(final List data) {
}
void addTo(String selector,
[String where = 'afterEnd']) {
query(selector).insertAdjacentHtml(where, this.tree);
}
}
this.tree = buildOneLevelTree(data, this.treeConfigs);
return this.tree;
String buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
// Implementation
}
Getting ride of Strings
2013-04-10 Introduction to Dart 95
Element buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,
[final int depth = 0]) {
Element tree; // String tree = '';
if (data != null && !data.isEmpty) {
final TreeConfig treeNode = treeNodes[depth];
tree = new UListElement(); // tree += '<ul>';
for (dynamic element in data) {
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
2013-04-10 Introduction to Dart 96
class Tree {
List<TreeConfig> treeConfigs;
Element tree; // String tree;
Tree(this.treeConfigs);
Element setData(final List data) {
this.tree = buildOneLevelTree(data, this.treeConfigs);
return this.tree;
}
Element buildOneLevelTree(final List data,
final List<TreeConfig> treeNodes,
[final int depth = 0]) {
// Implementation
}
void addTo(String selector,
[String where = 'afterEnd']) {
query(selector).insertAdjacentElement(where, this.tree);
}
}
web_ui
2013-04-10 Introduction to Dart 97
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
2013-04-10 Introduction to Dart 98
web_ui and Single-Page Webapps
2013-04-10 Introduction to Dart 99
<!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
2013-04-10 Introduction to Dart 100
<!DOCTYPE html>
<html>
<body>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 101
<!DOCTYPE html>
<html>
<body>
<element>
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 102
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter">
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 103
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent">
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 104
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 105
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
</template>
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 106
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<div>
<button>Click me</button><br />
<span>(click count: {{count}})</span>
</div>
</template>
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 107
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<div>
<button>Click me</button><br />
<span>(click count: {{count}})</span>
</div>
</template>
</element>
</body>
</html>
web_ui - The template
2013-04-10 Introduction to Dart 108
<!DOCTYPE html>
<html>
<body>
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<div>
<button>Click me</button><br />
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
</body>
</html>
web_ui – Extending WebComponent
2013-04-10 Introduction to Dart 109
class CounterComponent {
}
web_ui – Extending WebComponent
2013-04-10 Introduction to Dart 110
class CounterComponent extends WebComponent {
}
web_ui – Extending WebComponent
2013-04-10 Introduction to Dart 111
class CounterComponent extends WebComponent {
@observable
int count = 0;
}
web_ui – Extending WebComponent
2013-04-10 Introduction to Dart 112
class CounterComponent extends WebComponent {
@observable
int count = 0;
void increment(Event event) {
count++;
}
}
web_ui – Extending WebComponent
2013-04-10 Introduction to Dart 113
class CounterComponent extends WebComponent {
@observable
int count = 0;
void increment(Event event) {
count++;
}
void inserted() {
this.query('button').onClick.listen(increment);
}
}
web_ui and Single-Page Webapps
2013-04-10 Introduction to Dart 114
<!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
2013-04-10 Introduction to Dart 115
void main() {
}
web_ui – The application
2013-04-10 Introduction to Dart 116
void main() {
var element = new Element.html(
'<x-click-counter id="click_counter"></x-click-counter>'
);
}
web_ui – The application
2013-04-10 Introduction to Dart 117
void main() {
var element = new Element.html(
'<x-click-counter id="click_counter"></x-click-counter>'
);
var counter = new CounterComponent()
..host = element
..count = 25;
}
web_ui – The application
2013-04-10 Introduction to Dart 118
void main() {
var element = new Element.html(
'<x-click-counter id="click_counter"></x-click-counter>'
);
var counter = new CounterComponent()
..host = element
..count = 25;
var lifecycleCaller = new ComponentItem(counter)
..create();
query('body').append(counter.host);
lifecycleCaller.insert();
}
web_ui – The application
2013-04-10 Introduction to Dart 119
void main() {
var element = new Element.html(
'<x-click-counter id="click_counter"></x-click-counter>'
);
var counter = new CounterComponent()
..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
2013-04-10 Introduction to Dart 120
A word about Layouts
2013-04-10 Introduction to Dart 121
A word about Layouts
2013-04-10 Introduction to Dart 122
A word about Layouts
2013-04-10 Introduction to Dart 123
A word about Layouts
2013-04-10 Introduction to Dart 124
A word about Layouts
2013-04-10 Introduction to Dart 125
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);
A word about Layouts
2013-04-10 Introduction to Dart 126
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);
A word about Layouts
2013-04-10 Introduction to Dart 127
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);
A word about Layouts
2013-04-10 Introduction to Dart 128
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);
The Future of Dart ?
2013-04-10 Introduction to Dart 129
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
2013-04-10 Introduction to Dart 130
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
2013-04-10 Introduction to Dart 131
What’s next ?
2013-04-10 Introduction to Dart 132
https://github.com/yohanbeschi/soat_20130410.dart
Questions ?
2013-04-10 Introduction to Dart 133
top related