#dartlang
Вячеслав Егоров
Что за…

#dartlang
производительность
JavaScript
Мы работали над
V8...

#dartlang
Мы работали над
V8...
сложность трюков
встроенных в V8
производительность
JavaScript

#dartlang
Мы работали над
V8...
уровень счастья
компиляторщиков
производительность
JavaScript

#dartlang
Быстрый код - это
статический код.

#dartlang
JS VM потеет: пытается
узреть статическое в
динамическом

#dartlang
JS программисты потеют:
пытаются ублажить VM
для скорости

#dartlang
Авторы JS VM тоже
потеют

#dartlang
Не потеет только сам JS

#dartlang
o = {
l1: -1, l2: 1,
l3: "something"
};
arr = [];
arr[o.ll+o.l2]=o.l3;
arr.length // => 0 ???

#dartlang
o = {
l1: -1, l2: 1,
l3: "something"
};
arr = [];
arr[o.ll+o.l2]=o.l3;
arr.NaN // => “something”

#dartlang
Удивительно для VM =
Удивительно
программисту

#dartlang
THREE.QuadEdgeMesh = function(mesh) {
function HalfEdge(/* ... */) {
/* ... */
}
/* ... */
this.addFace = function () { };
};

#dartlang
THREE.QuadEdgeMesh = function(mesh) {
function HalfEdge(/* ... */) {
/* ... */
}
/* ... */
this.addFace = function () { };
};
Медленно :-(

#dartlang
function HalfEdge(/* ... */) { }
THREE.QuadEdgeMesh = function(mesh) { };
Three.QuadEdgeMesh.prototype.addFace = ...
Быстро :-)

#dartlang
А почему?

#dartlang
Теперь
о Dart

#dartlang
Простой
выразительный
язык

#dartlang
Платформа

#dartlang
● VM
○ быcтрый edit-refresh
○ отладчик
○ server-side
● Анализатор
● Редактор
● Библиотеки
● Фреймворки

#dartlang
foo() {
return 42;
}

#dartlang
textWidth() {
return 42;
}

#dartlang
textWidth(text) {
return text.split(‘n’)
.map((ln) => ln.length)
.reduce(max);
}

#dartlang
textWidth(text) =>
text.split(‘n’)
.map((ln) => ln.length)
.reduce(max);

#dartlang
textWidth(text) =>
text.split(‘n’)
.map((ln) => ln.length)
.reduce(max);

#dartlang
textWidth(text) =>
text.split(‘n’)
.map((ln) => ln.length)
.reduce(max);

#dartlang
fileWidth(url) =>
HttpRequest.getString(url)
.then(textWidth);

#dartlang
fileWidth(url) =>
HttpRequest.getString(url)
.then(textWidth);

#dartlang
fileWidth(url) =>
HttpRequest.getString(url)
.then(textWidth);

#dartlang
var w = fileWidth(SOME_URL);
if (w >= 80) {
print("Your file has width $w.");
}

#dartlang
var w = fileWidth(SOME_URL);
if (w >= 80) {
print("Your file has width $w.");
}

#dartlang
var w = fileWidth(SOME_URL);
if (w >= 80) {
print("Your file has width $w.");
}

#dartlang
var w = fileWidth(SOME_URL);
if (w >= 80) {
print("Your file has width $w.");
}
Exception: Class '_Future' has no instance method '>='.

#dartlang
var w = fileWidth(SOME_URL);
if (w >= 80) {
print("Your file has width $w.");
}
$ dartanalyzer codefest2014.dart
[hint] There is no such operator '>=' in 'Future'
(codefest2014.dart, line 17, col 9)

#dartlang
fileWidth(SOME_URL).then((w) {
if (w >= 80)
print("Your file has width $w.");
});

#dartlang
Опциональная типизация:
● гибкость динамики
● удобство статики
+ Предсказуемая семантика

#dartlang
Future<num> fileWidth(String url) => ...

#dartlang
Предсказуемая семантика
● ранние ошибки
● меньше удивительного

#dartlang
var self = this;
for (var i = 0; i < self.arr.length; i++) {
var listener = (function (i) {
return function (evt) {
self.handleEventAt(i);
};
})(i);
}

#dartlang
for (var i = 0; i < arr.length; i++) {
var listener = (e) => handleEventAt(i);
}

#dartlang
for (var i = 0; i < arr.length; i++) {
var listener = (e) => handleEventAt(i);
}

#dartlang
for (var i = 0; i < arr.length; i++) {
var listener = (e) => handleEventAt(i);
}

#dartlang
Разработка веб-приложений?

#dartlang

