![Javascript WAT? [] + [] => '' {} + [] => 0 lexical scoping undefined vs null var array = [1, 2, 3]; array[1000] = 'Huh?'; array['huh'] = 'WAT?';](https://image.slidesharecdn.com/untitled-130819161826-phpapp02/75/Component-Oriented-Web-Development-with-Dart-17-2048.jpg)
![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](https://image.slidesharecdn.com/untitled-130819161826-phpapp02/75/Component-Oriented-Web-Development-with-Dart-26-2048.jpg)
![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]) {...}](https://image.slidesharecdn.com/untitled-130819161826-phpapp02/75/Component-Oriented-Web-Development-with-Dart-31-2048.jpg)
![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')); });](https://image.slidesharecdn.com/untitled-130819161826-phpapp02/75/Component-Oriented-Web-Development-with-Dart-33-2048.jpg)
Uploaded byC4Media
Component-Oriented Web Development with Dart
The document discusses the Dart programming language and its applications in component-oriented web development, emphasizing its ease of use and productivity features. It outlines the structure and features of Dart, including its use in asynchronous execution and error handling, as well as highlighting its community and support through conferences like QCon. Additionally, the document promotes the Dart ecosystem, tools, and its integration with modern web standards.
Component-Oriented Web Development with Dart
- 1.
- 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 QConNew 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.
- 8.
- 10.
- 11. C# using System; public classHello { public static void Main() { Console.WriteLine("Hello, World!"); } }
- 12.
- 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 (InTheory) ● 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, libraryprivacy void main() { _greet('Hello', "World"); } void _greet(String greeting, String name) { print('$greeting, $name!'); }
- 25.
- 26. Productive - WellLayered 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 - WellLayered 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 - BreakingChanges // Javascript // v1 API var getToken = function(userId, secret) { ...} // v2 API var getToken = function(userId, secret, authority) {...}
- 31. Productive - BreakingChanges // 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 Fewpowerful concepts, everywhere Future ○ Unit of async execution ○ ~Promise, Task ○ Chaining, error handling Stream ○ Set of async messages ○ ~Observable ○ Button.onClick ○ HttpResponse
- 33. Future: list ofURLs 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.
- 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 allmodern* browsers dart2js *IE9+
- 40. dart2js - TreeShaking flySpaceship() { print('Strap in!'); } const _likeA = 'hug'; knitSweaters() { print("It's like wearing a $_likeA"); } main() { knitSweaters(); }
- 41. dart2js - TreeShaking const _likeA = 'hug'; knitSweaters() { print("It's like wearing a $_likeA"); } main() { knitSweaters(); }
- 42. dart2js - TreeShaking main() { print("It's like wearing a hug"); }
- 43. Why Dart isNOT 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 - OSKernel Simulation
- 48.
- 49. Monster Demo Performance =Battery
- 50.
- 51. Web Components ● WebUI: 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 GoogleI/O 2013 j.mp/io2013dart
- 55.
- 56. Backup ● implements vsextends vs mixins ● ctor magic: Person(this.fn, this.ln) ● isolates ● Mirror system ● Doc generation ● Drone.io ● Debugging
- 57. Watch the videowith slide synchronization on InfoQ.com! http://www.infoq.com/presentations/dart- component-dev