Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/170xwtC. Kevin Moore explains doing client-side data-binding, visual templates, and custom HTML elements in modern browsers with Dart, while providing forward compatibility with emerging web standards. Filmed at qconnewyork.com. Kevin Moore is a consultant specializing in open source web technologies. His experience includes UI platforms in .NET, web applications in Rails, and cutting edge games in Javascript. Kevin is committer and Google Developer Expert for Dart. His projects have highlighted the potential for building rich experiences with Dart.

1. Dart
Towards a Component-Oriented Web

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/dart-component-dev

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Kevin Moore
@kevmoo
github.com/kevmoo
MSFT, .NET, WPF,
Silverlight
Rails, Javascript, Google
Closure Compiler
Dart Committer, Google
Developer Expert

5. Components
Libraries
Frameworks
Systems

8. Encouraged?
Enforced?
Easy?
Structure = Sanity

10. C#
Console.WriteLine("Hello, World!");

11. C#
using System;
public class Hello
{
public static void Main()
{
Console.WriteLine("Hello, World!");
}
}

12. Javascript
console.log('Hello, World!');

13. Javascript
(function (document, window) {
'use strict';
console.log('Hello, World!');
})(document, window);

17. Javascript WAT?
[] + [] => ''
{} + [] => 0
lexical scoping
undefined vs null
var array = [1, 2, 3];
array[1000] = 'Huh?';
array['huh'] = 'WAT?';

18. Javascript Developers (In Theory)
● jQuery
● CoffeeScript
● TypeScript
● Google Closure Tools
● Google Web Toolkit
● RequireJS
● modulejs

21. Google's CoffeeScript* ** ***
*Not 100% accurate
**Good 1st approx
***My words, not Google's

22. Unsurprising
C/C++, Java, C#, Javascript
(){};

23. Unsurprising
main() {
greet('Hello', "World");
}
greet(greeting, name) {
print('$greeting, $name!');
}

24. Optionally Typed, library privacy
void main() {
_greet('Hello', "World");
}
void _greet(String greeting, String name) {
print('$greeting, $name!');
}

25. Productive

26. Productive - Well Layered
Classes and Top-level members
○ class Foo extends Bar {}
○ const _reservedWords = const ['where', 'for', 'each'];
Library
○ 1 or more files
○ Scope of privacy
○ Unit of importing (with optional alias)
■ import 'dart:io' as io;
Package
○ 1 or more libraries
○ Unit of deployment

27. Productive - Well Layered
Doc generation in-the-box

28. Productive - Cascades
// Without cascades.
var button = new ButtonElement();
button.id = 'awesome';
button.classes.add('important');
button.onClick.listen((e) => beAwesome());
button.text = 'Click Me!';

29. Productive - Cascades
// With cascades.
var button = new ButtonElement()
..id = 'awesome'
..classes.add('important')
..onClick.listen((e) => beAwesome())
..text = 'Click Me!';

30. Productive - Breaking Changes
// Javascript
// v1 API
var getToken = function(userId, secret) { ...}
// v2 API
var getToken = function(userId, secret,
authority) {...}

31. Productive - Breaking Changes
// Dart
// v1 API
Token getToken(int userId, String secret)
{...}
// v2 API - breaking
Token getToken(int userId, String secret,
String authority) {...}
// v2 API - non-breaking
Token getToken(int userId, String secret,
[String authority]) {...}

32. Productive - Concepts
Few powerful concepts, everywhere
Future
○ Unit of async execution
○ ~Promise, Task
○ Chaining, error handling
Stream
○ Set of async messages
○ ~Observable
○ Button.onClick
○ HttpResponse

33. Future: list of URLs
Future<Map<String, String>> getUrls(Iterable<String> urls) {
var map = <String, String>{};
var client = new HttpClient();
return Future.forEach(urls, (String url) {
return HttpRequest.getString(url)
.then((String result) {
map[url] = result;
});
});
}
getUrls(['http://j832.com', 'http://thinkpixellab.com'])
.then((results) {
results.forEach((url, content) => print('$url $content'));
});

34. Tools

35. Tools
● Editor
● Pub
● Unit test, args libraries

36. Demo - Pop, Pop Win!
● Dart2JS Deployed
● Chrome Packaged App
● JS-Interop for Analytics, chrome.* APIs

37. Dart in all modern* browsers
dart2js
*IE9+

40. dart2js - Tree Shaking
flySpaceship() {
print('Strap in!');
}
const _likeA = 'hug';
knitSweaters() {
print("It's like wearing a $_likeA");
}
main() {
knitSweaters();
}

41. dart2js - Tree Shaking
const _likeA = 'hug';
knitSweaters() {
print("It's like wearing a $_likeA");
}
main() {
knitSweaters();
}

42. dart2js - Tree Shaking
main() {
print("It's like wearing a hug");
}

43. Why Dart is NOT Google's CoffeeScript
Dart VM

44. Legal Javascript
function A() {}
A.prototype.foo = function() { print('foo') }
function B() { A.call(this) }
B.prototype = new A()
var b = new B()
b.foo()
// WAT?
B.prototype.foo = function() { print("new foo") }
b.foo()

45. Legal Dart
class A {
foo() => print('foo');
}
class B extends A{}
var b = new B();
main() { b.foo(); }

47. Richards - OS Kernel Simulation

48. DeltaBlue: one-way constraint solver

49. Monster Demo
Performance = Battery

50. Demo

51. Web Components
● Web UI: Dart + Web Components
● Subclass 'Element'
● Code + HTML + CSS: One file
● Output works on modern browsers

53. 100% Open Source
Language, VM, Tools
Many Non-Google Contributors
Google: Betting on Dart
Several internal projects
V1 this year
Community Betting on Dart

54. Web Site dartlang.org
Google I/O 2013 j.mp/io2013dart

55. Thanks!
@kevmoo
github.com/kevmoo
kevin@thinkpixellab.com

56. Backup
● implements vs extends vs mixins
● ctor magic: Person(this.fn, this.ln)
● isolates
● Mirror system
● Doc generation
● Drone.io
● Debugging

57. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/dart-
component-dev