SlideShare une entreprise Scribd logo
1  sur  133
Télécharger pour lire hors ligne
DART
             Yohan BESCHI – Java Developer
                     @yohanbeschi
                     +Yohan Beschi
2013-04-10              Introduction to Dart   1
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

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




2013-04-10                                                                          Introduction to Dart                                                                                        6
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,
               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;




2013-04-10                                                                          Introduction to Dart                                                                                        7
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);




2013-04-10                     Introduction to Dart                  8
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

2013-04-10                     Introduction to Dart                  9
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

                                      Dart Editor
                                        Dartium
                    Tools                 dart2js
                                             pub
             Dart                        dartdoc

                                          Server     dart:io
                    VMs
                                        Browser     dart:html




2013-04-10                  Introduction to Dart                17
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

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




2013-04-10                Introduction to Dart         26
dartdoc

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

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

}




2013-04-10                Introduction to Dart     27
dartdoc




2013-04-10             Introduction to Dart   28
Dart – The Language




https://github.com/yohanbeschi/lang.dart
 2013-04-10                         Introduction to Dart   29
Entry Point
void main() {

}




2013-04-10                 Introduction to Dart   30
Comments
void main() {
  // This is a single-line comment.

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




2013-04-10                Introduction to Dart   31
Types - Boolean
var boolean1 = true;
var boolean2 = false;

bool boolean3 = true;
bool boolean4 = false;




2013-04-10               Introduction to Dart   32
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()}');


2013-04-10                   Introduction to Dart                 33
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




2013-04-10                   Introduction to Dart                34
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




2013-04-10                     Introduction to Dart                  35
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;


2013-04-10                   Introduction to Dart   36
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);




2013-04-10                Introduction to Dart               37
Conditionals – if/else
if (/* condition */) {
  //
} else if (/* other condition */) {
  //
} else {
  //
}




2013-04-10                Introduction to Dart   38
Conditionals – switch
switch(variable) {
  case 1:
  case 2:
   //
   break;
  case 8:
  case 9:
   //
   break;
  default:
   //
   break;
}




2013-04-10               Introduction to Dart   39
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);
}




2013-04-10                   Introduction to Dart   40
Functions – Top-level functions
void main() {
  int squaredNum = square(2);
  assert(squaredNum == 4);
}

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




2013-04-10                Introduction to Dart   41
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);
}




2013-04-10                   Introduction to Dart   42
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);
}


2013-04-10                   Introduction to Dart   43
Classes abstraites

abstract class Validatable {

}




2013-04-10              Introduction to Dart   44
Classes abstraites

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




2013-04-10              Introduction to Dart   45
Classes abstraites

abstract class Validator<T extends Validatable> {

}




2013-04-10              Introduction to Dart        46
Classes abstraites

abstract class Validator<T extends Validatable> {
  bool validate(T object) {

     }
}




2013-04-10              Introduction to Dart        47
Classes abstraites

abstract class Validator<T extends Validatable> {
  bool validate(T object) {
    for (Object obj in object.valuesToValidate()) {

             }
     }
}




2013-04-10                  Introduction to Dart      48
Classes abstraites

abstract class Validator<T extends Validatable> {
  bool validate(T object) {
    for (Object obj in object.valuesToValidate()) {
      if (StringUtils.isEmpty(obj.toString())) {

                 }
             }
     }
}




2013-04-10                      Introduction to Dart   49
Classes abstraites

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



2013-04-10                  Introduction to Dart      50
Classes concrètes

class User {

}




2013-04-10              Introduction to Dart   51
Classes concrètes

class User implements Validatable {

}




2013-04-10              Introduction to Dart   52
Classes concrètes

class User implements Validatable {
  String username;
  String password;

}




2013-04-10              Introduction to Dart   53
Classes concrètes

class User implements Validatable {
  String username;
  String password;

     User(this.username, this.password);

}




2013-04-10                Introduction to Dart   54
Classes concrètes

class User implements Validatable {
  String username;
  String password;

