Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,347 views

Published on

Published in: Internet, Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×