Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
https://www.dartlang.org/events/2014/flight-school/
Familiar
Looks like Java
Looks like C#
Behaves like JavaScript &
ActionScript
New hotness
print('Angular' ' vs ' 'Ember?');
// Angular vs Ember
var premiereDate = '3/14/2014';
print('Date: $premiereDa...
var premiereDate = '3/14/2014';
var template = '''
<p>
Winter is Coming: $premiereDate
</p>''';
<p>
Winter is Coming: 3/14...
Good Baggage
Associative arrays/hash/map/dict
var person = {
'name': 'Kanye West',
'desc': 'annoyance'
};
var person = new...
Good Baggage
Arrays/Lists
var brands = ['Subaru', 'Tesla'];
var brands = new List();
Fun times with functions
num engage() {
print('maximum warp');
return 10;
}
makeItSo() {
print('set a course, #1');
}
ener...
Method cascading
query('#comment').classes.remove('info')
query('#comment').classes.add('alert');
query('#comment').classe...
Truthiness is the falsiness
Tru(thy) love
No “truthiness”! If it’s not true, then it’s false!
if ('ng-oc') console.log('truly, madly,
deeply');
// tru...
Communication is key
'hello'.missing_method
// JS: undefined
// Dart: "hello".get$missing_method is not a
function
'hello'...
class Meetup {
int _id;
String name;
String url;
List<Member> members;
List events;
Meetup(this.name, this.url);
Meetup.fr...
Is Dart your type?
Dynamically typed
Optional typing
No type checking
Familiarity — you know a little bit already!
Core ideas are the same
● MVC
● Testability
● Dependency injection
So what do you already know?
View template concepts
<h1>{{title}}</h1><input ng-model="title"/>
PODO models and data bindi...
Ng-Dart dependency injection
m.factory('userRepo', ['$http',
function($http) {
return {
getUser: function(id) { /*... */ }...
Ng-Dart service and modules
class MeetupHero extends Module {
MeetupHero() {
type(UserRepo);
}
}
main() {
ngBootstrap(modu...
Ng-Dart controllers
@NgController(
'selector': 'meetup-controller',
'publishAs': 'ctrl')
class MeetupController {
List<Mem...
Ng-Dart directives
AngularJS manages UI with controller and
directives
AngularDart merges the concepts and adds
another
Ng-Dart directives
@NgDirective('selector': 'redAlert')
class RedAlert {
Element el;
RedAlert(this.el) {
el.onClick.listen...
Ng-Dart components
// rating_component.html
<span class="stars"
ng-if="cmp.rating != null"
ng-repeat="star in cmp.stars"
n...
Ng-Dart components
@NgComponent(
selector: 'rating',
templateUrl: 'rating_component.html',
cssUrl: 'rating_component.css',...
class RatingComponent {
int _izPrivate;
Element el;
RatingComponent(this.el) {
wouldRunInLinkingFn()
}
@NgTwoWay('rating')...
ng-show all the things
Routing, filters, testing, scope, testing & more
Metaprogramming
Tree shaking
Server-side Dart
dart...
angulardart.org
dartlang.org
25% off with code
LDEB25
40% off print, 50% off
ebook with code DART
25% off with code
pragprogDart2014
ng-book.com
Connecting flight with
Google Developer Group: OC
Miles Pickens
Dart and AngularDart
Dart and AngularDart
Dart and AngularDart
Upcoming SlideShare
Loading in …5
×

Dart and AngularDart

788 views

Published on

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

Published in: Engineering
  • Be the first to comment

Dart and AngularDart

  1. 1. https://www.dartlang.org/events/2014/flight-school/
  2. 2. Familiar Looks like Java Looks like C# Behaves like JavaScript & ActionScript
  3. 3. New hotness print('Angular' ' vs ' 'Ember?'); // Angular vs Ember var premiereDate = '3/14/2014'; print('Date: $premiereDate'); // Date: 3/14/2014
  4. 4. var premiereDate = '3/14/2014'; var template = ''' <p> Winter is Coming: $premiereDate </p>'''; <p> Winter is Coming: 3/14/2014 </p>
  5. 5. Good Baggage Associative arrays/hash/map/dict var person = { 'name': 'Kanye West', 'desc': 'annoyance' }; var person = new Map();
  6. 6. Good Baggage Arrays/Lists var brands = ['Subaru', 'Tesla']; var brands = new List();
  7. 7. Fun times with functions num engage() { print('maximum warp'); return 10; } makeItSo() { print('set a course, #1'); } energize((numberOfPeople) { print('$numberOfPeople to beam up'); });
  8. 8. 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;
  9. 9. Truthiness is the falsiness
  10. 10. 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.
  11. 11. 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
  12. 12. 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
  13. 13. Is Dart your type? Dynamically typed Optional typing No type checking
  14. 14. Familiarity — you know a little bit already! Core ideas are the same ● MVC ● Testability ● Dependency injection
  15. 15. 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
  16. 16. Ng-Dart dependency injection m.factory('userRepo', ['$http', function($http) { return { getUser: function(id) { /*... */ } } }]); class UserRepo { UserRepo(Http httpService) { } User getUser(int id) { /*... */ } }
  17. 17. Ng-Dart service and modules class MeetupHero extends Module { MeetupHero() { type(UserRepo); } } main() { ngBootstrap(module: new MeetupHero()); }
  18. 18. 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>
  19. 19. Ng-Dart directives AngularJS manages UI with controller and directives AngularDart merges the concepts and adds another
  20. 20. 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! }); } }
  21. 21. 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>
  22. 22. Ng-Dart components @NgComponent( selector: 'rating', templateUrl: 'rating_component.html', cssUrl: 'rating_component.css', publishAs: 'cmp' )
  23. 23. 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>
  24. 24. ng-show all the things Routing, filters, testing, scope, testing & more Metaprogramming Tree shaking Server-side Dart dart2js Polymer Futures/Promises & more
  25. 25. angulardart.org dartlang.org
  26. 26. 25% off with code LDEB25 40% off print, 50% off ebook with code DART 25% off with code pragprogDart2014
  27. 27. ng-book.com
  28. 28. Connecting flight with Google Developer Group: OC Miles Pickens

×