     User(this.username, this.password);

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




2013-04-10                Introduction to Dart   55
But there is more…

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




2013-04-10              Introduction to Dart   56
Dart Reference API

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

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


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




2013-04-10             Introduction to Dart                            60
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
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);
                  }


2013-04-10                     Introduction to Dart                             63
The Old-Fashioned Way




2013-04-10              Introduction to Dart   64
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);
}

    2013-04-10                Introduction to Dart           65
The Old-Fashioned Way
var grades = school.grades;
if (grades != null) {
  tree += '<ul>';

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

         // Students

         tree += '</li>';
     }

     tree += '</ul>';
}



    2013-04-10                Introduction to Dart   66
The Old-Fashioned Way
var students = grade.students;
if (students != null) {
  tree += '<ul>';

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

     tree += '</ul>';
}




    2013-04-10                Introduction to Dart               67
The Old-Fashioned Way
void main() {                                                        tree += '</ul>';
  String tree = '<ul>';                                          }

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

    var grades = school.grades;                              tree += '</ul>';
    if (grades != null) {
      tree += '<ul>';                                        query('body')
                                                               .insertAdjacentHtml('afterBegin', tree);
       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>';
  }

  2013-04-10                                  Introduction to Dart                                        68
Introducing reusable components




2013-04-10              Introduction to Dart   69
Is there a pattern here ?
var grades = school.grades;
if (grades != null) {
  tree += '<ul>';

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

         // Students

         tree += '</li>';
     }

     tree += '</ul>';
}



    2013-04-10                Introduction to Dart   70
Is there a pattern here ?
var grades = school.grades;

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




      tree += '</ul>';
 }




 2013-04-10                   Introduction to Dart   71
Is there a pattern here ?
var grades = school.grades;

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

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



              tree += '</li>';
      }

      tree += '</ul>';
 }




 2013-04-10                      Introduction to Dart   72
Is there a pattern here ?
var grades = school.grades;

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

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

               // Do the same with children

              tree += '</li>';
      }

      tree += '</ul>';
 }




 2013-04-10                                   Introduction to Dart   73
Recursive Pattern
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;
}

    2013-04-10                    Introduction to Dart   74
Side note – Functions & sugar syntax
int length(String s) {
   return s.length;
}




 2013-04-10                Introduction to Dart      75
Side note – Functions & sugar syntax
int length(String s) {                int length(String s)
   return s.length;                     => s.length;
}




 2013-04-10                Introduction to Dart              76
Easy use of reusable components
void main() {
  final Tree tree = new Tree(...);
}




 2013-04-10                Introduction to Dart   77
Easy use of reusable components
void main() {
  final Tree tree = new Tree(...);
  tree.setData(schools);
  tree.addTo('body', 'afterBegin');
}




 2013-04-10                Introduction to Dart   78
Easy use of reusable components
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');
}




 2013-04-10                 Introduction to Dart          79
Easy use of reusable components
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);
                  }


2013-04-10                     Introduction to Dart                             80
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;
}




    2013-04-10                 Introduction to Dart   81
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;
}




    2013-04-10                 Introduction to Dart   82
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;
}




    2013-04-10                 Introduction to Dart   83
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;
}




    2013-04-10                 Introduction to Dart   84
Implementing a reusable components
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);
     }
}


    2013-04-10                 Introduction to Dart            85
Implementing a reusable components
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);
     }
}


    2013-04-10                 Introduction to Dart            86
Implementing a reusable components
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);
     }
}


    2013-04-10                 Introduction to Dart            87
Implementing a reusable components
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);
     }
}


    2013-04-10                 Introduction to Dart            88
Implementing a reusable components
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);
     }
}


    2013-04-10                 Introduction to Dart            89
Implementing a reusable components
String buildOneLevelTree(final List data,
                         final List<TreeConfig> treeNodes,
                         [final int depth = 0]) {
  String tree = '';

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

     }

     return tree;
}




    2013-04-10                 Introduction to Dart          90
Implementing a reusable components
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;
}


    2013-04-10                             Introduction to Dart   91
Implementing a reusable components
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;
}


    2013-04-10                            Introduction to Dart   92
