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.
Dart, Darrt, Darrrt 
Jana Moudrá @Janamou +JanaMoudrá
Website?. 
This cannot be difficult....
How to do it?.
Web Developer 
Language 
Dev Editor 
Great Tools
JavaScript 
jQuery 
Node.js 
CofeeScript 
ReactJS 
...
Sublime Text 
WebStorm 
... 
Eclipse 
Netbeans 
... 
Notepad
bower 
npm 
jam 
volo 
...
Which. 
should I use?.
Language 
Dev Editor 
Great Tools
Language 
Dev Editor 
Great Tools
Language 
Dev Editor 
Great Tools
Language 
Dev Editor 
Great Tools
Language 
Dev Editor 
Great Tools 
Performance
Language 
Dev Editor 
Great Tools 
Performance 
And more...
Language
Language 
is easy to learn
Open-source 
For better performance 
Object oriented 
Modular
Client and Server!.
Client and Server!. 
Command Line Chrome Packaged App.
Optional Types 
var x = 10; 
var y = 20; 
num x = 10; 
num y = 20; 
or
void main() { 
print("Hello World Dart!"); 
} 
main() function
void main() { 
var myButton = querySelector("#my-button"); 
myButton.text = "Open Window"; 
myButton.style.background = "p...
void main() { 
querySelector("#my-button") 
..text = "Open Window" 
..style.background = "pink" 
..style.fontFamily = "Com...
class Animal { 
int numberOfLegs; 
int numberOfHeads; 
Animal(int numberOfLegs, int numberOfHeads) { 
this.numberOfLegs = ...
class Animal { 
int numberOfLegs; 
int numberOfHeads; 
Animal(this.numberOfLegs, this.numberOfHeads); 
} 
Syntactic sugar
class Animal { 
int numberOfLegs; 
int numberOfHeads; 
Animal(this.numberOfLegs, this.numberOfHeads); 
} 
void main() { 
A...
class Animal { 
int numberOfLegs; 
int numberOfHeads; 
String name; 
Animal(this.numberOfLegs, this.numberOfHeads); 
Anima...
class Animal { 
int numberOfLegs; 
int numberOfHeads; 
String _name; 
Animal(this.numberOfLegs, this.numberOfHeads); 
Anim...
Tools
Tools 
we have them
Dart SDK Dart Editor Dartium
Dart SDK 
Dart VM 
Libraries 
Command 
Line Tools
Dartium 
Chromium with Dart VM
Modern Browsers 
Compiled into JavaScript
Dart Libraries 
dart:async, dart:collection, dart:convert, 
dart:core, dart:html, 
dart:indexed_db, dart:io, dart:isolate,...
dart:js 
<script type="text/javascript"> 
var Person = function(name, surname) { 
this.name = name; 
this.surname = surnam...
dart:js 
import 'dart:js'; 
void main() { 
var person = new JsObject(context['Person'], 
["Jana", "Moudra"]); 
print(perso...
pub.
pubspec.yaml 
name: todolist 
description: "My TODO list!" 
dependencies: 
browser: any 
polymer: any 
vector_math: any
Libraries on Pub 
polymer, angular, route, 
route_hierarchical, 
googleapis, chrome, 
json_object, vector_math, 
appengine...
Dart is on the cloud!.
Demo 
+
void main() { 
... 
Client Server 
} 
void main() { 
runAppEngine(reqHandler); 
}
class Note extends Model { 
... 
Client Server 
} 
class Note extends Model { 
... 
}
Dart 
Is easy to learn
Darrt 
Has great tools
Darrrt 
You can write awesome apps
12:30 
Dart Code Lab
Thank You! 
Questions? 
Jana Moudrá @Janamou +JanaMoudrá
Image credits 
● Tim Regan, cc, https://www.flickr. 
com/photos/27141279@N00/10481690626 
● reynermedia, cc, https://www.f...
Dart, Darrt, Darrrt
Upcoming SlideShare
Loading in …5
×

Dart, Darrt, Darrrt

3,038 views

Published on

Published in: Software
  • Be the first to comment

Dart, Darrt, Darrrt

  1. 1. Dart, Darrt, Darrrt Jana Moudrá @Janamou +JanaMoudrá
  2. 2. Website?. This cannot be difficult....
  3. 3. How to do it?.
  4. 4. Web Developer Language Dev Editor Great Tools
  5. 5. JavaScript jQuery Node.js CofeeScript ReactJS ...
  6. 6. Sublime Text WebStorm ... Eclipse Netbeans ... Notepad
  7. 7. bower npm jam volo ...
  8. 8. Which. should I use?.
  9. 9. Language Dev Editor Great Tools
  10. 10. Language Dev Editor Great Tools
  11. 11. Language Dev Editor Great Tools
  12. 12. Language Dev Editor Great Tools
  13. 13. Language Dev Editor Great Tools Performance
  14. 14. Language Dev Editor Great Tools Performance And more...
  15. 15. Language
  16. 16. Language is easy to learn
  17. 17. Open-source For better performance Object oriented Modular
  18. 18. Client and Server!.
  19. 19. Client and Server!. Command Line Chrome Packaged App.
  20. 20. Optional Types var x = 10; var y = 20; num x = 10; num y = 20; or
  21. 21. void main() { print("Hello World Dart!"); } main() function
  22. 22. void main() { var myButton = querySelector("#my-button"); myButton.text = "Open Window"; myButton.style.background = "pink"; myButton.style.fontFamily = "Comic Sans MS"; myButton.onClick.listen(openWindow); } Cascade operator
  23. 23. void main() { querySelector("#my-button") ..text = "Open Window" ..style.background = "pink" ..style.fontFamily = "Comic Sans MS" ..onClick.listen(openWindow); } Cascade operator
  24. 24. class Animal { int numberOfLegs; int numberOfHeads; Animal(int numberOfLegs, int numberOfHeads) { this.numberOfLegs = numberOfLegs; this.numberOfHeads = numberOfHeads; } } Syntactic sugar
  25. 25. class Animal { int numberOfLegs; int numberOfHeads; Animal(this.numberOfLegs, this.numberOfHeads); } Syntactic sugar
  26. 26. class Animal { int numberOfLegs; int numberOfHeads; Animal(this.numberOfLegs, this.numberOfHeads); } void main() { Animal dragon = new Animal(4, 1); } Syntactic sugar
  27. 27. class Animal { int numberOfLegs; int numberOfHeads; String name; Animal(this.numberOfLegs, this.numberOfHeads); Animal.withName(this.name); } void main() { Animal dragon = new Animal.withName("Pepa"); } Named constructors
  28. 28. class Animal { int numberOfLegs; int numberOfHeads; String _name; Animal(this.numberOfLegs, this.numberOfHeads); Animal.withName(this._name); String get name => "$_name is the best"; set name(String name) => _name = name; } Getter and Setter
  29. 29. Tools
  30. 30. Tools we have them
  31. 31. Dart SDK Dart Editor Dartium
  32. 32. Dart SDK Dart VM Libraries Command Line Tools
  33. 33. Dartium Chromium with Dart VM
  34. 34. Modern Browsers Compiled into JavaScript
  35. 35. Dart Libraries dart:async, dart:collection, dart:convert, dart:core, dart:html, dart:indexed_db, dart:io, dart:isolate, dart:js, dart:math, dart:mirrors, dart:profiler, dart:svg, dart:typed_data, dart:web_audio, dart:web_gl, dart:web_sql
  36. 36. dart:js <script type="text/javascript"> var Person = function(name, surname) { this.name = name; this.surname = surname; this.sayHello = function(){ alert("Hello!"); } }; </script>
  37. 37. dart:js import 'dart:js'; void main() { var person = new JsObject(context['Person'], ["Jana", "Moudra"]); print(person["name"]); print(person["surname"]); person.callMethod("sayHello"); }
  38. 38. pub.
  39. 39. pubspec.yaml name: todolist description: "My TODO list!" dependencies: browser: any polymer: any vector_math: any
  40. 40. Libraries on Pub polymer, angular, route, route_hierarchical, googleapis, chrome, json_object, vector_math, appengine, ... and more on pub.dartlang.org!
  41. 41. Dart is on the cloud!.
  42. 42. Demo +
  43. 43. void main() { ... Client Server } void main() { runAppEngine(reqHandler); }
  44. 44. class Note extends Model { ... Client Server } class Note extends Model { ... }
  45. 45. Dart Is easy to learn
  46. 46. Darrt Has great tools
  47. 47. Darrrt You can write awesome apps
  48. 48. 12:30 Dart Code Lab
  49. 49. Thank You! Questions? Jana Moudrá @Janamou +JanaMoudrá
  50. 50. Image credits ● Tim Regan, cc, https://www.flickr. com/photos/27141279@N00/10481690626 ● reynermedia, cc, https://www.flickr. com/photos/89228431@N06/11285592553/ ● jenny downing, cc, https://www.flickr. com/photos/7941044@N06/3990391143/ ● kevin dooley, cc, https://www.flickr. com/photos/12836528@N00/7922047866/ ● monkeywing, cc, https://www.flickr. com/photos/9887585@N08/7584708186/ ● Gregor Cresnar, https://www.iconfinder. com/icons/304602/apple_browser_computer_laptop_macbook_monitor_ notebook_screen_web_icon ● Jerry Low, https://www.iconfinder. com/icons/286686/computers_servers_web_host_icon

×