Post on 13-Jan-2015
description
#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.yamlname: CodeFest2014description: A CodeFest2014 sampledependencies: browser: any angular: any$ pub getDownloading 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