Implementing a reusable components
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)}';

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

            tree += '</li>';
        }

        tree += '</ul>';
    }

    return tree;
}


    2013-04-10                               Introduction to Dart             93
Implementing a reusable components
class Tree {
  List<TreeConfig> treeConfigs;
  String tree;

    Tree(this.treeConfigs);

    String setData(final List data) {

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

    String buildOneLevelTree(final List data,
                             final List<TreeConfig> treeNodes,
                             [final int depth = 0]) {
        // Implementation
    }
    void addTo(String selector,
               [String where = 'afterEnd']) {
      query(selector).insertAdjacentHtml(where, this.tree);
    }
}


    2013-04-10                            Introduction to Dart   94
Getting ride of Strings
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;
}

    2013-04-10                                       Introduction to Dart                           95
Getting ride of Strings
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);
    }
}

    2013-04-10                    Introduction to Dart            96
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
<!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>




 2013-04-10                 Introduction to Dart            99
web_ui - The template
<!DOCTYPE html>

<html>
 <body>

 </body>
</html>




 2013-04-10                 Introduction to Dart   100
web_ui - The template
<!DOCTYPE html>

<html>
 <body>
  <element>

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




 2013-04-10                 Introduction to Dart   101
web_ui - The template
<!DOCTYPE html>

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

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




  2013-04-10                         Introduction to Dart   102
web_ui - The template
<!DOCTYPE html>

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

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




 2013-04-10                        Introduction to Dart             103
web_ui - The template
<!DOCTYPE html>

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

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




  2013-04-10                        Introduction to Dart                     104
web_ui - The template
<!DOCTYPE html>

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

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




  2013-04-10                        Introduction to Dart                     105
web_ui - The template
<!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>



  2013-04-10                        Introduction to Dart                     106
web_ui - The template
<!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>



  2013-04-10                        Introduction to Dart                     107
web_ui - The template
<!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>

  2013-04-10                        Introduction to Dart                     108
web_ui – Extending WebComponent
class CounterComponent {

}




    2013-04-10                Introduction to Dart   109
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {

}




    2013-04-10                    Introduction to Dart   110
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {
 @observable
 int count = 0;

}




    2013-04-10                    Introduction to Dart   111
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {
 @observable
 int count = 0;

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




     2013-04-10                     Introduction to Dart   112
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {
 @observable
 int count = 0;

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

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




     2013-04-10                             Introduction to Dart   113
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>



 2013-04-10                 Introduction to Dart            114
web_ui – The application
void main() {

}




    2013-04-10                 Introduction to Dart   115
web_ui – The application
void main() {
  var element = new Element.html(
     '<x-click-counter id="click_counter"></x-click-counter>'
  );
}




 2013-04-10                 Introduction to Dart            116
web_ui – The application
void main() {
  var element = new Element.html(
     '<x-click-counter id="click_counter"></x-click-counter>'
  );
  var counter = new CounterComponent()
   ..host = element
   ..count = 25;
}




 2013-04-10                 Introduction to Dart            117
web_ui – The application
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();
}




    2013-04-10                 Introduction to Dart         118
web_ui – The application
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);
}



    2013-04-10                      Introduction to Dart          119
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
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);




 2013-04-10                Introduction to Dart   125
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);




 2013-04-10                Introduction to Dart   126
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);




 2013-04-10                Introduction to Dart   127
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);




 2013-04-10                Introduction to Dart   128
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 ?




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




2013-04-10                    Introduction to Dart          132
Questions ?

2013-04-10      Introduction to Dart   133

Contenu connexe

En vedette

Les S@PINS
Les S@PINSLes S@PINS
Les S@PINSAldmi
 
Enrique lorente base
Enrique lorente baseEnrique lorente base
Enrique lorente basesepanic
 
Présentation Michel Agnola 4e table ronde
Présentation Michel Agnola 4e table rondePrésentation Michel Agnola 4e table ronde
Présentation Michel Agnola 4e table rondelpjmn2011
 
