Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dart: The Dawn of Web Apps
Search
Ladislav Thon
February 24, 2013
1
480
Dart: The Dawn of Web Apps
Ladislav Thon
February 24, 2013
Tweet
Share
More Decks by Ladislav Thon
See All by Ladislav Thon
On Value Types or Why Reference Locality Matters
ladicek
0
37
Write Yourself an Annotation Processor
ladicek
0
42
Kotlin or The Quest For Java.Next
ladicek
0
170
Dart++
ladicek
0
140
Oh my Dart!
ladicek
1
160
Dart: Preview
ladicek
0
83
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
A designer walks into a library…
pauljervisheath
209
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Documentation Writing (for coders)
carmenintech
75
5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Mobile First: as difficult as doing things right
swwweet
224
10k
Transcript
Come to the Dart side! We have cookies!
Dart: The Dawn of Web Apps ladicek.github.com
500 000 lines of JS
500 000 lines of JS Say hello to Dart!
main() { print("Hello, Dart!"); }
class Person { var name, age; Person(this.name, this.age); toString() =>
"$name ($age years)"; } main() { var me = new Person("Ladislav Thon", 30); print(me); }
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 }
Innocent until proven guilty
Client-side code import 'dart:html'; main() { query('#button').onClick.listen((event) { // stream
... }); }
Server-side code import 'dart:io'; main() { HttpServer.bind('127.0.0.1', 1337).then((server) { //
future server.listen((request) { // stream … }); }); }
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) { ... }); }
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 }
And a lot more
Implicit interfaces & properties abstract class Person { get name;
get age; set age(value); } class Monster implements Person { final name = 'Cthulhu'; var age = '?!?!?!'; }
Inheritance & mixins class Entity { int id; } //
or whatever abstract class Named { get name; toString() => '$name'; } class Person extends Entity with Named { get name => 'Cthulhu'; }
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); }
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; } }
Cascades class Person { var name, age; } main() {
var me = new Person() ..name = 'Ladislav Thon' ..age = 30; }
Privacy class Person { var _isEnemy; var name, age; }
main() { // in another library var me = ...; print(me._isEnemy); // NO! }
class Proxy { var target; Proxy(this.target); noSuchMethod(invocation) { print('Calling ${invocation.memberName}');
return invocation.invokeOn(target); } }
Web UI
Web UI Web Components
Web UI MDV Templates
Web UI Polyfill for current browsers
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>
Dart part import 'package:web_ui/web_ui.dart'; class Counter extends WebComponent { int
value = 0; increment() { value++; } }
Usage <html> <head> <link rel="components" href="counter.html"> </head> <body> <x-counter></x-counter> <script
type="application/dart">main() {}</script> </body> </html>
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>
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>
Performance Fast startup
Performance Fast runtime (beats V8 already)
Tooling Eclipse, IntelliJ IDEA vim, Sublime Text
So what is it all about?
So what is it all about? Structure!
www.dartlang.org
ladicek.github.com ?