Dart
Towards a Component-Oriented Web
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Kevin Moore
@kevmoo
github.com/kevmoo
MSFT, .NET, WPF,
Silverlight
Rails, Javascript, Google
Closure Compiler
Dart Committ...
Components
Libraries
Frameworks
Systems
Encouraged?
Enforced?
Easy?
Structure = Sanity
C#
Console.WriteLine("Hello, World!");
C#
using System;
public class Hello
{
public static void Main()
{
Console.WriteLine("Hello, World!");
}
}
Javascript
console.log('Hello, World!');
Javascript
(function (document, window) {
'use strict';
console.log('Hello, World!');
})(document, window);
Javascript WAT?
[] + [] => ''
{} + [] => 0
lexical scoping
undefined vs null
var array = [1, 2, 3];
array[1000] = 'Huh?';
...
Javascript Developers (In Theory)
● jQuery
● CoffeeScript
● TypeScript
● Google Closure Tools
● Google Web Toolkit
● Requi...
Google's CoffeeScript* ** ***
*Not 100% accurate
**Good 1st approx
***My words, not Google's
Unsurprising
C/C++, Java, C#, Javascript
(){};
Unsurprising
main() {
greet('Hello', "World");
}
greet(greeting, name) {
print('$greeting, $name!');
}
Optionally Typed, library privacy
void main() {
_greet('Hello', "World");
}
void _greet(String greeting, String name) {
pr...
Productive
Productive - Well Layered
Classes and Top-level members
○ class Foo extends Bar {}
○ const _reservedWords = const ['where'...
Productive - Well Layered
Doc generation in-the-box
Productive - Cascades
// Without cascades.
var button = new ButtonElement();
button.id = 'awesome';
button.classes.add('im...
Productive - Cascades
// With cascades.
var button = new ButtonElement()
..id = 'awesome'
..classes.add('important')
..onC...
Productive - Breaking Changes
// Javascript
// v1 API
var getToken = function(userId, secret) { ...}
// v2 API
var getToke...
Productive - Breaking Changes
// Dart
// v1 API
Token getToken(int userId, String secret)
{...}
// v2 API - breaking
Token...
Productive - Concepts
Few powerful concepts, everywhere
Future
○ Unit of async execution
○ ~Promise, Task
○ Chaining, erro...
Future: list of URLs
Future<Map<String, String>> getUrls(Iterable<String> urls) {
var map = <String, String>{};
var client...
Tools
Tools
● Editor
● Pub
● Unit test, args libraries
Demo - Pop, Pop Win!
● Dart2JS Deployed
● Chrome Packaged App
● JS-Interop for Analytics, chrome.* APIs
Dart in all modern* browsers
dart2js
*IE9+
dart2js - Tree Shaking
flySpaceship() {
print('Strap in!');
}
const _likeA = 'hug';
knitSweaters() {
print("It's like wear...
dart2js - Tree Shaking
const _likeA = 'hug';
knitSweaters() {
print("It's like wearing a $_likeA");
}
main() {
knitSweater...
dart2js - Tree Shaking
main() {
print("It's like wearing a hug");
}
Why Dart is NOT Google's CoffeeScript
Dart VM
Legal Javascript
function A() {}
A.prototype.foo = function() { print('foo') }
function B() { A.call(this) }
B.prototype =...
Legal Dart
class A {
foo() => print('foo');
}
class B extends A{}
var b = new B();
main() { b.foo(); }
Richards - OS Kernel Simulation
DeltaBlue: one-way constraint solver
Monster Demo
Performance = Battery
Demo
Web Components
● Web UI: Dart + Web Components
● Subclass 'Element'
● Code + HTML + CSS: One file
● Output works on modern...
100% Open Source
Language, VM, Tools
Many Non-Google Contributors
Google: Betting on Dart
Several internal projects
V1 thi...
Web Site dartlang.org
Google I/O 2013 j.mp/io2013dart
Thanks!
@kevmoo
github.com/kevmoo
kevin@thinkpixellab.com
Backup
● implements vs extends vs mixins
● ctor magic: Person(this.fn, this.ln)
● isolates
● Mirror system
● Doc generatio...
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/dart-
component-dev
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
Upcoming SlideShare
Loading in...5
×

Component-Oriented Web Development with Dart

1,286

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,286
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Component-Oriented Web Development with Dart"

  1. 1. Dart Towards a Component-Oriented Web
  2. 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. 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. 4. Kevin Moore @kevmoo github.com/kevmoo MSFT, .NET, WPF, Silverlight Rails, Javascript, Google Closure Compiler Dart Committer, Google Developer Expert
  5. 5. Components Libraries Frameworks Systems
  6. 6. Encouraged? Enforced? Easy? Structure = Sanity
  7. 7. C# Console.WriteLine("Hello, World!");
  8. 8. C# using System; public class Hello { public static void Main() { Console.WriteLine("Hello, World!"); } }
  9. 9. Javascript console.log('Hello, World!');
  10. 10. Javascript (function (document, window) { 'use strict'; console.log('Hello, World!'); })(document, window);
  11. 11. Javascript WAT? [] + [] => '' {} + [] => 0 lexical scoping undefined vs null var array = [1, 2, 3]; array[1000] = 'Huh?'; array['huh'] = 'WAT?';
  12. 12. Javascript Developers (In Theory) ● jQuery ● CoffeeScript ● TypeScript ● Google Closure Tools ● Google Web Toolkit ● RequireJS ● modulejs
  13. 13. Google's CoffeeScript* ** *** *Not 100% accurate **Good 1st approx ***My words, not Google's
  14. 14. Unsurprising C/C++, Java, C#, Javascript (){};
  15. 15. Unsurprising main() { greet('Hello', "World"); } greet(greeting, name) { print('$greeting, $name!'); }
  16. 16. Optionally Typed, library privacy void main() { _greet('Hello', "World"); } void _greet(String greeting, String name) { print('$greeting, $name!'); }
  17. 17. Productive
  18. 18. 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
  19. 19. Productive - Well Layered Doc generation in-the-box
  20. 20. Productive - Cascades // Without cascades. var button = new ButtonElement(); button.id = 'awesome'; button.classes.add('important'); button.onClick.listen((e) => beAwesome()); button.text = 'Click Me!';
  21. 21. Productive - Cascades // With cascades. var button = new ButtonElement() ..id = 'awesome' ..classes.add('important') ..onClick.listen((e) => beAwesome()) ..text = 'Click Me!';
  22. 22. Productive - Breaking Changes // Javascript // v1 API var getToken = function(userId, secret) { ...} // v2 API var getToken = function(userId, secret, authority) {...}
  23. 23. 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]) {...}
  24. 24. 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
  25. 25. 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')); });
  26. 26. Tools
  27. 27. Tools ● Editor ● Pub ● Unit test, args libraries
  28. 28. Demo - Pop, Pop Win! ● Dart2JS Deployed ● Chrome Packaged App ● JS-Interop for Analytics, chrome.* APIs
  29. 29. Dart in all modern* browsers dart2js *IE9+
  30. 30. dart2js - Tree Shaking flySpaceship() { print('Strap in!'); } const _likeA = 'hug'; knitSweaters() { print("It's like wearing a $_likeA"); } main() { knitSweaters(); }
  31. 31. dart2js - Tree Shaking const _likeA = 'hug'; knitSweaters() { print("It's like wearing a $_likeA"); } main() { knitSweaters(); }
  32. 32. dart2js - Tree Shaking main() { print("It's like wearing a hug"); }
  33. 33. Why Dart is NOT Google's CoffeeScript Dart VM
  34. 34. 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()
  35. 35. Legal Dart class A { foo() => print('foo'); } class B extends A{} var b = new B(); main() { b.foo(); }
  36. 36. Richards - OS Kernel Simulation
  37. 37. DeltaBlue: one-way constraint solver
  38. 38. Monster Demo Performance = Battery
  39. 39. Demo
  40. 40. Web Components ● Web UI: Dart + Web Components ● Subclass 'Element' ● Code + HTML + CSS: One file ● Output works on modern browsers
  41. 41. 100% Open Source Language, VM, Tools Many Non-Google Contributors Google: Betting on Dart Several internal projects V1 this year Community Betting on Dart
  42. 42. Web Site dartlang.org Google I/O 2013 j.mp/io2013dart
  43. 43. Thanks! @kevmoo github.com/kevmoo kevin@thinkpixellab.com
  44. 44. Backup ● implements vs extends vs mixins ● ctor magic: Person(this.fn, this.ln) ● isolates ● Mirror system ● Doc generation ● Drone.io ● Debugging
  45. 45. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/dart- component-dev

×