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

  • 878 views
Uploaded on

 

More in: Internet , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
878
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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