Your SlideShare is downloading. ×
  • Like
Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,770 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,770
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. #dartlang 2014-02-01 j832.com Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/
  • 2. #dartlang Me Iowa Microsoft Freelance Dart Google j832.com
  • 3. #dartlang ✔ Improved productivity ✔ Increased performance
  • 4. #dartlang Compile to JavaScript, runs across the modern web
  • 5. #dartlang
  • 6. #dartlang Run Dart on the server with the Dart VM
  • 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. #dartlang Unit test Dart SDK Polymer Intl Packages "Things are consistent and clear."
  • 9. #dartlang Apps start small, but grow and scale
  • 10. #dartlang Simple syntax, ceremony free class Hug { Familiar
  • 11. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse
  • 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. #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. #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. #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. #dartlang main() => print('Hello, World!');
  • 17. #dartlang Clean semantics and behavior
  • 18. #dartlang Clean semantics and behavior ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + Examples:
  • 19. #dartlang Missing getter? "hello".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "hello" Arguments: [] Logical
  • 20. #dartlang String compared to number? 'hello' > 1 // ?? Class 'String' has no instance method '>'. Logical
  • 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. #dartlang Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ } } Lexical this
  • 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. #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. #dartlang Method cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button);
  • 26. #dartlang Inline initialization parentElement.children.add( new ButtonElement()..text = 'Click Point');
  • 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. #dartlang Don't inherit, mixin! Object PersistableHug Mixin
  • 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. #dartlang Context switching considered harmful, Iterate quickly
  • 31. #dartlang Demo Pop, Pop, Win!
  • 32. #dartlang
  • 33. #dartlang 700+ packages
  • 34. #dartlang Demo New Dart Project + Packages
  • 35. #dartlang Compile Dart to JavaScript with dart2js
  • 36. #dartlang main Library baz foo bar boo imports calls baz main foo bar Tree shaking dart2js
  • 37. #dartlang Our challenge ... clean semantics and unsurprising behavior without extra checks when compiled to JavaScript
  • 38. #dartlang
  • 39. #dartlang
  • 40. #dartlang
  • 41. #dartlang
  • 42. #dartlang
  • 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. #dartlang <custom-element> Structure Behavior Styles <div> <input> <p> <span></span> </p> </div> tag.verifyAccount(); <style> p { color: red; } </style> Encapsulated
  • 45. #dartlang Reusable Custom Element HTML Page import import import HTML Page HTML Page
  • 46. #dartlang Data binding Data model DOM Nodes Data model DOM Nodes
  • 47. #dartlang ShadowDOM HTML Imports <template> Custom Elements New web specifications Future proof
  • 48. #dartlang Polymer.dart (today) Using web components today
  • 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. #dartlang Angular is ported to Dart!
  • 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. #dartlang Dart in production
  • 53. #dartlang "Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap
  • 54. #dartlang "Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage
  • 55. #dartlang "Dart offers a sane and consistent development experience for modern web applications." - Blossom
  • 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. #dartlang #dartlang Export Flash movies/games to Dart from Flash Pro
  • 58. #dartlang "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google
  • 59. #dartlang TC52 to standardize Dart language
  • 60. #dartlang Ready to get started? Write a Dart app! dartlang.org/codelabs/darrrt/
  • 61. #dartlang Dart - for the modern web ● Platform you can use today ● Easy to get started - dartlang.org ● Compiles to JavaScript
  • 62. #dartlang Thanks! j832.com