SlideShare a Scribd company logo
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

More Related Content

Similar to Introduction to dart - So@t - 20130410

Introduction à Dart
Introduction à DartIntroduction à Dart
Introduction à Dart
SOAT
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP
Zaenal Arifin
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
Sagie Davidovich
 
Spring and dependency injection
Spring and dependency injectionSpring and dependency injection
Spring and dependency injection
Steve Ng
 
Nice to meet Kotlin
Nice to meet KotlinNice to meet Kotlin
Nice to meet Kotlin
Jieyi Wu
 
JUnit PowerUp
JUnit PowerUpJUnit PowerUp
JUnit PowerUp
James McGivern
 
Use of Apache Commons and Utilities
Use of Apache Commons and UtilitiesUse of Apache Commons and Utilities
Use of Apache Commons and Utilities
Pramod 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 Benelux
yohanbeschi
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
Shingo Furuyama
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
TechMagic
 
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
Nebojš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 8
RichardWarburton
 
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.pdf
mail931892
 
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
Egdares 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 Groovy
Codecamp Romania
 
Tdd
TddTdd
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
 

Similar to Introduction to dart - So@t - 20130410 (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...
 

More from yohanbeschi

VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and freeVoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
yohanbeschi
 
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecodeJVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
yohanbeschi
 
JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)
yohanbeschi
 
Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924
yohanbeschi
 
JVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames workJVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames work
yohanbeschi
 
Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013
yohanbeschi
 

More from yohanbeschi (6)

VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and freeVoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
 
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecodeJVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
 
JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)
 
Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924
 
JVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames workJVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames work
 
Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013
 

Recently uploaded

"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
thanhluan21
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
MJDuyan
 
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptxNational Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
EdsNatividad
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
thanhluan21
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Murugan Solaiyappan
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Liyana Rozaini
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
kambal1234567890
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
Celine George
 
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfThe Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
JackieSparrow3
 
How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17
Celine George
 
Split Shifts From Gantt View in the Odoo 17
Split Shifts From Gantt View in the  Odoo 17Split Shifts From Gantt View in the  Odoo 17
Split Shifts From Gantt View in the Odoo 17
Celine George
 
NC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline PartnershipNC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline Partnership
Mebane Rash
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
EduSkills OECD
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
NurFitriah45
 
Individual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docxIndividual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docx
monicaaringo1
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
HappieMontevirgenCas
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
Abhik Roychoudhury
 
Neuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
Neuroimaging Mastery Project: Presentation #6 Subarachnoid HemorrhageNeuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
Neuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
Sean M. Fox
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
hammadmughal76316
 
How to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 WebsiteHow to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 Website
Celine George
 

Recently uploaded (20)

"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
 
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptxNational Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
National Learning Camp Grade 7 ENGLISH 7-LESSON 7.pptx
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
 
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfThe Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
 
How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17
 
Split Shifts From Gantt View in the Odoo 17
Split Shifts From Gantt View in the  Odoo 17Split Shifts From Gantt View in the  Odoo 17
Split Shifts From Gantt View in the Odoo 17
 
NC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline PartnershipNC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline Partnership
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
 
Individual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docxIndividual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docx
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
 
Neuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
Neuroimaging Mastery Project: Presentation #6 Subarachnoid HemorrhageNeuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
Neuroimaging Mastery Project: Presentation #6 Subarachnoid Hemorrhage
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
 
How to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 WebsiteHow to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 Website
 

Introduction to dart - So@t - 20130410

  • 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