building single-page web appplications in dart - devoxx france 2013

18h20 - 18h50 - Miles Davis B

Building a Single-Page Web Application in Dart

27 au 29 mars 2013

Building a Single-Page Web Application in Dart

Yohan BeschiSo@t – Java Developer

@yohanbeschi

Yohan Beschi

•Started programming at 15 – 100% self-taught

•Languages (Assembly, C/C++, Java, Python)

•Blogger, Speaker, Instructor

•Started Dart 6 months ago

Building Uis - Javascript ?

Building Uis - Java ?

Building Uis - But how ?

Programmatic Components with GWT

Java + GWT = Too verbose!

More than 100

lines

The Dart Way

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

The Dart Way

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

6lignes

Dart is the winner

Once upon a time…

Programmer productivity

Application scalability

Raw execution speed

Startup performance

And here we are!

•Open Source (BSD)

•Structured

•Anti-revolutionary

•Same goals as new Javascript frameworks

•The goal is to not break the web

Dart - The language

Abstract Class

abstract class abstract class Validatable {Validatable {

}}

Abstract Method

abstract class abstract class Validatable {Validatable {

List<Object> valuesToValidate();List<Object> valuesToValidate();

}}

Generics

abstract class abstract class Validator<TValidator<T extendsextends Validatable> {Validatable> {

}}

Implementing a method – 1/4

abstract class abstract class Validator<TValidator<T extendsextends Validatable> {Validatable> {

boolbool validate(T object) { validate(T object) {

}}

}}

Implementing a method - for in – 2/4

abstract class abstract class Validator<TValidator<T extendsextends Validatable> {Validatable> {

boolbool validate(T object) { validate(T object) {

forfor (Object obj (Object obj inin object.valuesToValidate()) {object.valuesToValidate()) {

}}

}}

}}

Implementing a method – 3/4

abstract class abstract class Validator<TValidator<T extendsextends Validatable> {Validatable> {

boolbool validate(T object) { validate(T object) {

forfor (Object obj (Object obj inin object.valuesToValidate()) {object.valuesToValidate()) {

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

}}

}}

}}

}}

Implementing a method – 4/4

abstract class abstract class Validator<TValidator<T extendsextends Validatable> {Validatable> {

boolbool validate(T object) { validate(T object) {

forfor (Object obj (Object obj inin object.valuesToValidate()) {object.valuesToValidate()) {

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

returnreturn falsefalse;;

}}

}}

returnreturn truetrue;;

}}

}}

Concrete class

classclass User { User {

}}

Class as Interface

classclass User User implements implements Validatable {Validatable {

}}

Class members

classclass User User implements implements Validatable {Validatable {

String username;String username;

String password;String password;

}}

Private Class members

classclass User User implements implements Validatable {Validatable {

String _username;String _username;

String _password;String _password;

}}

Accessors

classclass User User implements implements Validatable {Validatable {

String _username;String _username;

String _password;String _password;

String String getget username => username => thisthis._username;._username;

String String getget password => password => thisthis._password;._password;

setset username(String username) username(String username)

=> => thisthis._username = username;._username = username;

setset password => password => thisthis._password = password;._password = password;

}}

Constructor – Sugar Syntax

classclass User User implements implements Validatable {Validatable {

String _username;String _username;

String _password;String _password;

User(String User(String thisthis._username, String ._username, String thisthis._password);._password);

}}

Implementing an abstract method

classclass User User implements implements Validatable {Validatable {

String _username;String _username;

String _password;String _password;

User(String User(String thisthis._username, String ._username, String thisthis._password);._password);

List<Object> valuesToValidate() {List<Object> valuesToValidate() {

returnreturn [_username, _password]; [_username, _password];

}}

}}

Dart Reference API

•Core

•HTML

•Async

•IO

•Crypto

•JSON

•Mirrors

•UTF

•Unit Testing & Mocks

•Math

•Logging

•URI

• I18N

•etc.

But there is more…

•Mixins

•Optionally typed

•Top level functions

•Mono process

Isolates

Dart Ecosystem

Virtual Machines

Dartium

DartEditor

Plugins

dart2js

dart2js

dart2js

•Target HTML5

•Tree Shaking

•Aggregation/Minification

•Optimization

Pub

Pub - pubspec.yaml

name: pacifista_rocksdescription: The best application in the whole worldversion: 0.0.1dependencies: great_lib: any

dartdoc

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

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

dartdoc

Uses

•Single-page Web Apps

•Client and server side applications

•HTML Games

27 au 29 mars 2013

Démonstration

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

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

Roadmap

Today: M3

??: M4 Summer 2013 : V1 !

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

• Site officiel : 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

Thanks

Questions ?