Dart, Darrt, Darrrt

Dart, Darrt, Darrrt

Jana Moudrá @Janamou +JanaMoudrá

Website?. This cannot be difficult....

How to do it?.

Web Developer

LanguageDev Editor

Great Tools

JavaScriptjQuery

Node.jsCofeeScript

ReactJS...

Sublime TextWebStorm

EclipseNetbeans

Notepad

...

...

bowernpm

jamvolo

...

Which. should I use?.

LanguageDev EditorGreat Tools

LanguageDev EditorGreat Tools

LanguageDev EditorGreat Tools

LanguageDev EditorGreat Tools

LanguageDev EditorGreat ToolsPerformance

LanguageDev EditorGreat ToolsPerformance

And more...

Language

Languageis easy to learn

Open-sourceFor better performance

Object orientedModular

Client and Server!.

Client and Server!. Command Line Chrome Packaged App.

var x = 10;

var y = 20;

Optional Types

num x = 10;

num y = 20;or

void main() {

print("Hello World Dart!");

}

main() function

void main() {

var myButton = querySelector("#my-button");

myButton.text = "Open Window";

myButton.style.background = "pink";

myButton.style.fontFamily = "Comic Sans MS";

myButton.onClick.listen(openWindow);

}

Cascade operator

void main() {

querySelector("#my-button")

..text = "Open Window"

..style.background = "pink"

..style.fontFamily = "Comic Sans MS"

..onClick.listen(openWindow);

}

Cascade operator

class Animal {

int numberOfLegs;

int numberOfHeads;

Animal(int numberOfLegs, int numberOfHeads) {

this.numberOfLegs = numberOfLegs;

this.numberOfHeads = numberOfHeads;

}

}

Syntactic sugar

class Animal {

int numberOfLegs;

int numberOfHeads;

Animal(this.numberOfLegs, this.numberOfHeads);

}

Syntactic sugar

class Animal {

int numberOfLegs;

int numberOfHeads;

Animal(this.numberOfLegs, this.numberOfHeads);

}

void main() {

Animal dragon = new Animal(4, 1);

}

Syntactic sugar

class Animal {

int numberOfLegs;

int numberOfHeads;

String name;

Animal(this.numberOfLegs, this.numberOfHeads);

Animal.withName(this.name);

}

void main() {

Animal dragon = new Animal.withName("Pepa");

}

Named constructors

class Animal {

int numberOfLegs;

int numberOfHeads;

String _name;

Animal(this.numberOfLegs, this.numberOfHeads);

Animal.withName(this._name);

String get name => "$_name is the best";

set name(String name) => _name = name;

}

Getter and Setter

Tools

Toolswe have them

Dart Editor DartiumDart SDK

Dart SDKDart VMLibraries

Command Line Tools

DartiumChromium with Dart VM

Modern BrowsersCompiled into JavaScript

Dart Libraries

dart:async, dart:collection, dart:convert,

dart:core, dart:html,

dart:indexed_db, dart:io, dart:isolate, dart:js, dart:math, dart:mirrors, dart:profiler,

dart:svg, dart:typed_data,

dart:web_audio, dart:web_gl, dart:web_sql

dart:js

<script type="text/javascript">

var Person = function(name, surname) {

this.name = name;

this.surname = surname;

this.sayHello = function(){

alert("Hello!");

}

};

</script>

dart:js

import 'dart:js';

void main() {

var person = new JsObject(context['Person'],

["Jana", "Moudra"]);

print(person["name"]);

print(person["surname"]);

person.callMethod("sayHello");

}

pub.

name: todolist

description: "My TODO list!"

dependencies:

browser: any

polymer: any

vector_math: any

pubspec.yaml

Libraries on Pub

polymer, angular, route, route_hierarchical, googleapis, chrome,

json_object, vector_math, appengine, ...

and more on pub.dartlang.org!

Dart is on the cloud!.

Demo

+

Client Server

void main() { ...}

void main() { runAppEngine(reqHandler);}

Client Server

class Note extends Model { ...}

class Note extends Model { ...}

DartIs easy to learn

DarrtHas great tools

DarrrtYou can write awesome apps

12:30Dart Code Lab

Thank You!Questions?

Jana Moudrá @Janamou +JanaMoudrá

Image credits

● Tim Regan, cc, https://www.flickr.com/photos/27141279@N00/10481690626

● reynermedia, cc, https://www.flickr.com/photos/89228431@N06/11285592553/

● jenny downing, cc, https://www.flickr.com/photos/7941044@N06/3990391143/

● kevin dooley, cc, https://www.flickr.com/photos/12836528@N00/7922047866/

● monkeywing, cc, https://www.flickr.com/photos/9887585@N08/7584708186/

● Gregor Cresnar, https://www.iconfinder.com/icons/304602/apple_browser_computer_laptop_macbook_monitor_notebook_screen_web_icon

● Jerry Low, https://www.iconfinder.com/icons/286686/computers_servers_web_host_icon