Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dart: The Dawn of Web Apps

238e8b2100a5366b226234b946026462?s=47 Ladislav Thon
February 24, 2013
460

Dart: The Dawn of Web Apps

238e8b2100a5366b226234b946026462?s=128

Ladislav Thon

February 24, 2013
Tweet

Transcript

  1. Come to the Dart side! We have cookies!

  2. Dart: The Dawn of Web Apps ladicek.github.com

  3. 500 000 lines of JS

  4. 500 000 lines of JS Say hello to Dart!

  5. main() { print("Hello, Dart!"); }

  6. class Person { var name, age; Person(this.name, this.age); toString() =>

    "$name ($age years)"; } main() { var me = new Person("Ladislav Thon", 30); print(me); }
  7. Optional typing void main() { Person me = new Person("Ladislav

    Thon", 30); List<Person> people = [me, ...]; people.forEach((Person person) => print(person)); people.forEach((person) { // iterable print(person); }); people.forEach(print); // closurization }
  8. Innocent until proven guilty

  9. Client-side code import 'dart:html'; main() { query('#button').onClick.listen((event) { // stream

    ... }); }
  10. Server-side code import 'dart:io'; main() { HttpServer.bind('127.0.0.1', 1337).then((server) { //

    future server.listen((request) { // stream … }); }); }
  11. Isolates import 'dart:isolate'; main() { var box = new MessageBox();

    streamSpawnFunction(worker).add( { 'replyTo': box.sink, 'value': ... } ); // sink box.stream.listen((response) { ... }); // stream } worker() { stream.listen((message) { ... }); }
  12. Mirrors import 'dart:mirrors'; main() { var person = new Person(...);

    var personMirror = reflect(person); personMirror.getField('name').then((resultMirror) { print(resultMirror.reflectee); }); // async today, probably sync in the future }
  13. And a lot more

  14. Implicit interfaces & properties abstract class Person { get name;

    get age; set age(value); } class Monster implements Person { final name = 'Cthulhu'; var age = '?!?!?!'; }
  15. Inheritance & mixins class Entity { int id; } //

    or whatever abstract class Named { get name; toString() => '$name'; } class Person extends Entity with Named { get name => 'Cthulhu'; }
  16. Optional parameters class Person { var name, age; Person({this.name: '<unknown>',

    this.age: 0}); growOlder([years = 1]) { age += years; } } main() { var me = new Person(name: 'Ladislav Thon'); me.growOlder(30); }
  17. Constructors class Person { final name, age; Person(this.name, this.age); Person.me()

    : name = 'Ladislav Thon', age = 30; static Person cache; factory Person.cachedMe() { if (cache == null) { cache = new Person.me(); } return cache; } }
  18. Cascades class Person { var name, age; } main() {

    var me = new Person() ..name = 'Ladislav Thon' ..age = 30; }
  19. Privacy class Person { var _isEnemy; var name, age; }

    main() { // in another library var me = ...; print(me._isEnemy); // NO! }
  20. class Proxy { var target; Proxy(this.target); noSuchMethod(invocation) { print('Calling ${invocation.memberName}');

    return invocation.invokeOn(target); } }
  21. Web UI

  22. Web UI Web Components

  23. Web UI MDV Templates

  24. Web UI Polyfill for current browsers

  25. HTML part <element name="x-counter" constructor="Counter" extends="div"> <template> <span>{{value}}</span> <button on-click="increment()">+1</button>

    </template> <script type="application/dart">...</script> </element>
  26. Dart part import 'package:web_ui/web_ui.dart'; class Counter extends WebComponent { int

    value = 0; increment() { value++; } }
  27. Usage <html> <head> <link rel="components" href="counter.html"> </head> <body> <x-counter></x-counter> <script

    type="application/dart">main() {}</script> </body> </html>
  28. Conditions & iteration <table template if="rows != null && !rows.isEmpty">

    <tr template iterate="headerItem in header"> <th>{{headerItem}}</th> </tr> <tbody template iterate="row in rows"> <tr template iterate="item in row"> <td>{{item}}</td> </tr> </tbody> </table>
  29. Passing values <html> <head> <link rel="components" href="grid.html"> </head> <body> <x-grid

    header="{{header}}" rows="{{rows}}"> </x-grid> <script type="application/dart">...</script> </body> </html>
  30. Performance Fast startup

  31. Performance Fast runtime (beats V8 already)

  32. Tooling Eclipse, IntelliJ IDEA vim, Sublime Text

  33. So what is it all about?

  34. So what is it all about? Structure!

  35. www.dartlang.org

  36. ladicek.github.com ?