• Save
Component-Oriented Web Development with Dart
Upcoming SlideShare
Loading in...5
×
 

Component-Oriented Web Development with Dart

on

  • 1,493 views

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/170xwtC. ...

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.

Statistics

Views

Total Views
1,493
Views on SlideShare
1,493
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Component-Oriented Web Development with Dart Component-Oriented Web Development with Dart Presentation Transcript

  • Dart Towards a Component-Oriented Web
  • 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
  • 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
  • Kevin Moore @kevmoo github.com/kevmoo MSFT, .NET, WPF, Silverlight Rails, Javascript, Google Closure Compiler Dart Committer, Google Developer Expert
  • 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?'; array['huh'] = 'WAT?';
  • Javascript Developers (In Theory) ● jQuery ● CoffeeScript ● TypeScript ● Google Closure Tools ● Google Web Toolkit ● RequireJS ● modulejs
  • 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) { print('$greeting, $name!'); }
  • Productive
  • 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
  • Productive - Well Layered Doc generation in-the-box
  • Productive - Cascades // Without cascades. var button = new ButtonElement(); button.id = 'awesome'; button.classes.add('important'); button.onClick.listen((e) => beAwesome()); button.text = 'Click Me!';
  • Productive - Cascades // With cascades. var button = new ButtonElement() ..id = 'awesome' ..classes.add('important') ..onClick.listen((e) => beAwesome()) ..text = 'Click Me!';
  • Productive - Breaking Changes // Javascript // v1 API var getToken = function(userId, secret) { ...} // v2 API var getToken = function(userId, secret, authority) {...}
  • 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]) {...}
  • 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
  • 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')); });
  • 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 wearing a $_likeA"); } main() { knitSweaters(); }
  • dart2js - Tree Shaking const _likeA = 'hug'; knitSweaters() { print("It's like wearing a $_likeA"); } main() { knitSweaters(); }
  • 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 = new A() var b = new B() b.foo() // WAT? B.prototype.foo = function() { print("new foo") } b.foo()
  • 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 browsers
  • 100% Open Source Language, VM, Tools Many Non-Google Contributors Google: Betting on Dart Several internal projects V1 this year Community Betting on Dart
  • 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 generation ● Drone.io ● Debugging
  • Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/dart- component-dev