A presentation on Dart that I gave for Google's Dart Flight School

2. https://www.dartlang.org/events/2014/flight-school/

5. Familiar
Looks like Java
Looks like C#
Behaves like JavaScript &
ActionScript

6. New hotness
print('Angular' ' vs ' 'Ember?');
// Angular vs Ember
var premiereDate = '3/14/2014';
print('Date: $premiereDate');
// Date: 3/14/2014

7. var premiereDate = '3/14/2014';
var template = '''
<p>
Winter is Coming: $premiereDate
</p>''';
<p>
Winter is Coming: 3/14/2014
</p>

8. Good Baggage
Associative arrays/hash/map/dict
var person = {
'name': 'Kanye West',
'desc': 'annoyance'
};
var person = new Map();

9. Good Baggage
Arrays/Lists
var brands = ['Subaru', 'Tesla'];
var brands = new List();

10. Fun times with functions
num engage() {
print('maximum warp');
return 10;
}
makeItSo() {
print('set a course, #1');
}
energize((numberOfPeople) {
print('$numberOfPeople to beam up');
});

11. Method cascading
query('#comment').classes.remove('info')
query('#comment').classes.add('alert');
query('#comment').classes
..remove('info')
..add('alert');
Short hand
num force(num mass, num velocity)
=> mass * velocity;

12. Truthiness is the falsiness

13. Tru(thy) love
No “truthiness”! If it’s not true, then it’s false!
if ('ng-oc') console.log('truly, madly,
deeply');
// truly, madly, deeply
if ('ng-oc') print('truly, madly, deeply');
// Dart:
No undefined. Only null.

14. Communication is key
'hello'.missing_method
// JS: undefined
// Dart: "hello".get$missing_method is not a
function
'hello' > 1
// JS: false
// Dart: $.JSString_methods.$gt is not a f
unction

15. class Meetup {
int _id;
String name;
String url;
List<Member> members;
List events;
Meetup(this.name, this.url);
Meetup.fromUrl(string url) { /* load from API */ }
int get id => _id;
}
Stay classy

16. Is Dart your type?
Dynamically typed
Optional typing
No type checking

17. Familiarity — you know a little bit already!
Core ideas are the same
● MVC
● Testability
● Dependency injection

18. So what do you already know?
View template concepts
<h1>{{title}}</h1><input ng-model="title"/>
PODO models and data binding
Controllers, directives*
Dependency injection

19. Ng-Dart dependency injection
m.factory('userRepo', ['$http',
function($http) {
return {
getUser: function(id) { /*... */ }
}
}]);
class UserRepo {
UserRepo(Http httpService) { }
User getUser(int id) { /*... */ }
}

20. Ng-Dart service and modules
class MeetupHero extends Module {
MeetupHero() {
type(UserRepo);
}
}
main() {
ngBootstrap(module: new MeetupHero());
}

21. Ng-Dart controllers
@NgController(
'selector': 'meetup-controller',
'publishAs': 'ctrl')
class MeetupController {
List<Member> rsvps = [];
void addRsvp(m){ rsvps.add(m); }
}
<div meetup-controller>
<button
ng-click='ctrl.addRsvp(member)'/>
</div>

22. Ng-Dart directives
AngularJS manages UI with controller and
directives
AngularDart merges the concepts and adds
another

23. Ng-Dart directives
@NgDirective('selector': 'redAlert')
class RedAlert {
Element el;
RedAlert(this.el) {
el.onClick.listen((Event e) {
// change all the things to
red bg!
});
}
}

24. Ng-Dart components
// rating_component.html
<span class="stars"
ng-if="cmp.rating != null"
ng-repeat="star in cmp.stars"
ng-click="cmp.handleClick(star)">
</span>

25. Ng-Dart components
@NgComponent(
selector: 'rating',
templateUrl: 'rating_component.html',
cssUrl: 'rating_component.css',
publishAs: 'cmp'
)

26. class RatingComponent {
int _izPrivate;
Element el;
RatingComponent(this.el) {
wouldRunInLinkingFn()
}
@NgTwoWay('rating')
int rating;
@NgAttr('max-rating')
set maxRating(String value) { /*...*/ }
void handleClick(int star) { /*...*/ }
void wouldRunInLinkingFn() { /*...*/ }
}
<rating max-rating="5" rating="movie.rating"></rating>

27. ng-show all the things
Routing, filters, testing, scope, testing & more
Metaprogramming
Tree shaking
Server-side Dart
dart2js
Polymer
Futures/Promises
& more

28. angulardart.org
dartlang.org

29. 25% off with code
LDEB25
40% off print, 50% off
ebook with code DART
25% off with code
pragprogDart2014

30. ng-book.com

31. Connecting flight with
Google Developer Group: OC
Miles Pickens