Документ обсуждает язык программирования Dart и его преимущества по сравнению с JavaScript, включая производительность и простоту использования. В нем рассматривается синтаксис Dart и функции, такие как опциональная типизация и обработка ошибок. Также упоминается возможность компиляции Dart в JavaScript для современного веб-разработки.

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