Successfully reported this slideshow.

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

0

Share

Loading in …3
×
1 of 80
1 of 80

More Related Content

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

  1. 1. #dartlang Вячеслав Егоров Что за…
  2. 2. #dartlang производительность JavaScript Мы работали над V8...
  3. 3. #dartlang Мы работали над V8... сложность трюков встроенных в V8 производительность JavaScript
  4. 4. #dartlang Мы работали над V8... уровень счастья компиляторщиков производительность JavaScript
  5. 5. #dartlang Быстрый код - это статический код.
  6. 6. #dartlang JS VM потеет: пытается узреть статическое в динамическом
  7. 7. #dartlang JS программисты потеют: пытаются ублажить VM для скорости
  8. 8. #dartlang Авторы JS VM тоже потеют
  9. 9. #dartlang Не потеет только сам JS
  10. 10. #dartlang o = { l1: -1, l2: 1, l3: "something" }; arr = []; arr[o.ll+o.l2]=o.l3; arr.length // => 0 ???
  11. 11. #dartlang o = { l1: -1, l2: 1, l3: "something" }; arr = []; arr[o.ll+o.l2]=o.l3; arr.NaN // => “something”
  12. 12. #dartlang Удивительно для VM = Удивительно программисту
  13. 13. #dartlang THREE.QuadEdgeMesh = function(mesh) { function HalfEdge(/* ... */) { /* ... */ } /* ... */ this.addFace = function () { }; };
  14. 14. #dartlang THREE.QuadEdgeMesh = function(mesh) { function HalfEdge(/* ... */) { /* ... */ } /* ... */ this.addFace = function () { }; }; Медленно :-(
  15. 15. #dartlang function HalfEdge(/* ... */) { } THREE.QuadEdgeMesh = function(mesh) { }; Three.QuadEdgeMesh.prototype.addFace = ... Быстро :-)
  16. 16. #dartlang А почему?
  17. 17. #dartlang Теперь о Dart
  18. 18. #dartlang Простой выразительный язык
  19. 19. #dartlang Платформа
  20. 20. #dartlang ● VM ○ быcтрый edit-refresh ○ отладчик ○ server-side ● Анализатор ● Редактор ● Библиотеки ● Фреймворки
  21. 21. #dartlang foo() { return 42; }
  22. 22. #dartlang textWidth() { return 42; }
  23. 23. #dartlang textWidth(text) { return text.split(‘n’) .map((ln) => ln.length) .reduce(max); }
  24. 24. #dartlang textWidth(text) => text.split(‘n’) .map((ln) => ln.length) .reduce(max);
  25. 25. #dartlang textWidth(text) => text.split(‘n’) .map((ln) => ln.length) .reduce(max);
  26. 26. #dartlang textWidth(text) => text.split(‘n’) .map((ln) => ln.length) .reduce(max);
  27. 27. #dartlang fileWidth(url) => HttpRequest.getString(url) .then(textWidth);
  28. 28. #dartlang fileWidth(url) => HttpRequest.getString(url) .then(textWidth);
  29. 29. #dartlang fileWidth(url) => HttpRequest.getString(url) .then(textWidth);
  30. 30. #dartlang var w = fileWidth(SOME_URL); if (w >= 80) { print("Your file has width $w."); }
  31. 31. #dartlang var w = fileWidth(SOME_URL); if (w >= 80) { print("Your file has width $w."); }
  32. 32. #dartlang var w = fileWidth(SOME_URL); if (w >= 80) { print("Your file has width $w."); }
  33. 33. #dartlang var w = fileWidth(SOME_URL); if (w >= 80) { print("Your file has width $w."); } Exception: Class '_Future' has no instance method '>='.
  34. 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. 35. #dartlang fileWidth(SOME_URL).then((w) { if (w >= 80) print("Your file has width $w."); });
  36. 36. #dartlang Опциональная типизация: ● гибкость динамики ● удобство статики + Предсказуемая семантика
  37. 37. #dartlang Future<num> fileWidth(String url) => ...
  38. 38. #dartlang Предсказуемая семантика ● ранние ошибки ● меньше удивительного
  39. 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. 40. #dartlang for (var i = 0; i < arr.length; i++) { var listener = (e) => handleEventAt(i); }
  41. 41. #dartlang for (var i = 0; i < arr.length; i++) { var listener = (e) => handleEventAt(i); }
  42. 42. #dartlang for (var i = 0; i < arr.length; i++) { var listener = (e) => handleEventAt(i); }
  43. 43. #dartlang Разработка веб-приложений?
  44. 44. #dartlang
  45. 45. #dartlang <counters-list> </counters-list>
  46. 46. #dartlang <width-counter></width-counter> <width-counter></width-counter> <width-counter></width-counter> <width-counter></width-counter>
  47. 47. #dartlang AngularDart
  48. 48. #dartlang MODEL VIEW WHATEVER
  49. 49. #dartlang MODEL VIEW WHATEVER Dart objects DOM
  50. 50. #dartlang
  51. 51. #dartlang $ cat pubspec.yaml name: CodeFest2014 description: A CodeFest2014 sample dependencies: browser: any angular: any $ pub get Downloading angular 0.9.10...
  52. 52. #dartlang Библиотеки
  53. 53. #dartlang import '../lib1.dart'; import 'dart:math' show max; import 'package:js/js.dart' as js;
  54. 54. #dartlang ● dart:math ● dart:async ● dart:isolate ● dart:typed_data ● dart:html ● dart:io ● dart:mirrors ● …
  55. 55. #dartlang import 'package:angular/angular.dart';
  56. 56. #dartlang class WidthCounter { var url, width = "n/a"; count() => fileWidth(url) .then((v) => width = v) .catchError((e) => width = "n/a"); }
  57. 57. #dartlang Классы: ● объекты “заморожены” ● одиночное наследование ● любой класс это интерфейс ● mixins ● generics
  58. 58. #dartlang @NgComponent( selector: 'width-counter', template: …, publishAs: 'ctrl' ) class WidthCounter {
  59. 59. #dartlang <div> <input type="text" ng-model="ctrl.url" ng-change="ctrl.count()"> is <b>{{ctrl.width}}</b> columns wide. </div>
  60. 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. 61. #dartlang main() { ngBootstrap( module: new Module() ..type(WidthCounter) ..type(CountersList)); }
  62. 62. #dartlang main() { ngBootstrap( module: new Module() ..type(WidthCounter) ..type(CountersList)); }
  63. 63. #dartlang Injector ngBootstrap({ Module module: null, List<Module> modules: null, dom.Element element: null, String selector: '[ng-app]'})
  64. 64. #dartlang main() { ngBootstrap( module: new Module() ..type(WidthCounter) ..type(CountersList)); }
  65. 65. #dartlang main() { var m = new Module(); m.type(WidthCounter); m.type(CounterList); ngBootstrap(module: m); }
  66. 66. #dartlang
  67. 67. #dartlang
  68. 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. 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. 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. 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. 72. #dartlang addCounter() { counters.add(new Border( color: 'hsla(${rnd.nextInt(360)}, ’ ’75%, 50%, 0.5)')); }
  73. 73. #dartlang <width-counter ng-repeat="border in ctrl.counters" with-border="border"> </width-counter>
  74. 74. #dartlang <width-counter ng-repeat="border in ctrl.counters" with-border="border"> </width-counter>
  75. 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. 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. 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. 78. #dartlang class Border extends Object with Exportable { @export var width, color, style; } border.toJSON()
  79. 79. #dartlang Dart компилируется в JavaScript с помощью dart2js
  80. 80. #dartlang Dart - для современного веба ● Платформа, готовая к использованию ● dartlang.org ● Компилируется в JavaScript

×