JAZOON'13 - Paul Brauner - A backend developer meets the web: my Dart experience

My Dart Experience
Paul Brauner

About Me
• PhD in Logic / Types
• Postdoc in Languages
• Now at Google

|

About Me
• PhD in Logic / Types
• Postdoc in Languages
map f (x:xs) = f x : map f xs

• Now at Google

for (x <- xs) f(x)

|

My Work Involves
• Writing backends
• Writing background jobs (mapreduce)
• Mostly Java, C++

|

I Take for Granted
• Code navigation, completion, static errors
• Libraries / Modules
• Generated documentation
• Reasonable performance
|

I

Web Development *

* except for fast edit-refresh cycle, that's awesome

|

WAT (h/t Gary Bernhardt)
> [] + {}
[object Object]
> {} + []
0
> {} + {}
NaN

|

WAT - Reloaded
var x = "top-level";
function foo() {
if (true) { var x = "inside-if"; }
console.log(x);
}
foo();

|

WAT - Reloaded
function foo() {
console.log(x);
}
foo();
inside-if
|

Dart
• Language and Libraries
• Tools
• Virtual Machine
• Compiles to Javascript

|

Targets All Browsers
edit/refresh
.dart

Virtual Machine

|

Targets All Browsers
edit/refresh

deploy
.dart
dart2js
.js

Virtual Machine

|

Alternatives
• CoffeScript & Friends: only improve syntax
• Closure: structure but same semantics
• GWT: good but slow edit/refresh cycle (fixed in
upcoming version!)

|

Dart
• Semantics
• Structure
• Fast edit/refresh cycle

|

Dart in a Nutshell
class Point {
double x, y;
Point(this.x, this.x);
toString() => "($x, $y)";
}
|

Dart in a Nutshell
class Point {

Class-based

double x, y;
}
|

Dart in a Nutshell
class Point {

Class-based

double x, y;

Optionally typed

}
|

Dart in a Nutshell
class Point {

Class-based

double x, y;

Optionally typed

}
|

Terse syntax

Clean Unsurprising Semantics

|

Clean Semantics - Examples
• Only true is truthy
• There is no undefined, only null
• No type coercion with ==, +

|

Clean Semantics – Missing Getter
"hello".missing

// ??

|

Clean Semantics – Missing Getter
"hello".missing

// ??

Class 'String' has no instance getter 'missing'.
NoSuchMethodError : method not found: 'missing'
Receiver: "hello"
Arguments: []
|

Clean Semantics – Index out of Range
[][42]

// ??

|

Clean Semantics – Index out of Range
[][42]

// ??

RangeError: 42

|

Clean Semantics – Variable Scope
void foo() {
print(x);
}
void main() { foo(); } // ??

|

Clean Semantics – Variable Scope
void foo() {
print(x);
}
void main() { foo(); } // ??
top-level
|

Clean Semantics – Scope of this
class App {
App(button) {
button.onClick.listen((e) => this.foo());
}
foo() { … }
}
|

Structure - Libraries
library game;
import 'dart:math';

Module system

class Game { … }
play(Game game) { … }
_secret(Game game) { … }

|

library game;
import 'dart:math';

Module system

class Game { … }

Scoped definitions


|

library game;
import 'dart:math';

Module system

class Game { … }

Scoped definitions


|

Private definition

Structure - Packages
name: parsers
version: 0.13.6
dependencies:
persistent: '>=0.7.0 <0.8.0'
dev_dependencies:
unittest: any

|

Towards a Better Language
• Optional types
• Mixins (class A extends B with C)
• Method cascades (foo..bar(1)..baz(2))
• Future proof APIs
|

Future Proof APIs
class Point { // now polar coordinates
double angle, radius;
Point(this.angle, this.radius);
…
}
How do we prevent clients from breaking?
|

Future Proof APIs
get x => …
set x(value) => …
operator [](int index) => …
toString([bool asJson]) => …
}
|

