Dart? Polymer? Use them together to make a nice Web App!

1. How to bake an app in
Dart
Polymer
&
Jana Moudrá @Janamou +JanaMoudrá www.moudra.net

2. .Let’s make a Web App....

4. JavaScript, jQuery, CoffeeScript,
TypeScript, ReactJS,
Backbone.js, Ember.js, AngularJS
...

5. JavaScript, jQuery, CoffeeScript,
TypeScript, ReactJS,
Backbone.js, Ember.js, AngularJS
jQuery UI, Twitter Bootstrap,
Foundation, Web Starter Kit
...

6. OK... And now what?.

7. Dart
Polymer
+

8. Dart
Polymer
+
Nice Web App
=

9. 1.9.1

10. Open-source
Object oriented
Standardized
Modular
Tools
Better productivity

11. Client and Server.

12. Command line.

13. Language

14. Language
is easy to learn

15. var x = 10;
var y = 20;
Optional Types
num x = 10;
num y = 20;
or

16. main() {
print("Hello World Dart!");
}
main() function

17. 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

18. main() {
querySelector("#my-button")
..text = "Open Window"
..style.background = "pink"
..style.fontFamily = "Comic Sans MS"
..onClick.listen(openWindow);
}
Cascade operator

19. class Animal {
int numberOfLegs;
int numberOfHeads;
Animal(int numberOfLegs, int numberOfHeads) {
this.numberOfLegs = numberOfLegs;
this.numberOfHeads = numberOfHeads;
}
}
Syntactic sugar

20. class Animal {
int numberOfLegs;
int numberOfHeads;
Animal(this.numberOfLegs, this.numberOfHeads);
}
Syntactic sugar

21. class Animal {
int numberOfLegs;
int numberOfHeads;
Animal(this.numberOfLegs, this.numberOfHeads);
}
main() {
Animal dragon = new Animal(4, 1);
}
Syntactic sugar

22. 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

23. import 'dart:html';
main() {
HttpRequest.getString("animals.json")
.then((String response) {
feedAnimals(response);
});
}
Asynchrony support

24. import 'dart:html';
main() async {
String response =
await HttpRequest.getString("animals.json");
feedAnimals(response);
}
Asynchrony support in 1.9

25. import 'dart:html';
main() async {
String response =
await HttpRequest.getString("animals.json");
feedAnimals(response);
}
Asynchrony support in 1.9
And that’s not all...

26. DEP
Dart Enhancement Proposals
YOU can be also part of it
https://github.com/dart-lang/dart_enhancement_proposals

27. Tools

28. Tools
make you productive

29. Dart Editor DartiumDart SDK

30. Modern Browsers
Compiled into JavaScript

31. 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

32. pub.

33. name: my_application
description: "My Application!"
dependencies:
browser: any
polymer: any
pubspec.yaml

34. Libraries on Pub
polymer, angular, route,
route_hierarchical,
googleapis, chrome,
json_object, vector_math,
appengine, ...
and more on pub.dartlang.org!

35. polymer

36. Polymer makes it easier
and faster to create anything
from a button to a complete
application across desktop,
mobile, and beyond.
www.polymer-project.org

37. On top of Web Components

38. Web Components?.

39. Web Components
Set of Standards
Components reusability
Encapsulation

40. Web Components
Set of Standards
Components reusability
Encapsulation
Custom Elements, Shadow DOM,
HTML Imports, HTML Templates

41. On top of Web Components
Polymer Element
Two-way Binding
Paper Elements
...

42. Polymer in Dart

43. Polymer in Dart
is Polymer.dart

44. name: polymer_application
description: "Polymer Application!"
dependencies:
browser: any
polymer: ">=0.15.1 <0.17.0"
core_elements: ">=0.6.0 <0.7.0"
paper_elements: ">=0.6.0 <0.7.0"
pubspec.yaml

45. <polymer-element name="counter-button">
<template>
<h1>Jana's counter: {{counter}}</h1>
<button
on-click="{{incrementCounter}}">Click!</button>
</template>
<script type="application/dart"
src="counter_button.dart"></script>
</polymer-element>
Create Custom Element

46. @CustomTag('counter-button')
class CounterButtonElement extends PolymerElement {
@observable int counter = 0;
CounterButtonElement.created() : super.created();
void incrementCounter(Event event, Object object,
Element target) {
counter++;
}
}
Create Custom Element

47. <html>
<head>
<link rel="import"
href="packages/MyPolymerApp/counter_button.html">
</head>
<body unresolved>
<counter-button></counter-button>
<script type="application/dart">
export 'package:polymer/init.dart';</script>
</body>
</html>
Include Custom Element

48. Elements

49. Elements
you can use

50. Core Elements
<core-drawer-panel>
<core-header-panel>
<core-toolbar>
<core-menu>
<core-item>
<core-icon>
...

51. Paper Elements
and more on polymer-project.org!

52. Dart

53. Dart
Polymer
+

54. Dart
Polymer
+
Nice Web App
=

55. Thank You!
Questions?
Jana Moudrá @Janamou +JanaMoudrá www.moudra.net

56. Image credits
● Matthew Keefe, cc,
https://www.flickr.com/photos/60243770@N00/3123775954/
● Dru!, cc,
https://www.flickr.com/photos/druclimb/3277540656
● reynermedia, cc, https://www.flickr.
com/photos/89228431@N06/11285592553/
● Kjetil Korslien, cc
https://www.flickr.com/photos/kjetikor/8484119632/
● jenny downing, cc, https://www.flickr.
com/photos/7941044@N06/3990391143/
● PeterDSims, cc
https://www.flickr.com/photos/68030623@N08/6552160303/