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.

How to bake an app in Dart and Polymer

1,903 views

Published on

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

Published in: Software
  • Be the first to comment

How to bake an app in Dart and Polymer

  1. 1. How to bake an app in Dart Polymer & Jana Moudrá @Janamou +JanaMoudrá www.moudra.net
  2. 2. .Let’s make a Web App....
  3. 3. JavaScript, jQuery, CoffeeScript, TypeScript, ReactJS, Backbone.js, Ember.js, AngularJS ...
  4. 4. JavaScript, jQuery, CoffeeScript, TypeScript, ReactJS, Backbone.js, Ember.js, AngularJS jQuery UI, Twitter Bootstrap, Foundation, Web Starter Kit ...
  5. 5. OK... And now what?.
  6. 6. Dart Polymer +
  7. 7. Dart Polymer + Nice Web App =
  8. 8. 1.9.1
  9. 9. Open-source Object oriented Standardized Modular Tools Better productivity
  10. 10. Client and Server.
  11. 11. Command line.
  12. 12. Language
  13. 13. Language is easy to learn
  14. 14. var x = 10; var y = 20; Optional Types num x = 10; num y = 20; or
  15. 15. main() { print("Hello World Dart!"); } main() function
  16. 16. 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
  17. 17. main() { querySelector("#my-button") ..text = "Open Window" ..style.background = "pink" ..style.fontFamily = "Comic Sans MS" ..onClick.listen(openWindow); } Cascade operator
  18. 18. class Animal { int numberOfLegs; int numberOfHeads; Animal(int numberOfLegs, int numberOfHeads) { this.numberOfLegs = numberOfLegs; this.numberOfHeads = numberOfHeads; } } Syntactic sugar
  19. 19. class Animal { int numberOfLegs; int numberOfHeads; Animal(this.numberOfLegs, this.numberOfHeads); } Syntactic sugar
  20. 20. class Animal { int numberOfLegs; int numberOfHeads; Animal(this.numberOfLegs, this.numberOfHeads); } main() { Animal dragon = new Animal(4, 1); } Syntactic sugar
  21. 21. 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
  22. 22. import 'dart:html'; main() { HttpRequest.getString("animals.json") .then((String response) { feedAnimals(response); }); } Asynchrony support
  23. 23. import 'dart:html'; main() async { String response = await HttpRequest.getString("animals.json"); feedAnimals(response); } Asynchrony support in 1.9
  24. 24. import 'dart:html'; main() async { String response = await HttpRequest.getString("animals.json"); feedAnimals(response); } Asynchrony support in 1.9 And that’s not all...
  25. 25. DEP Dart Enhancement Proposals YOU can be also part of it https://github.com/dart-lang/dart_enhancement_proposals
  26. 26. Tools
  27. 27. Tools make you productive
  28. 28. Dart Editor DartiumDart SDK
  29. 29. Modern Browsers Compiled into JavaScript
  30. 30. 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
  31. 31. pub.
  32. 32. name: my_application description: "My Application!" dependencies: browser: any polymer: any pubspec.yaml
  33. 33. Libraries on Pub polymer, angular, route, route_hierarchical, googleapis, chrome, json_object, vector_math, appengine, ... and more on pub.dartlang.org!
  34. 34. polymer
  35. 35. 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
  36. 36. On top of Web Components
  37. 37. Web Components?.
  38. 38. Web Components Set of Standards Components reusability Encapsulation
  39. 39. Web Components Set of Standards Components reusability Encapsulation Custom Elements, Shadow DOM, HTML Imports, HTML Templates
  40. 40. On top of Web Components Polymer Element Two-way Binding Paper Elements ...
  41. 41. Polymer in Dart
  42. 42. Polymer in Dart is Polymer.dart
  43. 43. 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
  44. 44. <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
  45. 45. @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
  46. 46. <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
  47. 47. Elements
  48. 48. Elements you can use
  49. 49. Core Elements <core-drawer-panel> <core-header-panel> <core-toolbar> <core-menu> <core-item> <core-icon> ...
  50. 50. Paper Elements and more on polymer-project.org!
  51. 51. Dart
  52. 52. Dart Polymer +
  53. 53. Dart Polymer + Nice Web App =
  54. 54. Thank You! Questions? Jana Moudrá @Janamou +JanaMoudrá www.moudra.net
  55. 55. 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/

×