Component-Oriented Web Development with Dart

1,620 views

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,620
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×