Upload
soat
View
708
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Part 1 - Introduction à Dart Dart s'inscrit dans la mouvance des frameworks JavaScript (Node.js, Backbone, AngularJS, etc,) et des langages compilés en JavaScript (CoffeeScript, TypeScipt, etc.) dans l'objectif de faciliter le développement Web. Les applications Web sont depuis quelques années le type d'application privilégié des développeurs. Néanmoins, les outils que nous possédions jusqu'à très récemment n'étaient absolument pas adaptés au monde professionnel. Dart offre la possibilité de développer, dans un langage structuré et objet, des applications clients et serveurs, et ceci en un temps record. Mais Dart n'est pas seulement un langage c'est aussi tout un écosystème au service de l'industrialisation. Au cours de cette présentation nous verrons : • comment Dart permet de développer des applications clientes aussi bien que serveurs, • quelques éléments du langage, • mais aussi les outils permettant un développement industrialisé et une productivité accrue Durée : 45min/1h Part 2 - Live Coding - Développer une application à page unique en Dart Bien que la version finale de Dart ne soit pas encore disponible (pour cela il faudra attendre cet été), il est utilisable dès aujourd'hui. Et c'est ce que nous verrons au cours de cette deuxième partie en nous appuyant sur une application simple. Durée : 45min/1h
Citation preview
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