Presented at JAX London 2013 Building complex applications in the browser is hard especially when you are working in teams. Dart is ideal for developing the next generation of web applications in an enterprise environment, by allowing you to communicate type information to your fellow developers and automated tools. With familiar (but lightweight) syntax, class-based OOP and a type system that allows tooling, Java developers will quickly feel at home with Dart.

1. Chris Buckett | Entity Group
Bringing your app to the
web with Dart

2. Why I'm here…

3. Dart: Solving real problems
Fast
Language optimized for a fast Virtual Machine
Complex
Team working and communication
Browser
Runs in the browser,
as JavaScript or Dart
Apps
Ideal for modern singlepage applications with
Web Components

4. Fast
• Snapshots
• VM Runtime
• JavaScript
Dart VM
dart2js
JS V8
https://www.dartlang.org/performance/

5. Snapshots
• Uses the browsers caching mechanism
• Stores a serialized form of the heap
• This results in Faster Startup Times

6. Optimized VM
• No monkey patching
objects
• No prototype chain
• Growable and fixed
size arrays
• Integer and Double
types
• SIMD Support

7. Dart as JavaScript
• Design goal to always target JavaScript
• Can sometimes be faster than handwritten JavaScript
example…
– Null checks (final keyword)
– Bounds checks (fixed length lists)

8. Building complex apps
• Communicate intent to tools and humans...
by using the optional type system
• Modular by design…
with libraries and packages
• Great tool ecosystem…
editor, debugger, doc tool, "Dartium"
server-side VM, test framework,
package manager…

9. Let's see some Java Dart
class Person {
Inherits from "Object"
by default
Getter and setter syntax
String _name;
"Private" denoted
String getName()=> _name;
get name {
Automatic field
by = value;
return _name;
set name(String value) => _name underscore
initialization
}
Single-line
Person(String this._name); function syntax (lambda)
name) {
this._name = name;
}
}
Traditional use of "this"
This is also valid Java: http://ideone.com/F0e2TD

10. Communicating intent…
….to humans and tools
What is a person type?
How can we be sure that greet
is always a function type?
What is a greeting type?
var greet = function(person, greeting) {
var result = greeting + " " + person.name;
return result;
}
Is .name a valid
property of person?
What is the return type?
(this is JavaScript)

11. Communicating intent…
….to humans and tools
Adding annotations is fine…
/**
* @param {Person} person The person to greet
* @param {string} greeting The greeting message
* @return {string} The personalized message
*/
var greet = function(person, greeting) {
// @type {string}
var result = greeting + " " + person.name;
return result;
}
But why not bake it into the language…
(this is JavaScript with annotations)

12. Communicating intent…
….to humans and tools
Type information on the surface area of your API
greet(person, greeting) {
String greet(Person person, String greeting) {
var result = greeting + " " + person.name;
return result;
}
Lets tools validate this…
… and validate calling code.
We've turned to the Dart slide…

13. Optional Typing
class Person {
var _name;
get name => _name;
Person(this._name);
}
Great for experimenting
(but give add type
annotations later)
Type annotations add no
value here, keep it var
main() {
var p = new Person('Chris');
print(p.name);
}
All Dart programs start with a main() function…

14. Class based, but also Functional
main {
var greeting = "Hello";
var handler = (event) {
print(greeting);
}
Storing a function in
the handler variable
greeting is
stored in the
someButton.on.click(handler);
closure
otherButton.on.click((event) {
Pass the handler
print(greeting);
function as an
});
}
Even justargument
pass the
function anonymously
Closures are great for event based programming

15. What else does Dart have…?
• Interfaces
class Person implements Serializable {…}
• Futures
do something with result
doAsync().then((result) { … } );
• Generics
var map = new Map<String, Person>();
• Concurrency
port.send("Hello..");
• Reflection
instance.invoke('sayHello',[…]);

16. Libraries and Packages
• Libraries are "designed" into the language
library data_model;
Give a library a name
Import other libraries
import 'dart:convert';
import 'package:myapp/data_access.dart';
part 'src/customer.dart';
part 'src/order.dart';
Multiple libraries can
go in a package
// other code…
You can split a library
across multiple files

17. What about the tool ecosystem?
Editor…
Dart2js
Pub package manager
Debugger…

18. Web Components for the UI
• Create your own arbitrary complex HTML
tags
• Powered with HTML, CSS and Dart
– (or JavaScript…)
• Umbrella term for a number of technologies
– Shadow DOM
– HTML Imports
– Templates

19. Anatomy of a Web Component
<polymer-element name='tweet-this' attributes='url'>
<template>
<style>
Public API
…
</style>
Uses the Polymer framework
<div>
<button on-click="doTweet">Tweet This</button>
</div>
<tweet-this url='http://foo.com'></tweet-this>
</template>
<script type='application/dart'>
import 'package:polymer/ploymer.dart';
@CustomTag('tweet-this') Template defines what it looks like
class TweetThis extends PolymerElement {
String url;
void doTweet() {
Script defines how it works
// send a tweet…
}
}
</script>
</polymer-element>

20. <html>
<head>
Arbitrarily complex tags
<link rel='import' href='awesome.html'>
<link
<html>rel='import' href='funky.html'>
</head>
<head>
<body>
<import rel='import' href='awesome.html'>
<awesome-app>
</head>
<awesome-login></awesome-login>
<body>
<funky-menu>
<awesome-app></awesome-app>
<funky-item link='home'></funky-item>
<funky-item link='orders'></funky-item>
</body>
<funky-item link='products'></funky-item>
</html>
</funky-menu>
<awesome-content nav='home'></awesome-content>
</awesome-app>
</body></html>

21. Summary
• Dart is great for building Fast, complex,
browser apps
• Web Components using Polymer, provide a
new UI layer for the web
• There are great tools to help you develop Dart
apps

22. Where to find out more…
• www.dartlang.org
• #dartlang
• @chrisdoesdev