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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16.
#dartlang
А почему?

17.
#dartlang
Теперь
о Dart

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

19.
#dartlang
Платформа

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

21.
#dartlang
foo() {
return 42;
}

22.
#dartlang
textWidth() {
return 42;
}

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

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

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

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

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

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

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

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

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

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

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

34.
#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)

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

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

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

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

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

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

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

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

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

44.
#dartlang

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

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

47.
#dartlang
AngularDart

48.
#dartlang
MODEL VIEW
WHATEVER

49.
#dartlang
MODEL VIEW
WHATEVER
Dart
objects
DOM

50.
#dartlang

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

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

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

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

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

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

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

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

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

60.
#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 {

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

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

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

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

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

66.
#dartlang

67.
#dartlang

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

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

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

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

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

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

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

75.
#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;
}
}

76.
#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;
}
}

77.
#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;
}
}

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

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

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