#dartlang
2014-02-01
j832.com
Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/
#dartlang
Me
Iowa
Microsoft
Freelance
Dart
Google
j832.com
#dartlang
✔ Improved productivity
✔ Increased
performance
#dartlang
Compile to JavaScript, runs across the modern web
#dartlang
#dartlang
Run Dart on the server with the Dart VM
#dartlang
require.js
Backbone
Backbone Marionette
jQuery
Modernizr
moment.js
dest templates
PhantomJS
Jasmine
Docs
Docs
Do...
#dartlang
Unit test
Dart SDK
Polymer
Intl
Packages
"Things are
consistent and
clear."
#dartlang
Apps start small, but grow and scale
#dartlang
Simple syntax, ceremony free
class Hug { Familiar
#dartlang
Simple syntax, ceremony free
class Hug {
num strength;
Hug(this.strength); Terse
#dartlang
Simple syntax, ceremony free
class Hug {
num strength;
Hug(this.strength);
Hug operator +(Hug other) {
return ne...
#dartlang
Simple syntax, ceremony free
class Hug {
num strength;
Hug(this.strength);
Hug operator +(Hug other) {
return ne...
#dartlang
Simple syntax, ceremony free
// ...
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
voi...
#dartlang
Simple syntax, ceremony free
// ...
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
voi...
#dartlang
main() => print('Hello, World!');
#dartlang
Clean semantics and behavior
#dartlang
Clean semantics and behavior
● Only true is truthy
● There is no undefined, only null
● No type coercion with ==...
#dartlang
Missing getter?
"hello".missing // ??
Class 'String' has no instance getter 'missing'.
NoSuchMethodError : metho...
#dartlang
String compared to number?
'hello' > 1 // ??
Class 'String' has no instance
method '>'.
Logical
#dartlang
Variable scope?
var foo = 'top-level';
main() {
if (true) { var foo = 'inside'; }
print(foo); // ?? What will th...
#dartlang
Scope of this?
class AwesomeButton {
AwesomeButton(button) {
button.onClick.listen((Event e) => this.atomicDinos...
#dartlang
Scalable structure
Functions Classes
Libraries
Packages
Mixins Interfaces
library games;
import 'dart:math';
imp...
#dartlang
var button = new ButtonElement();
button.id = 'fancy';
button.text = 'Click Point';
button.classes.add('importan...
#dartlang
Method cascades
var button = new ButtonElement()
..id = 'fancy'
..text = 'Click Point'
..classes.add('important'...
#dartlang
Inline initialization
parentElement.children.add(
new ButtonElement()..text = 'Click Point');
#dartlang
One of these things is not like the other
Object
Persistable
Hug
Hug is not
is-a Persistable
Don't pollute
your
...
#dartlang
Don't inherit, mixin!
Object
PersistableHug Mixin
#dartlang
Mixins
abstract class Persistable {
save() { ... }
load() { ... }
toJson();
}
class Hug extends Object with Pers...
#dartlang
Context switching considered harmful,
Iterate quickly
#dartlang
Demo
Pop, Pop, Win!
#dartlang
#dartlang
700+
packages
#dartlang
Demo
New Dart Project + Packages
#dartlang
Compile Dart to JavaScript with dart2js
#dartlang
main Library
baz foo bar boo
imports
calls
baz
main foo bar
Tree shaking
dart2js
#dartlang
Our challenge ...
clean semantics and unsurprising behavior
without
extra checks when compiled to JavaScript
#dartlang
#dartlang
#dartlang
#dartlang
#dartlang
#dartlang
Old 'n busted New hotness
<messages>
<message>
<subject>
Please fill out the TPS report
</subject>
<sent>2012-10...
#dartlang
<custom-element>
Structure Behavior Styles
<div>
<input>
<p>
<span></span>
</p>
</div>
tag.verifyAccount();
<sty...
#dartlang
Reusable
Custom Element
HTML Page
import import import
HTML Page HTML Page
#dartlang
Data binding
Data model DOM Nodes
Data model DOM Nodes
#dartlang
ShadowDOM
HTML Imports
<template>
Custom
Elements
New web
specifications
Future proof
#dartlang
Polymer.dart
(today)
Using web components today
#dartlang
Custom elements everywhere!
<body>
<persistable-db dbname="game" storename="sologames"></persistable-db>
<game-a...
#dartlang
Angular is ported to Dart!
#dartlang
<div my-controller>
<div class="well">
<click-counter count="{{ctrl.count}}"></click-counter>
</div>
</div>
Angu...
#dartlang
Dart in production
#dartlang
"Dart allows for quick prototyping as well as
robust code that is easy to refactor"
- Soundtrap
#dartlang
"Dart's familiar language, and cohesive set of
libraries, allowed the team to start building very
quickly."
- Mo...
#dartlang
"Dart offers a sane and consistent development experience for modern web
applications."
- Blossom
#dartlang
"The source code for this game (Escape) is 20% smaller
compared to the ActionScript version (69.6 KB vs 86.5 KB)...
#dartlang
#dartlang
Export Flash movies/games
to Dart from Flash Pro
#dartlang
"We rewrote Google's internal CRM app in 6
months, from scratch, with Dart and Angular."
- Internal team at Goog...
#dartlang
TC52 to standardize Dart language
#dartlang
Ready to get started? Write a Dart app!
dartlang.org/codelabs/darrrt/
#dartlang
Dart - for the modern web
● Platform you can use today
● Easy to get started - dartlang.org
● Compiles to JavaSc...
#dartlang
Thanks!
j832.com
Upcoming SlideShare
Loading in …5
×

Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore

2,392 views

Published on

Kevin Moore has worn many hats. Program manager. Project manager. People manager. Evangelist. Software engineer. He started programming at 9 and was building web software professionally at 15. Spent 6 years at Microsoft working on Microsoft Windows and Windows Presentation Foundation as a Program Manager. He became a recognized expert in component design and implementation for user interfaces and provided software consulting and freelancing services targeting Open Source web technologies. He is now the Dart program manager at Google.

He ran a workshop on DART at CodeCore for CodeCore's Community Week. For more educational tips and videos, visit CodeCore's blog at http://codecore.ca/news/

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
2,392
On SlideShare
0
From Embeds
0
Number of Embeds
789
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore

  1. 1. #dartlang 2014-02-01 j832.com Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/
  2. 2. #dartlang Me Iowa Microsoft Freelance Dart Google j832.com
  3. 3. #dartlang ✔ Improved productivity ✔ Increased performance
  4. 4. #dartlang Compile to JavaScript, runs across the modern web
  5. 5. #dartlang
  6. 6. #dartlang Run Dart on the server with the Dart VM
  7. 7. #dartlang require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs "I just want to write web apps!" "Hi, I want to build a web app"
  8. 8. #dartlang Unit test Dart SDK Polymer Intl Packages "Things are consistent and clear."
  9. 9. #dartlang Apps start small, but grow and scale
  10. 10. #dartlang Simple syntax, ceremony free class Hug { Familiar
  11. 11. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse
  12. 12. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } Operator overriding
  13. 13. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } Named, optional params w/ default value
  14. 14. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } One-line function
  15. 15. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } String Interpolation
  16. 16. #dartlang main() => print('Hello, World!');
  17. 17. #dartlang Clean semantics and behavior
  18. 18. #dartlang Clean semantics and behavior ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + Examples:
  19. 19. #dartlang Missing getter? "hello".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "hello" Arguments: [] Logical
  20. 20. #dartlang String compared to number? 'hello' > 1 // ?? Class 'String' has no instance method '>'. Logical
  21. 21. #dartlang Variable scope? var foo = 'top-level'; main() { if (true) { var foo = 'inside'; } print(foo); // ?? What will this print? } top-level Logical No hoisting
  22. 22. #dartlang Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ } } Lexical this
  23. 23. #dartlang Scalable structure Functions Classes Libraries Packages Mixins Interfaces library games; import 'dart:math'; import 'players.dart'; class Darts { // ... } class Bowling { // ... } Player findOpponent(int skillLevel) { // ... }
  24. 24. #dartlang var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); Yikes! Button is repeated 6 times! Too many buttons
  25. 25. #dartlang Method cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button);
  26. 26. #dartlang Inline initialization parentElement.children.add( new ButtonElement()..text = 'Click Point');
  27. 27. #dartlang One of these things is not like the other Object Persistable Hug Hug is not is-a Persistable Don't pollute your inheritance tree!
  28. 28. #dartlang Don't inherit, mixin! Object PersistableHug Mixin
  29. 29. #dartlang Mixins abstract class Persistable { save() { ... } load() { ... } toJson(); } class Hug extends Object with Persistable { Map toJson() => {'strength':10}; } main() { var embrace = new Hug(); embrace.save(); } Extend object & no constructors? You can be a mixin! Apply the mixin. Use methods from mixin.
  30. 30. #dartlang Context switching considered harmful, Iterate quickly
  31. 31. #dartlang Demo Pop, Pop, Win!
  32. 32. #dartlang
  33. 33. #dartlang 700+ packages
  34. 34. #dartlang Demo New Dart Project + Packages
  35. 35. #dartlang Compile Dart to JavaScript with dart2js
  36. 36. #dartlang main Library baz foo bar boo imports calls baz main foo bar Tree shaking dart2js
  37. 37. #dartlang Our challenge ... clean semantics and unsurprising behavior without extra checks when compiled to JavaScript
  38. 38. #dartlang
  39. 39. #dartlang
  40. 40. #dartlang
  41. 41. #dartlang
  42. 42. #dartlang
  43. 43. #dartlang Old 'n busted New hotness <messages> <message> <subject> Please fill out the TPS report </subject> <sent>2012-10-03</sent> <summary> I'm going to have to ask you to come in... </summary> </message> <message> <subject> Reminder: fill out that TPS report! </subject> <sent>2012-10-04</sent> <summary> It's been 24 hours... </summary> </message> ... </messages>
  44. 44. #dartlang <custom-element> Structure Behavior Styles <div> <input> <p> <span></span> </p> </div> tag.verifyAccount(); <style> p { color: red; } </style> Encapsulated
  45. 45. #dartlang Reusable Custom Element HTML Page import import import HTML Page HTML Page
  46. 46. #dartlang Data binding Data model DOM Nodes Data model DOM Nodes
  47. 47. #dartlang ShadowDOM HTML Imports <template> Custom Elements New web specifications Future proof
  48. 48. #dartlang Polymer.dart (today) Using web components today
  49. 49. #dartlang Custom elements everywhere! <body> <persistable-db dbname="game" storename="sologames"></persistable-db> <game-assets></game-assets> <game-app></game-app> <google-signin clientId="250963735330.apps.googleusercontent.com" signInMsg="Please sign in"></google-signin>
  50. 50. #dartlang Angular is ported to Dart!
  51. 51. #dartlang <div my-controller> <div class="well"> <click-counter count="{{ctrl.count}}"></click-counter> </div> </div> Angular and Polymer together Polymer element Angular controller
  52. 52. #dartlang Dart in production
  53. 53. #dartlang "Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap
  54. 54. #dartlang "Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage
  55. 55. #dartlang "Dart offers a sane and consistent development experience for modern web applications." - Blossom
  56. 56. #dartlang "The source code for this game (Escape) is 20% smaller compared to the ActionScript version (69.6 KB vs 86.5 KB). The port took only 6 hours." -- Author of StageXL
  57. 57. #dartlang #dartlang Export Flash movies/games to Dart from Flash Pro
  58. 58. #dartlang "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google
  59. 59. #dartlang TC52 to standardize Dart language
  60. 60. #dartlang Ready to get started? Write a Dart app! dartlang.org/codelabs/darrrt/
  61. 61. #dartlang Dart - for the modern web ● Platform you can use today ● Easy to get started - dartlang.org ● Compiles to JavaScript
  62. 62. #dartlang Thanks! j832.com

×