HTML5 et CSS3
HTML5 et CSS3 HTML5 et CSS3
HTML5 et CSS3 SOAT
 
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...Solutions IT et Business
 
Evaluation certificative epreuves externes communes (ceb) 2011 - résultats ...
Evaluation certificative   epreuves externes communes (ceb) 2011 - résultats ...Evaluation certificative   epreuves externes communes (ceb) 2011 - résultats ...
Evaluation certificative epreuves externes communes (ceb) 2011 - résultats ...lesoirbe
 
Stranieri integrati in italia
Stranieri integrati in italiaStranieri integrati in italia
Stranieri integrati in italiaAnnaprof
 
French 021912 email tounitedstatescongress
French   021912 email tounitedstatescongressFrench   021912 email tounitedstatescongress
French 021912 email tounitedstatescongressVogelDenise
 
070512 public rebuke (french)
070512   public rebuke (french)070512   public rebuke (french)
070512 public rebuke (french)VogelDenise
 
Utr. plans proposed for the future vf
Utr. plans proposed for the future vfUtr. plans proposed for the future vf
Utr. plans proposed for the future vfIAU_Past_Conferences
 
Executive Coach Agnes ThéArd
Executive Coach Agnes ThéArdExecutive Coach Agnes ThéArd
Executive Coach Agnes ThéArdAGNESTHEARD
 
Rhizome d'IMAGE IN situ
Rhizome d'IMAGE IN situRhizome d'IMAGE IN situ
Rhizome d'IMAGE IN situIMAGE IN situ
 
Gastronomie lyonnaises ( héberger par Slide Share)
Gastronomie lyonnaises ( héberger par Slide Share)Gastronomie lyonnaises ( héberger par Slide Share)
Gastronomie lyonnaises ( héberger par Slide Share)mjdelary
 
Modèles d'attribution : le guide du spécialiste en référencement payant
Modèles d'attribution : le guide du spécialiste en référencement payantModèles d'attribution : le guide du spécialiste en référencement payant
Modèles d'attribution : le guide du spécialiste en référencement payantFrançois-Yves Prigent
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbetkelticman
 

En vedette (20)

Intervention ADEME - Festival Icare2011
Intervention ADEME - Festival Icare2011Intervention ADEME - Festival Icare2011
Intervention ADEME - Festival Icare2011
 
Les S@PINS
Les S@PINSLes S@PINS
Les S@PINS
 
Enrique lorente base
Enrique lorente baseEnrique lorente base
Enrique lorente base
 
Présentation Michel Agnola 4e table ronde
Présentation Michel Agnola 4e table rondePrésentation Michel Agnola 4e table ronde
Présentation Michel Agnola 4e table ronde
 
HTML5 et CSS3
HTML5 et CSS3 HTML5 et CSS3
HTML5 et CSS3
 
Jeux relaxation enfants
Jeux relaxation enfantsJeux relaxation enfants
Jeux relaxation enfants
 
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...
La Maaf, un assureur mutualiste plus agile grâce à la gestion de ses règles m...
 
Evaluation certificative epreuves externes communes (ceb) 2011 - résultats ...
Evaluation certificative   epreuves externes communes (ceb) 2011 - résultats ...Evaluation certificative   epreuves externes communes (ceb) 2011 - résultats ...
Evaluation certificative epreuves externes communes (ceb) 2011 - résultats ...
 
API POINTS EXPLANATION
API POINTS EXPLANATION API POINTS EXPLANATION
API POINTS EXPLANATION
 
ALIBI Sensuel
ALIBI SensuelALIBI Sensuel
ALIBI Sensuel
 
Stranieri integrati in italia
Stranieri integrati in italiaStranieri integrati in italia
Stranieri integrati in italia
 
French 021912 email tounitedstatescongress
French   021912 email tounitedstatescongressFrench   021912 email tounitedstatescongress
French 021912 email tounitedstatescongress
 
070512 public rebuke (french)
070512   public rebuke (french)070512   public rebuke (french)
070512 public rebuke (french)
 
