codefest 2014. Егоров В. — Что за… dart?

#dartlangВячеслав Егоров

Что за…

#dartlang

производительностьJavaScript

Мы работали над V8...

#dartlang


сложность трюковвстроенных в V8


#dartlang


уровень счастьякомпиляторщиков


#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

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

#dartlang

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

#dartlang


Exception: Class '_Future' has no instance method '>='.

#dartlang


$ 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

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

#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

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

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

@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

codefest 2014. Егоров В. — Что за… dart?

Internet