WebApp with PolymerDart and Material @ntaoo ( +naotohc )

PolymerDart ● Dart port of the Polymer project ● package:polymer ● Prior art: Web UI

Pub: PaperElements, CoreElements ● Wrap JS paper-elements and core-elements with dart:js

Polymer tutorial https://www.polymer-project.org/docs/start/tutorial/intro.html

Porting the tutorial with PolymerDart ● https://github.com/ntaoo/polymer-dart-examples

Demo

Polymer, Dart version PolymerDart ● Less cryptic. ● More readable. ● Simple familiar Dart syntax. ● Can scaffold new custom tag. PolymerJS ● Less key typing. ● Implicit conventions.

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

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

@annotations PolymerDart PolymerJS

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.

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

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.

StageHand PolymerDart scaffolding $ stagehand polymerapp

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/

Run on Mobile Demo https://www.dartlang.org/tools/editor/mobile.html

TODO Can it work well with ● Cordova ● MobileChromeApps PolymerDart with AngularDart