#dartlang
<counters-list>
</counters-list>

#dartlang
<width-counter></width-counter>
<width-counter></width-counter>
<width-counter></width-counter>
<width-counter></width-counter>

#dartlang
AngularDart

#dartlang
MODEL VIEW
WHATEVER

#dartlang
MODEL VIEW
WHATEVER
Dart
objects
DOM

#dartlang

#dartlang
$ cat pubspec.yaml
name: CodeFest2014
description: A CodeFest2014 sample
dependencies:
browser: any
angular: any
$ pub get
Downloading angular 0.9.10...

#dartlang
Библиотеки

#dartlang
import '../lib1.dart';
import 'dart:math' show max;
import 'package:js/js.dart' as js;

#dartlang
● dart:math
● dart:async
● dart:isolate
● dart:typed_data
● dart:html
● dart:io
● dart:mirrors
● …

#dartlang
import 'package:angular/angular.dart';

#dartlang
class WidthCounter {
var url, width = "n/a";
count() =>
fileWidth(url)
.then((v) => width = v)
.catchError((e) => width = "n/a");
}

#dartlang
Классы:
● объекты “заморожены”
● одиночное наследование
● любой класс это интерфейс
● mixins
● generics

#dartlang
@NgComponent(
selector: 'width-counter',
template: …,
publishAs: 'ctrl'
)
class WidthCounter {

#dartlang
<div>
<input type="text"
ng-model="ctrl.url"
ng-change="ctrl.count()">
is <b>{{ctrl.width}}</b> columns
wide.
</div>

#dartlang
@NgComponent(
selector: 'counters-list',
template: """
<width-counter ng-repeat="_ in ctrl.counters">
</width-counter>
<i class="fa fa-plus-square"
ng-click="ctrl.addCounter()"></i>
<i class="fa fa-minus-square"
ng-click="ctrl.removeCounter()"></i>
"""
)
class CountersList {

#dartlang
main() {
ngBootstrap(
module: new Module()
..type(WidthCounter)
..type(CountersList));
}

#dartlang
main() {
ngBootstrap(
module: new Module()
..type(WidthCounter)
..type(CountersList));
}

#dartlang
Injector ngBootstrap({
Module module: null,
List<Module> modules: null,
dom.Element element: null,
String selector: '[ng-app]'})

#dartlang
main() {
ngBootstrap(
module: new Module()
..type(WidthCounter)
..type(CountersList));
}

#dartlang
main() {
var m = new Module();
m.type(WidthCounter);
m.type(CounterList);
ngBootstrap(module: m);
}

#dartlang

#dartlang

#dartlang
class Border {
var width, color, style;
Border({this.width: 1,
this.color: "black",
this.style: "solid"});
get css => "${width}px $style $color";
}

#dartlang
class Border {
var width, color, style;
Border({this.width: 1,
this.color: "black",
this.style: "solid"});
get css => "${width}px $style $color";
}

#dartlang
class Border {
var width, color, style;
Border({this.width: 1,
this.color: "black",
this.style: "solid"});
get css => "${width}px $style $color";
}

#dartlang
class Border {
var width, color, style;
Border({this.width: 1,
this.color: "black",
this.style: "solid"});
get css => "${width}px $style $color";
}

#dartlang
addCounter() {
counters.add(new Border(
color: 'hsla(${rnd.nextInt(360)}, ’
’75%, 50%, 0.5)'));
}

#dartlang
<width-counter ng-repeat="border in ctrl.counters"
with-border="border">
</width-counter>

#dartlang
<width-counter ng-repeat="border in ctrl.counters"
with-border="border">
</width-counter>

#dartlang
@NgDirective(selector: '[with-border]')
class WithBorderDirective {
dom.Element el;
WithBorderDirective(this.el);
@NgOneWay('with-border')
set border (Border val) {
el.style.border = val.css;
}
}

#dartlang
@NgDirective(selector: '[with-border]')
class WithBorderDirective {
dom.Element el;
WithBorderDirective(this.el);
@NgOneWay('with-border')
set border (Border val) {
el.style.border = val.css;
}
}

#dartlang
@NgDirective(selector: '[with-border]')
class WithBorderDirective {
dom.Element el;
WithBorderDirective(this.el);
@NgOneWay('with-border')
set border (Border val) {
el.style.border = val.css;
}
}

#dartlang
class Border extends Object
with Exportable {
@export var width,
color,
style;
}
border.toJSON()

#dartlang
Dart компилируется в
JavaScript с помощью dart2js

#dartlang
Dart - для современного веба
● Платформа, готовая к использованию
● dartlang.org
● Компилируется в JavaScript