1. Structured web programming
Created by Lars Bak & Gilad Bracha
Come to the Dart side.
Gilad Bracha in an interview on Dart

2. What is DART?
● New programming language
● Open Source Project
● Simple OO programming language
● Class-based single inheritance with interfaces
● Optional static types
● Real lexical scoping
● Single-threaded
● Familiar Syntax
● It's still a Technology Preview
Hello World!

3. Dart is NOT the competition of
JavaScript
● Dart is meant to fill a vacuum, not to replace
JavaScript, but rather to fill the vacuum left by
fragmented mobile platforms.
● It seems they are targeting the problem of
programming in Java-like for android, Objective-C
for iOS and so forth.
● It's not done.

4. Type-Checker
● Dart has a different type-checker.
● The conventional type-checker tries to prove a program
obeys the type system.
● If it can't construct a proof - the program is considered
invalid, "Guilty until proven innocent"
● In Dart, you are innocent until proven guilty.
● During development one can choose to validate types.

5. Optional Types
● Static checker provides warnings; tuned to be unobtrusive
● Type annotations have no effect except ...
● During development, you can check dynamic types against
declarations
○ T x = o; assert(o === null || o is T);
● By default, type annotations have no effect and no cost
○ Code runs free
Example

6. Classes
● Single class inheritance (Object is the default)
● Interfaces
● Constructor assign
Greeter.withPrefix(this.prefix); //A constructor
var greeter = new Greeter.withPrefix('Howdy');
● Setters and Getters
class Greeter {
String _prefix = 'Hello,'; // Hidden instance variable.
String get prefix() => _prefix; // Getter for prefix.
void set prefix(String value) {...} // Setter for prefix.
}
greeter.prefix = 'Howdy,'; // Set prefix.
Example

7. ISOLATES
● Inspired by Erlang, Dart has isolates
● Lightweight units of execution
○ Each isolate is conceptually a process
○ Nothing is shared
○ All communication takes place via message passing
● Isolates support concurrent execution
● Which gives us Actor based concurrency
Isolates

8. DART EXECUTION

9. SNAPSHOTTING IN THE DART VM
● Process of serializing the heap after loading the application
● Loading 54173 lines of Dart code takes 640 ms
● Loading same application from a snapshot takes 60 ms
● Startup > 10x faster

10. How to use Dart?
One can run Dart code in several ways:
● Translate Dart code to JavaScript that can run in any
modern browser:
○ Chrome
○ Safari 5+
○ Firefox 4+
● Execute Dart code directly in a VM on the server side
●
● Use Dartboard to write, modify, and execute small Dart
programs within any browser window

11. Embedding Dart in HTML
● Using the HTML script tag with type='application/dart'.
● Like other script tags, the script contents can be inlined as the
body of the script tag or specified by reference via a URL using the
script tag’s src attribute.
● The Dart script can have optional #source and #import directives.
It must have a visible top-level function called main(), either
declared directly in the script or in a sourced/imported file. The
browser will invoke main() when the page is loaded.

12. Fundamental differences from JavaScript
● Isolated script tags
○ Each script tag runs in isolation.
○ Use #import to use code from other URL
○ Each script tag requires a main() to be run.
● Delayed Execution
○ Each script's main() is called on DOMContentLoaded
event
○ Ordering is not guaranteed
○ Dart code executes after page load.
○ We can assume the DOM is fully loaded.
● No inline event listeners

13. Improving the DOM
● Better Querying
Old New
elem.getElementById('foo'); elem.query('#foo');
elem.getElementsByTagName('div'); elem.queryAll('div');
elem.getElementsByName('foo'); elem.queryAll('[name="foo"]');
elem.getElementsByClassName('foo'); elem.queryAll('.foo');
elem.querySelector('.foo .bar'); elem.query('.foo .bar');
elem.querySelectorAll('.foo .bar'); elem.queryAll('.foo .bar');

14. Improving the DOM
● Use real collections
○ The queries return collections which are objects that implement the
Dart core library's built-in collection interfaces.
○ This way we get rid of a lot of special methods & made attributes a
map
Old New
elem.hasAttribute('name'); elem.attributes.contains('name');
elem.getAttribute('name'); elem.attributes['name'];
elem.setAttribute('name', 'value'); elem.attributes['name'] = 'value';
elem.removeAttribute('name'); elem.attributes.remove('name');
elem.hasChildNodes(); elem.nodes.isEmpty();
elem.firstChild(); elem.nodes[0];
elem.appendChild(child); elem.nodes.add(child);

15. Improving the DOM
● Use constructors
Old
document.createElement('div')
New
new Element.tag('div')
Or
TableElement table = new Element.html(
'<table><tr><td>Hello <em>Dart!</em></table>');

16. Improving the DOM
● Events
○ There are no inline events like 'onclick()'
○ New ElementEvents class. For each of the known event types, there is
a property on that class: click, mouseDown, etc
○ There are event objects that can add and remove listeners and
dispatch events.
Old New
elem.addEventListener('click', (event) => elem.on.click.add( (event) => print
print('click!'), false); ('click!'));
elem.removeEventListener( 'click', elem.on.click.remove(listener);
listener);

17. A technology preview on
dartlang.org
dart.googlecode.com
http://gototoday.dk/2011/10/10/lars-bak-on-dart/
http://www.2ality.com/2011/10/dart-launch.html
http://dartinside.com/
@DartInside