WebApp with PolymerDart and Material

Dart現状確認会 発表資料
http://connpass.com/event/9562/?utm_campaign=event_publish_to_follower&utm_medium=twitter&utm_source=notifications

Transcript

1. WebApp with PolymerDart and Material @ntaoo ( +naotohc )
2. PolymerDart • Dart port of the Polymer project • package:polymer • Prior art: Web UI
3. Pub: PaperElements, CoreElements • Wrap JS paper-elements and core-elements with dart:js
4. Polymer tutorial https://www.polymer-project.org/docs/start/tutorial/intro.html
5. Porting the tutorial with PolymerDart • https://github.com/ntaoo/polymer-dart-examples
6. Demo
7. Polymer, Dart version PolymerDart • Less cryptic. • More readable. • Simple familiar Dart syntax. • Can scaffold new custom tag. PolymerJS • Less key typing. • Implicit conventions.
8. Create custom element template pub run polymer $ pub run polymer:new_element element-name [-o output_dir] ex: pub run polymer:new_element post-card -o lib/polymer_tutorial
9. @annotations PolymerDart PolymerJS @CustomTag annotation to a class extending PolymerElement” @published to define the attribute of the custom element. @observable for data binding inside the custom element. (Optional) Type annotations (String, List, ...) to catch type errors in the development.
10. @annotations PolymerDart PolymerJS
11. Explicit syntax PolymerDart PolymerJS • Less key typing. • Implicit conventions. Also supports Life cycle methods. created(), attached(), attributeChanged(), detached(), ready() Access element instance by id with map syntax. -> this.$[‘sernive’]) Can allow any type of sender. In this example, sender is PostCard.
12. (Observable) Map is Map PolymerDart {{post.username}} causes error. {{post[‘username’]}} because of the Map syntax in Dart. PolymerJS {{post.username}} is okey. It’s JavaScript.
13. Tool: StageHand • To Scaffold new Dart project (like Yeoman) • http://stagehand.pub/ Available generators: consoleapp - A minimal command-line application. package - A library useful for applications or for sharing on pub.dartlang.org. polymerapp - A polymer.dart web app. shelfapp - A web server using the shelf package. webapp - A web app for the developer that doesn’t want to be confused by too much going on.
14. StageHand PolymerDart scaffolding $ stagehand polymerapp
15. References PolymerDart is Polymer. • Polymer Project https://www.polymer-project.org/ • Element collections https://www.polymer-project.org/docs/elements/ • PolymerDart home https://www.dartlang.org/polymer/
16. Run on Mobile Demo https://www.dartlang.org/tools/editor/mobile.html
17. TODO Can it work well with • Cordova • MobileChromeApps PolymerDart with AngularDart