Future Proof APIs
get x => …
set x(value) => …

Getters / Setters

}
|

Future Proof APIs
get x => …
set x(value) => …

Getters / Setters

}
|

Operator
overriding

Future Proof APIs
get x => …
set x(value) => …

Getters / Setters


Operator
overriding

}
|

Optional
arguments

Future Proof APIs
factory Point(x, y) {
return new Point.polar(…);
}

Factory
constructors

Point.polar(angle, radius) { … }
}
|

Future Proof APIs
factory Point(x, y) {
return new Point.polar(…);
}

Factory
constructors

Point.polar(angle, radius) { … }
}
|

Named
constructors

Not Just a Language
• Modern, consistent library (collections, typed
HTML bindings, futures, streams, ...)
• JS interoperability
• Server-side programming

|

Flip It!

Snappy UI
Offline playing
|

Flip It!
Validation
required

Snappy UI
Offline playing
|

Code Reuse
import

common.dart
class Board {
Board.decode(str) { … }
String encode() { … }
bool validate() { … }
}

|

server.dart

import

client.dart

3rd Party Libraries
Bootstrap for Dart
Google APIs client libs
OAuth2 authentication
PostgreSQL driver
Clientside routing
Web Server
|

The Problem with HTML
• "Widgets" are a bunch of nested divs
• Unique IDs leak all over the place
• CSS leaks to parents / children

|

MVC Boilerplate
class Model {
StreamController
StreamController
StreamController
StreamController
StreamController
StreamController
StreamController

_onCurrentBoardChanged = new StreamController();
_onPreviousBoardChanged = new StreamController();
_onCurrentPathChanged = new StreamController();
_onPreviousPathChanged = new StreamController();
_onStateChanged = new StreamController();
_onUserInfoChanged = new StreamController();
_onSignInStatusChanged = new StreamController();

void _initStreams() {
onCurrentBoardChanged = _onCurrentBoardChanged.stream.asBroadcastStream();
onPreviousBoardChanged = _onPreviousBoardChanged.stream.asBroadcastStream();
onCurrentPathChanged = _onCurrentPathChanged.stream.asBroadcastStream();
onPreviousPathChanged = _onPreviousPathChanged.stream.asBroadcastStream();
onStateChanged = _onStateChanged.stream.asBroadcastStream();
onUserInfoChanged = _onUserInfoChanged.stream.asBroadcastStream();
onSignInStatusChanged = _onSignInStatusChanged.stream.asBroadcastStream();
}
void _currentBoardChanged() {
_onCurrentBoardChanged.add(null);
}
…
}

|

Web Components
<messages>
<message>
<subject>
Please fill out the TPS report
</subject>
<sent>2012-10-03</sent>
<summary>
I'm going to have to ask you to come in...
</summary>
</message>
<message>
<subject>
Reminder: fill out that TPS report!
</subject>
<sent>2012-10-04</sent>
<summary>
It's been 24 hours...
</summary>
</message>
...
</messages>

|

Custom Elements
<custom-element>
Structure
<div>
<input>
<p>
<span></span>
</p>
</div>

Behavior

Styles

tag.verifyAccount();

<style>
p { color: red; }
</style>

|

Reusability
Custom
Element
import

HTML Page

import

HTML Page

|

import

HTML Page

Future Proof
• Based on emerging web standards
• Browser vendors interested
• Already partially implemented!

|

Polymer: Web Components Today

Polymer.dart

|

Custom Element Declaration
<polymer-element name="my-message">

</polymer-element>

|

<template>
<div id="frame">
<b>Subject: </b><content select=".subject"></content>
<content select="p"></content>
</div>
Structure
</template>
</polymer-element>

|

<template>
<style> #frame { border: 1px solid black; } </style>

Style

<div id="frame">
</div>
Structure
</template>
</polymer-element>

|