Utr. plans proposed for the future vf
Utr. plans proposed for the future vfUtr. plans proposed for the future vf
Utr. plans proposed for the future vf
 
Executive Coach Agnes ThéArd
Executive Coach Agnes ThéArdExecutive Coach Agnes ThéArd
Executive Coach Agnes ThéArd
 
Rhizome d'IMAGE IN situ
Rhizome d'IMAGE IN situRhizome d'IMAGE IN situ
Rhizome d'IMAGE IN situ
 
Gastronomie lyonnaises ( héberger par Slide Share)
Gastronomie lyonnaises ( héberger par Slide Share)Gastronomie lyonnaises ( héberger par Slide Share)
Gastronomie lyonnaises ( héberger par Slide Share)
 
Modèles d'attribution : le guide du spécialiste en référencement payant
Modèles d'attribution : le guide du spécialiste en référencement payantModèles d'attribution : le guide du spécialiste en référencement payant
Modèles d'attribution : le guide du spécialiste en référencement payant
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbet
 
Caricature
CaricatureCaricature
Caricature
 

Similaire à Introduction to dart par Yohan Beschi

Introduction à Dart
Introduction à DartIntroduction à Dart
Introduction à DartSOAT
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP Zaenal Arifin
 
Spring and dependency injection
Spring and dependency injectionSpring and dependency injection
Spring and dependency injectionSteve Ng
 
Nice to meet Kotlin
Nice to meet KotlinNice to meet Kotlin
Nice to meet KotlinJieyi Wu
 
Use of Apache Commons and Utilities
Use of Apache Commons and UtilitiesUse of Apache Commons and Utilities
Use of Apache Commons and UtilitiesPramod Kumar
 
Java 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR BeneluxJava 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR Beneluxyohanbeschi
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing TipsShingo Furuyama
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for KotlinTechMagic
 
First few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examplesFirst few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examplesNebojša Vukšić
 
Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8RichardWarburton
 
Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)RichardWarburton
 
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdf
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdfHow do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdf
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdfmail931892
 
Ejemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUPEjemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUPEgdares Futch H.
 
[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)croquiscom
 
Python mu Java mı?
Python mu Java mı?Python mu Java mı?
Python mu Java mı?aerkanc
 
CodeCamp Iasi 10 march 2012 - Practical Groovy
CodeCamp Iasi 10 march 2012 - Practical GroovyCodeCamp Iasi 10 march 2012 - Practical Groovy
CodeCamp Iasi 10 march 2012 - Practical GroovyCodecamp Romania
 
Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...Codemotion
 

Similaire à Introduction to dart par Yohan Beschi (20)

Introduction à Dart
Introduction à DartIntroduction à Dart
Introduction à Dart
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
 
Spring and dependency injection
Spring and dependency injectionSpring and dependency injection
Spring and dependency injection
 
Nice to meet Kotlin
Nice to meet KotlinNice to meet Kotlin
Nice to meet Kotlin
 
JUnit PowerUp
JUnit PowerUpJUnit PowerUp
JUnit PowerUp
 
Use of Apache Commons and Utilities
Use of Apache Commons and UtilitiesUse of Apache Commons and Utilities
Use of Apache Commons and Utilities
 
Java 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR BeneluxJava 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR Benelux
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
 
First few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examplesFirst few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examples
 
Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8
 
Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)
 
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdf
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdfHow do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdf
How do I fix it in LinkedList.javaLabProgram.javaLinkedList.jav.pdf
 
Ejemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUPEjemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUP
 
[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)
 
Python mu Java mı?
Python mu Java mı?Python mu Java mı?
Python mu Java mı?
 
CodeCamp Iasi 10 march 2012 - Practical Groovy
CodeCamp Iasi 10 march 2012 - Practical GroovyCodeCamp Iasi 10 march 2012 - Practical Groovy
CodeCamp Iasi 10 march 2012 - Practical Groovy
 
Tdd
TddTdd
Tdd
 
Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...
 

Plus de SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 

Plus de SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 

Dernier

Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?Paolo Missier
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligencePrecisely
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 

Dernier (20)

Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 

Introduction to dart par Yohan Beschi

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