Advertisement

More Related Content

Similar to CodeFest 2014. Егоров В. — Что за… Dart?(20)

Advertisement

CodeFest 2014. Егоров В. — Что за… Dart?

  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
Advertisement