<template>
<style> #frame { border: 1px solid black; } </style>

Style

<div id="frame">
</div>
Structure
</template>
<script type="application/dart" src="my_message.dart"></script>
</polymer-element>

Behavior

|

Custom Element Instantiation
<head>
<link rel="import" href="my_message.html">
</head>

|

Import

<head>
</head>

Import

<body>
<my-message>
<span class="subject">Hello</span>
<p>How are you?</p>
</my-message>
</body>

|

Instantiation

<head>
</head>
<body>
<div id="frame">This won't be framed</div>
<my-message>
<p>How are you?</p>
</my-message>
</body>

|

Import

Encapsulation
Instantiation


|


<my-message>
<p>How are you?</p>
</my-message>

|


<my-message>
<p>How are you?</p>
</my-message>

<div id="frame">
</div>

|

Customwon't be framed</div>
Element Instantiation
<div id="frame">This
<style>
#frame {
border: 1px solid black;
}
</style>

<div id="frame">
</div>

|

Behavior
@CustomTag('my-message')
class MyMessage extends PolymerElement {
enteredView() {
… this.children …
}
}

|

Behavior
enteredView() {
… this.children …

Which ones?

}
}

|

Shadow DOM
my-message

span

shadow root
div

p
b

"Hello"

"How are
you?"

"Subject:"

|

content

content

Behavior
enteredView() {

}
}

|

Behavior
enteredView() {
SpanElement subject = host.query('.subject');
subject.text = subject.text.toUpperCase();

}
}

|

DOM

Behavior
enteredView() {
SpanElement subject = host.query('.subject');
subject.text = subject.text.toUpperCase();
DivElement frame = shadowRoot.query('#frame');
frame.style.borderWidth = '3px';
}
}

|

DOM
Shadow
DOM

Data Binding
• Declarative Model-View-*
• Supports two-way bindings out of the box

|

Data Binding
<polymer-element name="click-counter">
<template>
<button on-click="increment">Click Me</button>
<p>You clicked the button {{count}} times.</p>
</template>
</polymer-element>

|

Data Binding
<polymer-element name="click-counter">
<template>
<button on-click="increment">Click Me</button>
<p>You clicked the button {{count}} times.</p>
</template>
<script src="click_counter.dart" type="…" ></script>
</polymer-element>
@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement {
@observable int count = 0;
void increment(Event e, var detail, Node target) {
count += 1;
}
}

|

Real World Example
data List<A> = Nil | Cons(A x, List<A> xs)

class List<A> { … }
class Nil<A> extends List<A> { … }
class Cons<A> extends List<A> { … }
|

Real World Example
<h2>Define</h2>
<textarea value='{{input}}'>
</textarea>

|

Real World Example

<label>
<input type='checkbox'
checked='{{finalFields}}'>
final fields
</label>

|

Real World Example
<h2>Profit</h2>
<code>
<pre id='generated'>
{{generated}}
</pre>
</code>

|

Real World Example
<h2>Profit</h2>
<code>
<pre id='generated'>
{{generated}}
</pre>
</code>
String get generated {
final config = new Config(finalFields, … );
return generate(input, config);
}

|

Can I have my Reader Now?

YES!

|

Bringing Reader Back to Life
• Haskell backend
• Polymer.dart* frontend

* actually its ancestor

|

Bringing Reader Back to Life

|

Thanks for the attention!
Follow me on G+ (Paul Brauner)
polux@google.com
https://github.com/polux

JAZOON'13 - Paul Brauner - A backend developer meets the web: my Dart experience

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JAZOON'13 - Paul Brauner - A backend developer meets the web: my Dart experience

Ähnlich wie JAZOON'13 - Paul Brauner - A backend developer meets the web: my Dart experience (20)

Mehr von jazoon13

Mehr von jazoon13 (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JAZOON'13 - Paul Brauner - A backend developer meets the web: my Dart experience