Chris Buckett | Entity Group

Bringing your app to the web with Dart

Why I'm here…

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

AppsIdeal for modern single-page applications with Web Components

Fast

https://www.dartlang.org/performance/

Dart VM

dart2js

JS V8

• Snapshots• VM Runtime• JavaScript

Snapshots

• Uses the browsers caching mechanism• Stores a serialized form of the heap

• This results in Faster Startup Times

Optimized VM• No monkey patching

objects

• No prototype chain

• Growable and fixed size arrays

• Integer and Double types

• SIMD Support

Dart as JavaScript

• Design goal to always target JavaScript

• Can sometimes be faster than hand-written JavaScriptexample…– Null checks (final keyword)– Bounds checks (fixed length lists)

Building complex apps• Communicate intent to tools and humans...

• Modular by design…

• Great tool ecosystem…

by using the optional type system

with libraries and packages

editor, debugger, doc tool, "Dartium"server-side VM, test framework,package manager…

Let's see some Java

class Person {

String _name; String getName() { return _name; } Person(String name) { this._name = name; } }

Dart

This is also valid Java: http://ideone.com/F0e2TD

"Private" denoted by underscore

Traditional use of "this"

Inherits from "Object" by default

String get name => _name;set name(String value) => _name = value;

Getter and setter syntax

Single-line function syntax (lambda)Person(String this._name);

Automatic field initialization

Communicating intent…….to humans and tools

var greet = function(person, greeting) { var result = greeting + " " + person.name; return result;}

What is a person type?

What is a greeting type?

What is the return type?

How can we be sure that greet is always a function type?

Is .name a valid property of person?

(this is JavaScript)

var greet = function(person, greeting) { // @type {string} var result = greeting + " " + person.name; return result;}

/** * @param {Person} person The person to greet * @param {string} greeting The greeting message * @return {string} The personalized message */

Communicating intent…….to humans and tools

Adding annotations is fine…

But why not bake it into the language…

(this is JavaScript with annotations)

Communicating intent…….to humans and tools

We've turned to the Dart slide…

String greet(Person person, String greeting) { var result = greeting + " " + person.name; return result;}

Type information on the surface area of your API

Lets tools validate this…

… and validate calling code.

greet(person, greeting) {

Optional Typing

class Person { var _name; get name => _name; Person(this._name); }

main() { var p = new Person('Chris'); print(p.name);}

Great for experimenting(but give add typeannotations later)

Type annotations add no value here, keep it var

All Dart programs start with a main() function…

Class based, but also Functional

main { var greeting = "Hello";

var handler = (event) { print(greeting);}

someButton.on.click(handler);

}

Closures are great for event based programming

Storing a function in the handler variable

greeting is stored in the closure

Pass the handler function as an argument

otherButton.on.click((event) { print(greeting);});

Even just pass the function anonymously

What else does Dart have…?

• Interfaces

• Futures

• Generics

• Concurrency

• Reflection

class Person implements Serializable {…}

doAsync().then((result) { … } );

do something with result

var map = new Map<String, Person>();

port.send("Hello..");

instance.invoke('sayHello',[…]);

Libraries and Packages• Libraries are "designed" into the language

library data_model;

import 'dart:convert';import 'package:myapp/data_access.dart';

part 'src/customer.dart';part 'src/order.dart';

// other code…

Give a library a name

Import other libraries

Multiple libraries can go in a package

You can split a library across multiple files

What about the tool ecosystem?

Editor…

Debugger…

Dart2jsPub package manager

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

Anatomy of a Web Component<polymer-element name='tweet-this' attributes='url'> <template> <style> … </style> <div> <button on-click="doTweet">Tweet This</button> </div> </template> <script type='application/dart'> import 'package:polymer/ploymer.dart'; @CustomTag('tweet-this') class TweetThis extends PolymerElement { String url; void doTweet() { // send a tweet… } } </script></polymer-element>

Uses the Polymer framework

<tweet-this url='http://foo.com'></tweet-this>

Public API

Template defines what it looks like

Script defines how it works

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

Arbitrarily complex tags

<html><head> <import rel='import' href='awesome.html'> </head><body>

<awesome-app></awesome-app></body></html>

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

Where to find out more…

• www.dartlang.org• #dartlang

• @chrisdoesdev